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

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

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

scss、css共にコーディングする時に、ベンダープレフィックスをつけるのが正直めんどくさい。 もっと手軽に解決する方法はないのか探していたら、mixinで処理する方法を発見した。 css-tricks.com 上で紹介されているmixinでもいいのだが、もっとコンパクト…

今さらwebpackを使ってVue.jsを初めてみた。 まずは、npm経由でVue.jsをインストール npm install vue importを使ってVueをインクルードさせた上で、JavaScriptの実装をする。 import Vue from 'vue'; var app = new Vue({ el: '#app', data: { message: 'He…

React.Componentのrenderメソッドを使ってDOMを表示する時がある。 class HelloMessage extends React.Component { constructor(props) { super(props); } render() { return <div>Hello React</div> } } ReactDOM.render( <HelloMessage />, document.getElementById('test') ); ここで</hellomessage>…

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

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

Rendering Elementsという項目でHTML(DOM)を表示させる方法を確認する reactjs.org <div id="test"></div> 上のように1行だけのdivタグがあった場合、これに対してDOMを追加する場合は、ReactDOMクラスのrenderメソッドを呼べばよい。 <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>