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

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に関するブログも書いています。 javatar.hatenablog.com 徐々に内容も増やしていく予定なのでJavaにご興味のある方は、是非、…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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