2018-04-22時点。ちゃんとした経緯や定義など知らない。
経緯
ブラウザで動くものを作ろうとしたが、とりまく環境があまりに複雑怪奇だと気づいた。そこで、ざっくり調べてみることにした。
フロントエンド開発とは
ブラウザで表示されるサイトやWebアプリを開発すること。
対義語に バックエンド があるが、区別は曖昧。
Webシステム俯瞰
クライアント <--- 通信 ---> サーバ
言語
マシン | 言語 |
---|---|
クライアントサイド | HTML,CSS,JS |
サーバサイド | Node.js, Ruby, Python, PHP, Perl, ... |
ここでいうフロントエンドはクライアント側のこと。特にエンドユーザの目に触れる部分。
傾向
ブラウザ(クライアント側)での要求が大きくなってきた。なのにHTML,CSS,JSが貧弱すぎる。元からあった以下の問題が深刻になりつつある。
- 冗長
- DRYに書けない
- モジュール化できない
変更に弱く、バグを作り込みやすい。開発に時間がかかる。システム開発が破綻する。
現状
HTML,CSS,JSは過渡期。言語仕様が変更され続けている。いまだ機能不足。
メタ言語
各言語の問題を解決すべくメタ言語が乱立している。
元 | メタ言語 |
---|---|
HTML | pug, Haml, Slim, EJS, Handlebars, Mustache, ... |
CSS | SASS, SCSS, LESS, HSS, Stylus, PostCSS |
JS | Babel, TypeScript, PureScript, CoffieScript, Dart, ClojureScript, ... ※ |
だが、新たに手間が生じる。(コマンドの打鍵→完了待ち時間→動作確認、など一連の操作)
トランスパイラ
モジュールバンドラ
HTML,CSS,JSはファイル分割できない。保守性のあるコードにするためには分割したい。そこで、複数ファイルを単一ファイルとして作成する。
タスクランナ
トランスパイルやバンドルの工程を自動化するツール。
(だが、設定が面倒だったり、変化が激しくて対応に追われるらしい)
実装
役割 | 実装 |
---|---|
トランスパイラ | メタ言語 参照 |
モジュールバンドラ | webpack, browserify |
タスクランナ | glup, grunt |
実行環境
トランスパイラ、モジュールバンドラ、タスクランナ、が動作する実行環境を用意せねばならない。これが非常に大変そう。
上記が代表的。Node.jsならパッケージマネージャである npm が必要。概念や使い方を覚えることで、ようやくトランスパイラなどのツールをインストールすることができる。
共存
実行環境はバージョンによって大きく異なる。複数の異なるバージョンを共存させたいことが多々ある。そして、そのためのツールがある。
実行環境ごとに *env という名前のツールが乱立している。さらに、それらを管理するツール anyenv などというものまで。
OS
実行環境のインストールはOSごとにことなる。OSやそのバージョンによっては最新版が使えないなどもよくある。
Linuxなどではソースコードをダウンロードし、コンパイルすることになる。まずはコンパイルに必要なツールから用意せねばならない。
OSパッケージマネージャ
コンパイル用ツールはOSのパッケージマネージャでインストールすることになる。さまざまな実装があり、それぞれのコマンドを調べねばならない。
コンパイルエラー
コンパイルツール不足などでコンパイルエラーメッセージが出たとき、対処するには知識が必要。shellなどのコマンド、ファイルシステムの概念など。
所感
素人の私には非常にむずかしい。
- 情報が錯綜している
- 環境構築が大変
概念の把握、環境構築、運用、変化への対応……
特に環境構築の壁が高い。フロントエンド開発には環境構築が必要。ただでさえ日進月歩で情報が錯綜しているのに、OSに関する知識と技術まで必要。勉強あるのみだが、いったいいつになったらコードが書けるんだ? 投げ出してCodePenとかで遊びたくなる。