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')…

ReactでsetStateを呼び出した直後にその変数を参照しにいこうとすると更新が反映されていないケースがある。 例えば、componentDidMountメソッドでsetStateを呼び出して、stateの更新依頼をかけた後、すぐにcomponentDidMountメソッド内でそのstateを参照す…

Reactの公式サイトに記載があるのだが、デフォルトではReactはIE9、IE10、IE11には対応していない。 (IE8はどうした(笑)) facebook.github.io だが、windows7、windows8という古いOSを使っているユーザーの場合は、EdgeではなくIE11あたりを使っているはず。…

jQueryのattrメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、attrメソッドを使って一つ属性を設定する方法について。 // jQuery $('a').attr('href','https://yahoo.co.jp'); // JavaScript document.querySelector('a').…

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

jQueryのparentメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery var _$parent = $('#hoge').parent(); // JavaScript var _parentNode = document.querySelector('#hoge').parentNode; selectorを使う場合は、classList…

jQueryのscrollメソッドもjQueryのonメソッドに移行対象となっているメソッドなのだが、古いjQueryを使っている人も当然いるわけなので、scrollメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書きたい。 // jQuery $(window).scroll(fun…

Semantic UIのJSを使ってradioボタンを作った時の話。 $('.ui.radio.checkbox').checkbox({ }); この場合のvalueつまり、チェックがついているラジオボタンの値を取得したい時はどうすればいいのか調べた。 inputのradioと同じようにselectorを使ってvalメソ…

Semantic UIでCSSは、linkタグを使ってインクルードしている場合、semantic.jsだけをwebpackしたい場合がある。 Semantic UIのjsはjQueryも必要になるので、webpackにjQueryも含める必要がある。 jQueryはnpmで取り込んでrequire経由で呼び出せば問題はない…

前回、npmでfirebaseをインストールする方法を書いた。 jumbomonaca.hatenablog.com そこで今回は、インストールしたfirebaseをwebpackで一つにする方法を調査した。 app.js webpack.config.js ディレクトリ構造は、メインロジックを書いたapp.jsとwebpackの…

Firebase Authenticationを使って新規会員登録またはログインする手段はいくつかあるのだが、ログアウトする方法は、一個しかなく、firebase.auth().signOut()メソッドでログアウトすることができる。 firebase.auth().signOut().then(function() { // Sign-…

既に新規会員登録済みの場合、firebase.auth().signInWithEmailAndPasswordメソッドでメールアドレスとパスワードでログインすることができる。 var _mailaddress; var _password; firebase.auth().signInWithEmailAndPassword(_mailaddress, _password).cat…