Zenn
😀

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

2018/09/05に公開
HTML
JavaScript
frontend
tech

Abstract

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

Bootstrapping & Configration

  • Before
    • サーバを調達して、インフラエンジニアがウェブサーバを構築。
  • After
    • 選択肢1
      • Docker Hub で開発に適したイメージを選択。
      • カスタムが必要な場合はDockerfileを作成。
    • 選択肢2
      • Node.jsをインストール。

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

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

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

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

Scaffolding

  • 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行のコマンドで動作確認までできてしまう。

Package Management

  • Before
    • OSSをぐぐる。
    • OSSをダウンロードする。
    • OSSのバージョンを台帳管理する。
  • After
    • npm, bower等のPackage ManagerのサイトでOSSを検索。
    • npm, bowerのコマンドを実行し、OSSを取得。

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

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

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

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

Build

  • 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と文字列置換する）ことでコードを圧縮する。

Conclusion

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

Reference

Discussion