フロントエンドプロジェクトに欠かせないビルドツール・モジュールバンドラーまとめ

フロントエンドプロジェクトでは、外部ライブラリやフレームワークを使うのが当たり前になっています。フレームワークの中にはコードを変換したり、各種ライブラリをブラウザ向けに変換して利用します。

そうした変換処理、ビルド時に使われるのがビルドツールであり、モジュールバンドラーです。こうしたソフトウェアは年々トレンドが変化しており、新しいツールが続々と登場しています。

今回は過去から現在まで、登場してきたビルドツール・モジュールバンドラーについて紹介します。

タスクランナー・ビルドツール

gulp.js

タスクランナーの先駆者にあたるソフトウェアです（最初のリリースが2013年9月）。taskというメソッドの中で、実際に行いたいタスクを記述します。SassやLess、CoffeeScriptなどJavaScriptやCSSの代替言語の変換でよく用いられていました。

また、処理同士をpipeと記述して連結させることで、タスクの処理結果を別な処理に渡すと言ったこともできます。

gulp.js

Grunt

Gruntは最初のリリースが2016年4月で、gulp.jsよりも遅いのですが、最初タスクランナーと言えばGruntだったように記憶しています。Gruntfile.jsという設定ファイルにタスクを記述するのですが、複雑なプロジェクトになると設定ファイルの記述量が増えて管理が煩雑になってしまっていた覚えがあります。

Gruntもgulp.jsと同じようにJS/CSS/HTML代替言語のコンパイルや画像の変換、ファイルコピーなどに利用されていました。

Grunt: The JavaScript Task Runner

esbuild

もしwebpackの速度面でストレスを感じているならば使ってみたいのがesbuildです。Go製のソフトウェアで、とにかく高速です。TypeScriptにもデフォルトで対応していますが、型チェックは行ってくれないので注意が必要です。

コマンドの10倍近い速度で動作したり、tsconfig.jsonも利用できるのでwebpackやtscの代わりに使ってみるのも良さそうです。とはいえtsc

esbuild – An extremely fast bundler for the web

Vite

Viteは速度面を重視したビルドツールになります。依存関係の事前バンドルではesbuildを使っていたり、モジュールを使ってimportによるJavaScript配信を行っています。これによりコード修正に伴う再バンドル処理を避けています。

プロダクション向けにはビルドを行い、バンドルしています。

Vite | 次世代フロントエンドツール

Snowpack

SnowpackもViteに近いコンセプトのソフトウェアでした。2022年4月でアクティブなメンテナンスを停止しており、Viteを利用するようにお勧めされています。

Snowpack

モジュールバンドラー

webpack

webpackはタスクランナーではなく、モジュールバンドラーになります。フロントエンドプロジェクトで扱われる数多くのモジュール（ライブラリ）の依存性を解決し、パッケージングするソフトウェアになります。

ビルドツール全般に言えますが、依存性の解決に時間がかかるとコードを修正してから反映されるまで待たされることになります。webpackでは差分ビルドに対応し、大規模なフロントエンドプロジェクトでも高速に開発できるのが利点です。

webpack

Browserify

ブラウザ向けライブラリもnpmで配布されるようになった頃に、その依存関係を解決するのに使われていたのがBrowserifyです。BrowserifyはgulpやGruntなどと組み合わせて利用されることが多かったように思います。

CLIも用意されており、ちょっとしたライブラリであれば単体で依存解決したJavaScriptコード生成にも利用できます。

Browserify

Rollup

RollupはJavaScriptのモジュール依存関係を解決してくれるモジュールバンドラーです。コードをES6に変換するのが一つの特徴となっています。多くのバンドラーが古いブラウザ互換性を維持するためにES5に変換するのに対して、モダンなコードを出力してくれます。

面白い機能として、Node.js向けとブラウザ向けで別々なバンドルが生成できます。これによって片方の環境に依存するコードを削除でき、バンドルされるファイルサイズを軽減できます。

Rollup | Rollup

Parcel

Parcelはwebpackよりも高速に動作することを標榜するバンドラーです。マルチコアを活かすためにワーカープロセスを使っており、ファイルキャッシュによる高速化も行っています。

を使ってバンドルの分割も実現します。多くのHTML/JS/CSS変換に対して、プラグイン不要・設定不要で動作します。また、import

Parcel

まとめ

フロントエンド開発が長い方であれば、これらのツールを遍歴とともに使ってきたのではないでしょうか。最初はシンプルで便利だったはずが、徐々に動作が遅くなったり、複雑になって行き詰まった経験もあるはずです。

ビルドツールやモジュールバンドラーはフロントエンドプロジェクトに欠かせないツールなので、年々進化を遂げています。トレンドを学ぶことで、開発生産性も向上することでしょう。

役に立ったら、記事をシェアしてください