ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

2019-01-01から1年間の記事一覧

Google AdSenseをReactに対応させる

Reactで作ったwebページに対してGoogle AdSenseを表示させる機会があり、その際に少し手こずったので、対応方法について書く。 まず前提条件として、下記のscriptをheadタグ内に設定しておく。 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> Reactを使わなければinsタグとscriptタグを設定することで表示…

CSSの素敵なレイアウトチェック

css

dev.to このCSSの組み方によるレイアウトチェックは非常に便利なので、記事が消されても使えるように引用する。 * { background-color: rgba(255,0,0,.2); } * * { background-color: rgba(0,255,0,.2); } * * * { background-color: rgba(0,0,255,.2); } * …

Javaに関する記事も書いています

昔、少しだけJavaを触っていたこともありプライベートではJavaを書いているのですが、色々と忘れてしまっている部分もあり、Javaに関するブログも書いています。 javatar.hatenablog.com 徐々に内容も増やしていく予定なのでJavaにご興味のある方は、是非、…

Reactでコンポーネントが更新された際にDOMの更新をかけたい

Reactでpropsに変更があった際にDOMの更新も行いたい。 例えば、親からもらったpropsに変更があった時、ajaxでリクエストをかけてその結果をもとにDOMの更新を行いたい場合など。 そんなことに直面した場合は、componentDidUpdateメソッドを使えば解決するよ…

styleプロパティーでCSSの情報が取得できない件

外部ファイルに定義されているCSSの情報はどうやらstyleプロパティーで取得することはできないようだ。 #hoge { height: 44px; } //""がリターンされる。本来であれば44pxをリターンしてほしい console.log(document.querySelector('#hoge').style.height) …

ReactでinnerHTMLを実行したい

React.Componentのrenderメソッドでhtmlを描画する時に、htmlが含まれている場合は、エスケープされてしまう。 class Hoge extends React.Component { constructor(props) { super(props); } render(){ //fooにhtmlが含まれていてもエスケープされてしまう r…

TypeScript Property 'value' does not exist on type 'Element'

TypeScriptでvalueプロパティーに値を設定したコードにコンパイルエラーが発生していた。 エラー内容は、 「hoge.ts:176:30 - error TS2339: Property 'value' does not exist on type 'Element'.」 というものだった。 コードはごくごく簡単なdomを選択して…

TypeScript Property 'submit' does not exist on type 'Element'

TypeScriptでsubmitメソッドを書いたコードにコンパイルエラーが発生していた。 エラー内容は、 「hoge.ts:176:30 - error TS2339: Property 'submit' does not exist on type 'Element'.」 というものだった。 コードはごくごく簡単なdomを選択してsubmitメ…

taggleプラグインでaddメソッドを使った時のonTagAddメソッドの挙動について

taggleプラグインでaddメソッドを使った時にonTagAddメソッドが設定されている場合、どのような引数で呼ばれるのか気になったので調べてみた。 var Taggle = require("taggle"); var _taggle = new Taggle('hoge',{ onTagAdd: function(event, tag){ console…

Android StudioでMonacaのandroidアプリのデバッグがやりやすくなった件

Monacaの公式マニュアルで確認すると、Android Studioでデバッグする場合、新規プロジェクトの作成を行うか既存のプロジェクトを開く必要があった。 docs.monaca.io 久しぶりにAndroid Studioでデバッグする機会があり、改めて確認したら、上記の方法をとら…

TypeScriptのEventTargetでコンパイルエラーになってしまう件

TypeScriptでaタグにclickイベントを追加した時の話。 document.querySelector('a').addEventListener('click',(e)=>{ let _currentTarget = e.currentTarget; let _href = _currentTarget.getAttribute('href'); }); onClickでイベントが発生し、イベントが…

npmとwebpackでqsを使う

jQueryを使わずにajaxを行う場合、いくつかの選択肢があり、その中の一つとしてaxiosがあります。 axiosでajaxを行う際に、注意点が一つあり、リクエスト時にパラメータをJSONとして送信してしまいapplication/x-www-form-urlencodedフォーマットとして送信…

Firebaseに最適な Node.jsのバージョンは8

確かうる覚えなのだが、FirebaseをNode.js経由で使う場合、Node.jsのバージョンは8がよかった記憶があるのだが、なんで10ではないのだろうと疑問に感じて調べた。 調べた結果、Cloud FunctionsのNode.jsがバージョン8に対応しており、10はベータなので、少し…

WebpackでMoment.jsを使う時の注意点

公式マニュアルには書いてあるのだが、何も設定せずに、Webpackを使うと標準のMoment.jsのコード量がとても大きいため、最終的に出力されるファイルも必然的に大きくなってしまう。 momentjs.com そこで不要なローカルタイムの設定を削除し、必要なタイムゾ…

IE11でforEachがエラーになってしまう現象について

document.querySelectorAllで複数のDOMを取得して、forEachでループさせようとするとIE11でエラーが発生する。 document.querySelectorAll('.hoge').forEach(function(currentValue){ }) そこで素直にfor文を使ってエラーを解消することにした。 var _hoge =…

scss cssのベンダープレフィックスを追加するmixin

scss、css共にコーディングする時に、ベンダープレフィックスをつけるのが正直めんどくさい。 もっと手軽に解決する方法はないのか探していたら、mixinで処理する方法を発見した。 css-tricks.com 上で紹介されているmixinでもいいのだが、もっとコンパクト…

今さら聞けないwebpackを使ってVue.jsを始める

Vue

今さらwebpackを使ってVue.jsを初めてみた。 まずは、npm経由でVue.jsをインストール npm install vue importを使ってVueをインクルードさせた上で、JavaScriptの実装をする。 import Vue from 'vue'; var app = new Vue({ el: '#app', data: { message: 'He…

React.Componentでclassを付与する時の注意点

React.Componentのrenderメソッドを使ってDOMを表示する時がある。 class HelloMessage extends React.Component { constructor(props) { super(props); } render() { return <div>Hello React</div> } } ReactDOM.render( <HelloMessage />, document.getElementById('test') ); ここで</hellomessage>…

Swiperをnpm経由で使い最後にwebpack

Swiperというレスポンシブ対応をしたスライダー(カルーセル)プラグインがある。 idangero.us jQueryプラグインとしても使えるし、jQueryに依存せず独立して使うことができるわけだが、今回、npm経由でインストールを行い、最後に、webpackする方法について調…

JSXでReact.Componentを宣言する時の注意点

Components and Props reactjs.org と JSX In DepthのUser-Defined Components Must Be Capitalized reactjs.org を読み返してびっくりしたことがあった。 React.Componentを表示する時、頭文字を大文字にしないといけないということだ。 どういうことか例を…

ReactでHTML(DOM)を表示させる

Rendering Elementsという項目でHTML(DOM)を表示させる方法を確認する reactjs.org <div id="test"></div> 上のように1行だけのdivタグがあった場合、これに対してDOMを追加する場合は、ReactDOMクラスのrenderメソッドを呼べばよい。 <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

Reactでstyle属性を直接表示(インライン表示)させる方法

Reactで、例えば、CSSのbackground-imageを動的に設定したい場合、JSXで文字列結合してしまうとエラーが発生してしまう。 // エラー class Hoge extends React.Component { constructor(props) { super(props); } render(){ return <div style="background-image:url(" + {this.props.imgURL} + ">Hello React</div> } } ReactDOM…

脱jQuery~JavaScriptに支配されないための真の思考法~ beforeメソッド

jQueryのbeforeメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').before('<div>before</div>'); // JavaScript var _div = document.createElement('div'); _div.innerText = 'before'; var _hoge = document.querySelect…

脱jQuery~JavaScriptに支配されないための真の思考法~ removeメソッド

jQueryのremoveメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').remove(); // JavaScript var _hoge = document.querySelector('#hoge'); _hoge.parentNode.removeChild(_hoge);

脱jQuery~JavaScriptに支配されないための真の思考法~ emptyメソッド

jQueryのemptyメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').empty(); // JavaScript document.querySelector('#hoge').textContent = '';

非jQuery依存のタギングしてくれるJavaScriptライブラリTaggle.js

JavaScriptでタギングを実装する場合、今まで、jQuery Tags Inputを使っていました。 xoxco.com 上のプラグインも便利なのですが、一点だけ欠点があり、それは、jQuery依存ということ。 jQueryに依存しない独立したプラグインを探したところTaggle.jsという…

ブラウザがinput type="date"とtype="time"に対応しているか調べる方法

ブラウザがinputタグのtype="date"に対応しているか、または、ブラウザが、inputタグのtype="time"に対応しているか調べる方法 var _test = document.createElement('input'); _test.type = 'date'; if(_test.type === 'text'){ // dateに対応していない時の…

Semantic UIのdropdownのvalueについて

Semantic UIのJSを使ってdropdownを作った時の話。 $('select.dropdown').dropdown({ }); 上で表示させたdropdownのvalueはどうすれば取得することができるのだろうか? 調査してみるとselectboxと同じ容量で取得することができました。 $('select').val()

脱jQuery~JavaScriptに支配されないための真の思考法~ removeClassメソッド

jQueryのremoveClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、removeClassメソッドを使って一つクラス名を設定する方法について。 // jQuery $('#hoge').removeClass('foo'); // JavaScript document.querySelector…

脱jQuery~JavaScriptに支配されないための真の思考法~ addClassメソッド

jQueryのaddClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、addClassメソッドを使って一つクラス名を設定する方法について。 // jQuery $('#hoge').addClass('foo'); // JavaScript document.querySelector('#hoge')…