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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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ハマーか…

タイトルが長くなってしまった。 monacaのcordovaでニフクラ mbaasを使っている時の話。 Userクラスに登録されている各会員のAcl(パーミッション)をプログラムから変更したい場合どうすればいいのだろうか？ 実は、ドキュメントにもこの部分についてのプログ…

Reactに触りたくて、少し前にReactを始めるまでに必要になることを書いた。 jumbomonaca.hatenablog.com jsxないしbabelを書いた後、そのままではブラウザは解釈をしてくれないので、コンパイルする必要があります。 で、そのコンパイルはどうやって行えばい…

webpackのバージョンを新しく4にアップして、マニュアル通りにコマンドを打った。 npx webpack --config webpack.config.js そしたら警告が表示された。 WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'productio…

FirebaseのHostingについて調べた。 まず、最初にnpmを使ってFirebase CLIをすでにインストールしているものとする。 jumbomonaca.hatenablog.com そのままターミナルからFirebaseにログイン firebase login すると、匿名でエラーレポートしてもいいか尋ねら…

果たして、はてなブログでうまくディレクトリ構造を表現できるか謎だが、試してみる。 下のようなディレクトリ構成でtsファイルとjsファイルがあったとする。 hoge.js tsconfig.json _src | |-- app.ts _build app.tsは下のようなソースコードだったとする。…

使っていたtypescriptのバージョンが古かったこともあり、今まで下のような形でターミナルからコンパイルしていた。 # xxx.tsはtypescriptのファイル名 # ../_buildは出力先のディレクトリ tsc xxx.ts -w --removeComments --outDir ../_build 最近、typescr…