ジャンボモナカ

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

ReactのsetStateでstateが即時反映されない件

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

今さら人に聞けないReactをIE11に対応する方法

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

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

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

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

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

脱jQuery~JavaScriptに支配されないための真の思考法~ parent([selector])メソッド

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

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

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

Semantic UIのradioボタンのvalueについて

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

webpackでSemantic UIの jsを使う

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

今さら人に聞けないwebpackでFirebaseを取り込む

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

今さら人に聞けないFirebase Authenticationを使ってログアウトする方法

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

今さら人に聞けないFirebase Authenticationを使ってログインする方法(メールアドレスとパスワード編)

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

今さら人に聞けないFirebase Authenticationを使って新規会員登録する方法(メールアドレスとパスワード編)

Firebase AuthenticationのJavaScript SDKで新規会員登録する方法を調べた。 Twitter、Facebook、Googleの各種アカウントを使ってログインすることはできるのはもちろん、メールアドレスとパスワードを使って新規会員登録することもできる。 firebase.auth()…

React.Fragmentという最終兵器(またはリーサル・ウェポン)

少し前にReactでrenderを使う時に注意点について書いた。 jumbomonaca.hatenablog.com renderメソッドを使う場合は、domで囲むか、false、nullまたは文字列でないとbabelでコンパイルする時にエラーを出してしまう。 例えば、エラーのパターンとして、dom同…

脱jQuery ネイティブJavaScript(Vanilla JS)置換対応リスト

jQueryではなくネイティブJavaScript(Vanilla JS)に置き換えた場合の対応リスト なぜjQueryではなく素のJavaScriptで実装をするのか? Selector readyメソッド findメソッド clickメソッド resizeメソッド scrollメソッド parentメソッド appendメソッド att…

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

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

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

// jQuery jQuery(function(){ }); jQuery(document).ready(function() { } // JavaScript document.addEventListener('DOMContentLoaded', function() { });

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

すでに移行対象となっているメソッドだが、古いjQueryを使っているケースもあるのでネイティブJavaScipt(Vanilla JSまたは素のJavaScript)で実装する方法について書く。 // jQuery $('a').click(function(e){ }); // jQuery $('a').on('click', function(e){…

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

Selectorの書いたので、今日は、jQueryのfineメソッドについて書く。 // jQuery var _$foo = $('#hoge').find('.foo'); // JavaScript var _foo = document.querySelectorAll('#hoge')[0].querySelectorAll('.foo'); // jQuery var _$foo = $('.hoge').find(…

脱jQuery~JavaScriptに支配されないための真の思考法~ Selector

まずは、jQueryでSelectorを使ってdomにアクセスするのだが、それを普通のネイティブのJavaScriptの場合について書く。 // jQuery var _$hoge = $('#hoge'); // JavaScript var _hoge = document.querySelectorAll('#hoge'); // jQuery var _$hoge = $('.hog…

脱jQuery~JavaScriptに支配されないための真の思考法~

少し前に話題になった「脱○畜サ○ン」を文字って、「脱jQuery~JavaScriptに支配されないための真の思考法~」というタイトルで、元々jQueryで書いていたコードをあえて使わずに普通のJavaScript(別名VanillaJS)の場合をリスト形式で紹介する。 そもそも何故…

今さら人に聞けないReactでajaxを実行するタイミング

Reactを選択したからといってajaxを実行しないわけではない。 当然、Reactの時だってajaxを使う。 (正確にはHTTPリクエストなのだが) ただ問題は、いつ使えばいいのだろうか? 公式マニュアルで確認するとcomponentDidMountメソッドのタイミングで実行してく…

FirebaseのCloud FirestoreのTimestampについて

タイトル通りなのだが、FirebaseのCloud Firestoreを使う時、Timestamp型のデータを登録する時にどうすればいいのだろうか? new Date().getTime() Dateをインスタンス化させてgetTimeメソッドを使えばいいのかなと思っていた。 が、調べてみると、firebase.…

Reactで直接propsを書き換えてはいけない件

ついつい忘れてしまいそうになるので、記事化 公式マニュアルにもある通り、propsを直接書き換えてはいけない! reactjs.org

Reactでdomを表示させる時の注意点

Reactのrenderメソッドを使ってdomを表示させようとしてもエラーが表示されてしまうケースがある。 エラーが発生するケースは、domがなく文字列だけ出力する場合のエラー class HelloMessage extends React.Component { render() { return ( Hello {this.pro…

Reactのrenderメソッドで何もdomを表示させたくない場合

Reactで書いた時に、class宣言をして、renderメソッドが呼ばれます。 class Helloworld extends React.Component { render() { return <div>Hello React</div> } } renderメソッドが実行される時に、あえて何もdomを出力、生成させたくない場合があります。 そんな時は…

今さら人に聞けないReactをインポートする方法について

前回、Reactを始めるにあたっての準備について書いた。 jumbomonaca.hatenablog.com 今日は、npmでインストールしたReactをjs(またはjsx)が使えるようになる方法について書きたい。 npmでReactをインストールしただけだとjsの中にReactを書いてもエラーが発…

今さら人に聞けないwebpackでmode設定をわけたい

前回、npx webpackコマンドで警告が出た際に、modeパラメータでproductionを設定して警告を回避した。 jumbomonaca.hatenablog.com modeパラメータはproduction以外にもdevelopmentがあり、webpack.config.jsで毎回書き分けるのが、正直めんどくさい。 そこ…

今さら人に聞けないピュアJavaScriptにおけるe.preventDefaultってどうやって実装するの?

タイトルが長くなってしまった。 普通のJavaScript、あるいは、ピュアJavaScript、ひょっとしたらバニラJS(英語では、Vanilla JS )と最近では呼ばれているかもしれない。 jQueryでonメソッドを使ってイベントをバインドした際に、e.preventDefault()はよく使…

Babel-CLIで脆弱性

babel-cli@6.26.0でnpm auditをすると脆弱性が表示される。 npm audit === npm audit security report === ┌──────────────────────────────────────────────────────────────────────────────┐ │ Manual Review │ │ Some vulnerabilities require your atte…

スワイプ操作による音声再生

スマホでスワイプ操作を検知し、かつ、スワイプ操作で音声を再生させたい。 まず前提として、JavaScriptではスワイプジェスチャーのイベントがない。 スワイプを検知してくれるHammerjsを使う。 hammerjs.github.io 余談だがHammerという名前は、MCハマーか…