ジャンボモナカ

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

JavaScript

Vue.jsとVue Routerをwebpackにまとめる

Vue.jsとVue Routerをwebpackにまとめる方法についてまとめました。 まず、Vue.jsとwebpackのインストールについては、前回の記事を参考にしました。 jumbomonaca.hatenablog.com 次にnpmコマンドでVue Routerをインストール。 npm install vue-router 完了…

Google Apps ScriptでGoogle Spread Sheetの書式をクリアー

Google Apps ScriptでGoogle Spread Sheetの書式をクリアー(削除)したい場合は、clearFormatメソッドを使えば実現することができる。 let activeSpreadSheet = SpreadsheetApp.getActive(); activeSpreadSheet.getRange(1,1).clearFormat();

Vue.jsとwebpackとbabelを使う

フロントエンド界隈では、Vue.jsが大流行。 そこでVue.jsとクラスを使いたいのでbabelも採用し、それを最終的にwebpackを経由させてjsファイルを吐き出すということをやってみたい。 まずは、npmコマンドでVue.jsをインストール。 npm install vue 次に、web…

Google Apps ScriptでsetTimeoutが使えない件

Google Apps ScriptでsetTimeoutを使ったら何故かエラーになってしまった。 setTimeout(()=>{ hoge(); }, 1000); 調べてみるとsetTimetoutの代わりに、Utilities.sleepメソッドを推奨しているようです。 Utilities.sleep(1000); hoge();

Reactのrenderで改行を反映させたい

renderメソッドで表示させる際に、htmlタグがエスケープされた状態で表示されてしまう。 class Hoge extends React.Component { constructor(props) { this.state = { hoge: '<div>ssssss</div>' } } render(){ <div>{this.state.hoge}</div> } } 通常であれば問題はないのだが改行…

styleプロパティーでCSSの情報が取得できない件

外部ファイルに定義されているCSSの情報はどうやらstyleプロパティーで取得することはできないようだ。 #hoge { height: 44px; } //""がリターンされる。本来であれば44pxをリターンしてほしい console.log(document.querySelector('#hoge').style.height) …

taggleプラグインでaddメソッドを使った時のonTagAddメソッドの挙動について

taggleプラグインでaddメソッドを使った時にonTagAddメソッドが設定されている場合、どのような引数で呼ばれるのか気になったので調べてみた。 var Taggle = require("taggle"); var _taggle = new Taggle('hoge',{ onTagAdd: function(event, tag){ console…

npmとwebpackでqsを使う

jQueryを使わずにajaxを行う場合、いくつかの選択肢があり、その中の一つとしてaxiosがあります。 axiosでajaxを行う際に、注意点が一つあり、リクエスト時にパラメータをJSONとして送信してしまいapplication/x-www-form-urlencodedフォーマットとして送信…

Firebaseに最適な Node.jsのバージョンは8

確かうる覚えなのだが、FirebaseをNode.js経由で使う場合、Node.jsのバージョンは8がよかった記憶があるのだが、なんで10ではないのだろうと疑問に感じて調べた。 調べた結果、Cloud FunctionsのNode.jsがバージョン8に対応しており、10はベータなので、少し…

WebpackでMoment.jsを使う時の注意点

公式マニュアルには書いてあるのだが、何も設定せずに、Webpackを使うと標準のMoment.jsのコード量がとても大きいため、最終的に出力されるファイルも必然的に大きくなってしまう。 momentjs.com そこで不要なローカルタイムの設定を削除し、必要なタイムゾ…

IE11でforEachがエラーになってしまう現象について

document.querySelectorAllで複数のDOMを取得して、forEachでループさせようとするとIE11でエラーが発生する。 document.querySelectorAll('.hoge').forEach(function(currentValue){ }) そこで素直にfor文を使ってエラーを解消することにした。 var _hoge =…

Swiperをnpm経由で使い最後にwebpack

Swiperというレスポンシブ対応をしたスライダー(カルーセル)プラグインがある。 idangero.us jQueryプラグインとしても使えるし、jQueryに依存せず独立して使うことができるわけだが、今回、npm経由でインストールを行い、最後に、webpackする方法について調…

JSXでReact.Componentを宣言する時の注意点

Components and Props reactjs.org と JSX In DepthのUser-Defined Components Must Be Capitalized reactjs.org を読み返してびっくりしたことがあった。 React.Componentを表示する時、頭文字を大文字にしないといけないということだ。 どういうことか例を…

Reactでstyle属性を直接表示(インライン表示)させる方法

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~JavaScriptに支配されないための真の思考法~ beforeメソッド

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~JavaScriptに支配されないための真の思考法~ removeメソッド

jQueryのremoveメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').remove(); // JavaScript var _hoge = document.querySelector('#hoge'); _hoge.parentNode.removeChild(_hoge);

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

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

非jQuery依存のタギングしてくれるJavaScriptライブラリTaggle.js

JavaScriptでタギングを実装する場合、今まで、jQuery Tags Inputを使っていました。 xoxco.com 上のプラグインも便利なのですが、一点だけ欠点があり、それは、jQuery依存ということ。 jQueryに依存しない独立したプラグインを探したところTaggle.jsという…

ブラウザがinput type="date"とtype="time"に対応しているか調べる方法

ブラウザがinputタグのtype="date"に対応しているか、または、ブラウザが、inputタグのtype="time"に対応しているか調べる方法 var _test = document.createElement('input'); _test.type = 'date'; if(_test.type === 'text'){ // dateに対応していない時の…

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

jQueryのremoveClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、removeClassメソッドを使って一つクラス名を設定する方法について。 // jQuery $('#hoge').removeClass('foo'); // JavaScript document.querySelector…

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

jQueryのaddClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、addClassメソッドを使って一つクラス名を設定する方法について。 // jQuery $('#hoge').addClass('foo'); // JavaScript document.querySelector('#hoge')…

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

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

脱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…

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…