JavaScript
少し前に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のrenderメソッドを使ってdomを表示させようとしてもエラーが表示されてしまうケースがある。 エラーが発生するケースは、domがなく文字列だけ出力する場合のエラー class HelloMessage extends React.Component { render() { return ( Hello {this.pro…
前回、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…
少し前までXAMPPを使ってmacのローカルサーバーを立ち上げていました。 www.apachefriends.org 特段、不満があるわけでもないのですが、わざわざXAMPPを使って立ち上げてもなぁ〜もっと軽くローカルサーバーを立ち上げる方法はないのかなぁ〜と漠然と思って…
monacaでcordova-admob-proのリワード動画広告について。 github.com monacaでcordova-admob-proのリワード動画広告を表示したくて、以下のように自動再生モードで実装したところ動かなかった。 var admobid = { rewardVideo:'ca-app-pub-xxx' }; if(AdMob){…
本当に今さら感たっぷりなのですが、備忘録も兼ねて、Reactをはじめるまでに行ったことについて書いていきたい。 まずは、npmでBabelをインストール。 npm install babel-cli@6 npm install babel-preset-react-app@3 次にReactとReactDOMをインストール npm…
タイトル通りなのですが、 firebase.auth().createUserWithEmailAndPassword(email, password).then(function(){ }).catch(function(error) { }); という形でcreateUserWithEmailAndPasswordメソッドを実行してアカウントを作成したのにもかかわらず、F5を押…
Firebaseを使うにあたり通常であれば <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
複数のjsファイル(だけじゃ〜ないんだけど)を一つにまとめてくれる便利なツールであるwebpackのインストール方法について調査しました。 webpack.js.org ターミナルで以下のコマンドをコピペして実行 npm init -y npm install webpack webpack-cli --save-de…
昨日、Nodebrewのインストール方法について書きました。 jumbomonaca.hatenablog.com そこで今回は、よく使うコマンドをまとめました。 ローカルにインストールされているnodejsのバージョンを確認 nodebrew ls インストール可能なnodejsのバージョンを確認 …
昨日は jumbomonaca.hatenablog.com という形で、Homebrewのインストール方法について書きました。 今日は、Nodejsをバージョン管理を行うNodebrewのインストール方法について調べました。 ずばりターミナルで下のコマンドをコピペして実行 brew install nod…
今さら誰にも聞くことができない。 Homebrewのインストールってどうやってやるのだろうか？ brew.sh まずは、上のサイトにアクセス。 ターミナルで下のコマンドをコピペして実行。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebr…
monaca上でonsen uiとangularを使う場合、初期化はどうすればいいのだろうか？ angularはangularでcontrollerメソッドがあるので、その時点で、初期化だし、onsen uiはonsen uiで ons.ready(function() { }); という記述があるので果たしてどうしたことやら…
