ジャンボモナカ

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

JavaScript

脱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でdomを表示させる時の注意点

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

今さら人に聞けない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ハマーか…

monacaのcordovaでニフクラ mbaasのUser Aclの権限設定

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

今さら人には聞けないbabelをコンパイルする方法

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

npx webpackコマンドで警告が表示されてしまう件

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するまで

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

typescriptのmoduleインポートとtsconfig.jsonの設定について

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

今さら聞けないtypescriptのtsconfig.jsonについて

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

今さら人に聞けないnpmのhttp-serverを使ってサーバーを立ち上げる

少し前までXAMPPを使ってmacのローカルサーバーを立ち上げていました。 www.apachefriends.org 特段、不満があるわけでもないのですが、わざわざXAMPPを使って立ち上げてもなぁ〜もっと軽くローカルサーバーを立ち上げる方法はないのかなぁ〜と漠然と思って…

monacaでcordova-admob-proのリワード動画広告を導入する際に躓いたこと

monacaでcordova-admob-proのリワード動画広告について。 github.com monacaでcordova-admob-proのリワード動画広告を表示したくて、以下のように自動再生モードで実装したところ動かなかった。 var admobid = { rewardVideo:'ca-app-pub-xxx' }; if(AdMob){…

今さら人に聞けないReactをはじめるまでの準備

本当に今さら感たっぷりなのですが、備忘録も兼ねて、Reactをはじめるまでに行ったことについて書いていきたい。 まずは、npmでBabelをインストール。 npm install babel-cli@6 npm install babel-preset-react-app@3 次にReactとReactDOMをインストール npm…

今さら人に聞けないFirebaseでfirebase.auth().currentUserが常にnullを返してしまう現象について

タイトル通りなのですが、 firebase.auth().createUserWithEmailAndPassword(email, password).then(function(){ }).catch(function(error) { }); という形でcreateUserWithEmailAndPasswordメソッドを実行してアカウントを作成したのにもかかわらず、F5を押…

今さら人に聞けないnpmでFirebaseをインストールする方法

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>

今さら人に聞けないwebpackのインストール方法について

複数のjsファイル(だけじゃ〜ないんだけど)を一つにまとめてくれる便利なツールであるwebpackのインストール方法について調査しました。 webpack.js.org ターミナルで以下のコマンドをコピペして実行 npm init -y npm install webpack webpack-cli --save-de…

今さら人に聞けないNodebrewのコマンド一覧

昨日、Nodebrewのインストール方法について書きました。 jumbomonaca.hatenablog.com そこで今回は、よく使うコマンドをまとめました。 ローカルにインストールされているnodejsのバージョンを確認 nodebrew ls インストール可能なnodejsのバージョンを確認 …

今さら人に聞けないNodebrewのインストール方法

昨日は jumbomonaca.hatenablog.com という形で、Homebrewのインストール方法について書きました。 今日は、Nodejsをバージョン管理を行うNodebrewのインストール方法について調べました。 ずばりターミナルで下のコマンドをコピペして実行 brew install nod…

今さら人に聞けないHomebrewのインストール方法

今さら誰にも聞くことができない。 Homebrewのインストールってどうやってやるのだろうか? brew.sh まずは、上のサイトにアクセス。 ターミナルで下のコマンドをコピペして実行。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebr…

monacaでonsenとangularを使った場合の初期化について

monaca上でonsen uiとangularを使う場合、初期化はどうすればいいのだろうか? angularはangularでcontrollerメソッドがあるので、その時点で、初期化だし、onsen uiはonsen uiで ons.ready(function() { }); という記述があるので果たしてどうしたことやら…

今さら人に聞けないmonacaのangularでajax通信を行う方法

monacaのangularで実装するにあたりajaxだけjQueryというのもなんだか変な気がする。 そこでangularでHTTP通信を行うことができないか調査をしてみた。 いつも通りangularのリファレンスに表示されているAPI一覧を眺めていて、$httpというのがあったので試し…

今さら人に聞けないmonacaのangularでのngIfについて

ある特定の条件ではdomを表示し、それ以外の場合は非表示みたいなことをmonacaのangularで実装するにはどうすればいいのか調べました。 APIリファレンスに表示されているメニューをざーっと見たところngifというのが目についたのでこれかなと思いさっそく試…

今さら人に聞けないmonacaのangularでのコントローラー間でパラメータを受け渡すには

monacaのangularでプログラムを組んでいると、コントローラーは1つではなく複数になる時が多々あります。 <ons-page ng-controller="MainPageController"> <ons-button ng-click="notify()">Run</ons-button> </ons-page> <ons-dialog var="dialog" ng-controller="DialogController"> <div style="text-align: center; padding: 10px;"> <p> This is a dialog. </p> <…</div></ons-dialog>

今さら人に聞けないmonacaのangular.elementについて

monacaでnendを実装するに当たりいくつかのパターンがあり、そのうちの一つにOnsenUIを使ってかつAngularJSを使用しない場合についてのソースコードがありました。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> </meta></meta></head></html>

monacaのangularでのngIncludeについて

monacaのangularでngIncludeという外部ファイルをインクルードをしてくれるAPIが存在する。 例えば、hoge.htmlというインクルードされるファイルが下のようになっていたとする。 <p>hello angular</p> それに対して呼び出し元を下のように実装する。 <html ng-app="mainApp"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </meta></head></html>