More than 5 years have passed since last update.

イマドキのフロントエンド開発のまとめ

Last updated at 2018-09-05Posted at 2018-09-05

Abstract

昨今のフロントエンドの変化は著しく、畑違いの人に全く理解されない・・・。「htmlのscriptタグにJavaScript書くだけでしょ」的な扱いを受けることが少なくない。そこでここでは、イマドキのフロントエンド開発の流れをBefore/After形式でまとめてみた。

従来は開発のたびにインフラエンジニアによるサーバ構築が必要だった。

しかし、仮想マシンのツールのDockerとそのDockerのイメージを共有するウェブサイトDocker Hubが普及したことにより、サーバ構築は不要となった。

Docker Hubでは主要なほとんどの開発環境が容易に調達でき、せいぜい100Line程度のDockerfileで多くのカスタマイズが可能である。

あるいは、JavaScript実行環境のNode.jsで開発する選択肢もある。Node.jsはWindows上にもインストールできる。

Before
- HTML, JavaScript及びCSSのディレクトリ構成を決める。
- webページのテンプレートを作る。
- 動作確認する。
After
- Yeoman のサイトで開発に適した generator を選択。
- Yeoman のコマンドでwebページのテンプレートを自動生成。
- grunt又はgulp のコマンドでwebページを起動し動作確認。

従来は、コーディングを始める前に、ディレクトリ構成を決め、OSSをダウンロードしてwebページの動作確認をするまでに時間を要していた。HTMLに書くJavaScriptのパスを間違える奴がいたりして、うまく動かないことも・・・。

今ではScaffolding（＝足場を作る）ツールのYeomanが、わずか1行のコマンドでよくあるWebアプリケーションのテンプレートを自動で生成してくれる。

このテンプレートは、後述するTask Runnerのgrunt又はgulpのわずか1行のコマンドで動作確認できる。

つまり、たかが2行のコマンドで動作確認までできてしまう。

従来は、OSSをぐぐって、ダウンロードして、バージョン管理台帳を記入していた。これが実に面倒。

今では、npm, bowerといったPackage Managerがこの作業を代行してくれる。

代表的なフロントエンドのOSSはいずれかのPackage Managerで提供されており、わずか1行のコマンドでダウンロード可能である。また、各Package Managerはウェブサイトがあり、OSSを検索することも容易である。

コマンドをダウンロードする際に、OSSのバージョン情報などはpackage.json, bower.jsonといったJSONファイルに記録される。

Before
- JavaScriptでコーディング。
After
- JavaScript又はTypeScript,CoffeeScriptでコーディング。
- grunt, gulpでTranspileしてMinify。

従来は開発言語の選択肢はJavaScript一択だったが、今ではTypeScriptやCoffeeScriptなどのJavaScriptを自動生成できる言語も選択肢の一つである。これらの言語はJavaScriptより言語上の機能が充実している。

作成したコードはgrunt, gulpといったTaskRunnerを介して、TranspileしてMinifyする。

Transpileとはある言語から同等の言語に変換するコンパイルのこと。フロントエンドでは特にJavaScriptの自動生成を指す。

MinifyとはJavaScriptのファイルを連結し、コードを圧縮すること。JavaScriptのファイルサイズとファイル数はクライアントのWebページの読み込み速度に直結するので死活問題。

Minifyでは、ファイルを連結し、変数名や関数名を短くする（例えばmyfunctionをmと文字列置換する）ことでコードを圧縮する。

昔は人手と時間をかけていた作業がたかが数行のコマンドで実現できる！便利！