JavaScriptのフロントエンドツールのエコシステムは変数と競争に満ちており、最高のものだけが生き残ります。
実運用で使われるコードは、開発で使われるコードとは異なります。 本番環境では、十分な速度で動作するパッケージのビルド、依存関係の管理、タスクの自動化、外部モジュールのロードなどを行う必要があります。開発コードを運用コードにする ツールは
フロントエンドのコードを「ビルド」する必要がある理由は、各ビルドステップとその重要性を見ることで説明できます。
フロントエンドのコード構築ステップ
フロントエンド・コードの構築には、以下の4つのステップがあります。
そうすることで、開発者は言語の最新かつ最もホットなアップデートや拡張機能を使用したり、ブラウザの互換性を維持したりすることができます。以下は JavaScript 使用例です。
// 配列マッピングにおける矢印関数の構文const double = [1, 2, 3].map((num) => num * 2);const double = [1, 2, 3].map(function(num) {return num * 2;
翻訳者
importやrequire文をすべて処理し、一致するJavaScriptのコードスニペット、パッケージ、ライブラリを見つけ、それらを適切なドメインに追加し、1つの大きなJavaScriptファイルにパッケージ化するプロセスです。人気のあるパッケージャーには Browserify、Webpack、Parcel などがあります。
下請け
const double = [1, 2, 3].map(function(num) {return num * 2;const foo = [ 0x1, 0x2, 0x3 ].map(function (c) { return c * 0x2; });
コンプレッサー
上記のすべてのステップが完了した後、互換性があり、パッケージ化され、圧縮/難読化されたファイルをどこかに置く必要があります。上記のステップの結果を、開発者が指定した場所に、通常はパッケージャを通して配置するのがこのプロセスです。
フロントエンドビルドツール
フロントエンドツールとビルドツールは、以下のカテゴリーに分けられます。
- パッケージ管理: NPM, Yarn
- 訳者：バベルなど。
- Packagers: Webpack, Parcel, Browserify
- 圧縮難読化: UglifyJS、Packer、Minify など。
JavaScriptのエコシステムには、以下のようなさまざまなビルドツールがあります：
パッケージング
Babel コマンドラインツールとして導入され、関連するビルドタスクを指定・設定するスクリプトのみを提供し、Bowerは パッケージマネージャとして、パッケージ管理のクライアントサイドアプローチを提供します。この2つとNPMは一緒に使われることが多く、ほとんどの自動化のニーズを満たしているように見えますが、Gruntの問題は、開発者がより複雑なタスクを設定する自由を提供しないことです。
GruntとBowerの未来： GruntとBowerはJavaScriptツールのエコシステムから撤退しますが、その代わりはあります。
Grunt と Bower
Grunt Gruntの1年半後にリリースされました。しかし、Gulpは誰にとっても自然で快適に感じられます。JavaScriptでビルドスクリプトを書くのは、JSONで書くよりもずっと自由です。関数を書いたり、その場で変数を作ったり、Gulpのビルドスクリプトのどこでも条件文を使ったりできますが、それが特に自然で快適だと言っているわけではなく、考えられる理由の1つに過ぎません。BrowserifyとGulpは一緒に動作し、BrowserifyはNPMパッケージをフロントエンドに直接取り込むことを可能にします。そして、フロントエンドとバックエンドのパッケージをパッケージマネージャで扱うこの方法こそが、より自然でより良く感じられるのです。
Gulpの将来： Gulpは、現在人気のあるビルドツールに匹敵するように改良されるかもしれませんが、それは完全にクリエイター次第です。
Gulp と Browserify
Bower 主にJavaScriptを扱うために作られましたが、適切なローダーが含まれていれば、HTML、CSS、イメージなどのフロントエンドリソースも変換できます。Webpackでは、Gulpのようなビルドスクリプトを記述し、 NPM/Yarn 経由で実行することもできます。
Webpackの未来: WebpackはJavaScriptツールのエコシステムで今最もホットなツールで、最近ではほとんどすべてのJavaScriptライブラリがReactとWebpackを使っています。
小包
Browserify 2018年に登場したウェブアプリケーションパッケージャーで、その開発者エクスペリエンスの高さが際立っています。Parcelはプロセッサのマルチコア機能を活用することで、設定ゼロで非常に高速なパッケージングパフォーマンスを実現できます。しかし、Parcelはまだ新星であり、その採用率は一部の大規模アプリケーションでは高くありません。対照的に、開発者は、その幅広いサポートとカスタマイズ可能性から、Webpackの使用を好みます。
Parcelの未来: Parcelはとても使いやすく、パッケージングやビルドにかかる時間を計算するとWebpackよりも速く、より良い開発者体験を提供します。Parcelがあまり採用されていない理由は、おそらくまだ比較的新しいからでしょう。フロントエンドビルドツールのエコシステムにおいて、Parcelの未来は非常に明るい。
Parcel
Rollup は JavaScript 用のモジュールパッケージャで、小さなコード片をより大きく複雑なライブラリやアプリケーションにコンパイルします。Rollup は一般に、JavaScript ライブラリ、特に少ないサードパーティライブラリをインポートして依存するライブラリをビルドするのに推奨されます。
Rollupの未来： Rollupはクールで、急速に採用されています。素晴らしい機能がたくさんあり、フロントエンドツールのエコシステムの不可欠な一部として、長い間存在するでしょう。
もっと詳しく
JavaScriptフロントエンドツールのエコシステムは変数と競争に満ちており、最高のものだけが生き残ります。近い将来、ビルドツールはより少ない設定、より簡単なカスタマイズ、より優れたスケーラビリティ、より優れたビルド速度を持つようになるでしょう。
フロントエンドのプロジェクトにどのようなビルドツールを使うかは、具体的なプロジェクトのニーズに基づいて決める必要があります。どのようなツールを選ぶのが最適かについては、ほとんどの場合、自分でトレードオフを決める必要があります。
詳細はこちらをご覧ください。
