いろいろな Web フロントエンドの技術

最近フロントエンドのあれこれに触ることが多い。フロントエンドといえば諸々のつらみとの戦いである。それらを解決するいろんな技術があるがいろいろありすぎてとっつきづらいので各技術が何を解決したいのかまとめてみた。

各技術の詳細は、それぞれ詳しい記事が世の中に溢れてるので省く。包括的にどんな技術があるのか、をみつめることをこの記事の価値におく。

(各技術は、それぞれ重複する部分もある;たとえばモジュールバンドラーである webpack はタスクランナー的な機能ももっている)


JavaScript フレームワーク

  • Vue.js / AngularJS / React

何を解決するか

  • JavaScript でビューを変更する / ビューの変更を受け取るときのつらみ
    • ビューとロジックの分離
    • ビューで変更があったらロジックが起動し、その結果を受けてビューが変更される、とかが書きやすくなる

JavaScript トランスパイル

何を解決するか

  • JavaScript の書きっぷりのつらみ
    • 動的型付け言語である JavaScript に型を付けられたりする
    • == を厳密に扱えたりする
    • 最新の ECMAScript の記法が使える
      • ブラウザによって JavaScript の挙動が異なる問題も併せて。

CSS トランスパイル

  • sass / less

何を解決するか

  • CSS のつらみ
    • 子孫セレクタを使わず、ネストすれば子孫関係が表現できる
    • 変数が使える
    • 演算ができる

テンプレートエンジン

  • Jade / Haml / Slim
  • そのほかサーバーサイドの言語によっていろいろ

何を解決するか

  • 静的な ​HTML を動的に生成したい問題
  • そのほか boilerplate
    • コピペで毎回書かなきゃいけないおまじない的なやつとか
    • < > はタイピングのコストが高いので避けようとしてるものが多い

パッケージ管理

  • npm / bower / yarn

何を解決するか

  • JavaScript のライブラリ管理
    • 欲しいライブラリをわざわざダウンロードしたり、クライアントに CDN にアクセスさせたりするコスト
    • ライブラリ間の依存性も解決できる

モジュールバンドル

  • webpack / browserify

何を解決するか

  • JavaScript / CSS を使用するためには ​HTML でどのファイルを使用するか指定する必要がある
    • 複数のファイルをまとめて hogehoge.bundle.js みたいなファイルにして、これさえ読み込めば OK、という体制にしてくれる
    • クライアントからのリクエストも減る
  • JavaScript / CSS のサイズが大きいとクライアント側にダウンロードの負荷がかかる
    • 改行とか無駄な記述をなくしてくれる (minify という)

スクランナー

  • gulp / Grunt

何を解決するか

  • 上述してきたツール群の多くは、コマンドを叩かなきゃ機能しない
    • たとえばファイルが保存されたら勝手にコマンドを起動する、とかの処理を記述できる