Frontend

Node

npm

npm init

対話形式で package.json を作成する。
-y つけると初期設定で作成。
.npmrc で初期値を変更できる。

npm install

パッケージのインストール。
-g でグローバルにインストール。
--save で package.json の dependencies に追記。
--save-dev で package.json の devDependencies に追記。実行時に必要なものは --save ビルド時のみ必要なものは --save-dev。

Babel

ECMA Script 2015 以降のコードを ECMA Script 5 のコードに変換する。モダンな JavaScript のコードを書きつつレガシーなブラウザでも動かせる。プラグインで JSX の変換も行える。

Webpack

モジュールバンドラ。複数の JavaScript ファイルの依存関係を解決し、1つのファイルにまとめてくれる。また、loader という仕組みを使うことで、モジュールをバンドルする前に Babel を含むさまざまな変換処理を行ったり、HTML や CSS ファイルを扱ったりすることができる。

$ ./node_modules/.bin/webpack

webpack-dev-server

開発用サーバ。変換対象のファイルを監視して変更があったら自動で再変換してくれる。

$ ./node_modules/.bin/webpack-dev-server

PostCSS

CSS 変換ツール。SASS 代替。
プラグインを組み合わせることで様々な変換が可能。

サーバサイドレンダリング

• 初期表示速度の改善
• レガシークローラやページ解析への対応

初回リクエストをサーバサイドレンダリングして速度改善、以降はクライアントサイドレンダリングすることで SPA のメリットを享受。