いろいろな Web フロントエンドの技術
最近フロントエンドのあれこれに触ることが多い。フロントエンドといえば諸々のつらみとの戦いである。それらを解決するいろんな技術があるがいろいろありすぎてとっつきづらいので各技術が何を解決したいのかまとめてみた。
各技術の詳細は、それぞれ詳しい記事が世の中に溢れてるので省く。包括的にどんな技術があるのか、をみつめることをこの記事の価値におく。
- JavaScript フレームワーク
- JavaScript トランスパイル
- CSS トランスパイル
- テンプレートエンジン
- パッケージ管理
- モジュールバンドラー
- タスクランナー
(各技術は、それぞれ重複する部分もある;たとえばモジュールバンドラーである webpack はタスクランナー的な機能ももっている)
JavaScript フレームワーク
例
- Vue.js / AngularJS / React
何を解決するか
- JavaScript でビューを変更する / ビューの変更を受け取るときのつらみ
- ビューとロジックの分離
- ビューで変更があったらロジックが起動し、その結果を受けてビューが変更される、とかが書きやすくなる
JavaScript トランスパイル
例
- CoffeeScript / TypeScript / Babel
何を解決するか
- JavaScript の書きっぷりのつらみ
- 動的型付け言語である JavaScript に型を付けられたりする
==
を厳密に扱えたりする- 最新の ECMAScript の記法が使える
- ブラウザによって JavaScript の挙動が異なる問題も併せて。
CSS トランスパイル
例
- sass / less
何を解決するか
テンプレートエンジン
例
- Jade / Haml / Slim
- そのほかサーバーサイドの言語によっていろいろ
何を解決するか
- 静的な HTML を動的に生成したい問題
- そのほか boilerplate
- コピペで毎回書かなきゃいけないおまじない的なやつとか
<
>
はタイピングのコストが高いので避けようとしてるものが多い
パッケージ管理
例
- npm / bower / yarn
何を解決するか
- JavaScript のライブラリ管理
- 欲しいライブラリをわざわざダウンロードしたり、クライアントに CDN にアクセスさせたりするコスト
- ライブラリ間の依存性も解決できる
- このライブラリを使うためにはこのライブラリが必要で...とか、バージョンが新しくなって互換性がなくなって...とかの (yak shaving)http://blogos.com/article/65001/
モジュールバンドル
例
- webpack / browserify
何を解決するか
- JavaScript / CSS を使用するためには HTML でどのファイルを使用するか指定する必要がある
- 複数のファイルをまとめて
hogehoge.bundle.js
みたいなファイルにして、これさえ読み込めば OK、という体制にしてくれる - クライアントからのリクエストも減る
- 複数のファイルをまとめて
- JavaScript / CSS のサイズが大きいとクライアント側にダウンロードの負荷がかかる
- 改行とか無駄な記述をなくしてくれる (minify という)
タスクランナー
例
- gulp / Grunt
何を解決するか
- 上述してきたツール群の多くは、コマンドを叩かなきゃ機能しない
- たとえばファイルが保存されたら勝手にコマンドを起動する、とかの処理を記述できる