やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

フロントエンド開発環境について調べてみた

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とかで遊びたくなる。