JavaScriptビルドツールの歴史と進化

ミライトデザイン Advent Calendar 2024 5日目の記事になります。

4日目は もずます さんのモテるGit管理 (gh, ghq, git-cz, lazygit) 記事でした。

自分もGitツール好きでよくインストールして遊んだりしてます。特にlazygitは気に入ってよく使っています。
これで私もモテるように...なったかな？

今日はフロントエンドの話

自分はよくDocker, Laravel, Git周りの記事を書くことが多いですが、来年はフロントエンドにも力を入れたいなと思っています。
移り変わりが早く、昔はよくGulp使ってたのですが次々新しいツールが登場して完全に取り残されてしまっていました。時代に追いつくため今までどんなツールが作られて今は何のツールがトレンドなのか調べました。

概要

JavaScriptのビルドツールは、フロントエンド開発の進化に伴い、その目的や役割が大きく変化してきました。この記事では、ビルドツールの歴史を振り返りながら、それぞれの時代における代表的なツールや背景を解説します。

1. 初期の時代 (1995年〜2000年代前半)

背景

JavaScriptは1995年に登場し、初期は簡単なDOM操作やアニメーションのために利用されていました。
この頃は、JavaScriptファイルを手動でHTMLにスクリプトタグを書いて読み込むだけで、ビルドツールやライブラリの管理の必要はありませんでした。

課題

しかし、ファイル数が増えると、スクリプトの読み込み順や最適化が問題となり、手作業による管理が非効率で限界を迎えるようになります。
この課題は、後のタスクランナーやモジュールバンドラーの誕生へとつながります。

登場したツール

• jQuery (2006年登場)
  • JavaScriptの機能豊富なライブラリ
  • HTML ドキュメントのトラバーサルと操作、イベント処理、アニメーション、Ajax をシンプルに記述可能
  • 汎用性と拡張性を兼ね備えている

2. タスクランナーの時代 (2010年頃)

背景

2010年代初頭、JavaScript開発の規模や複雑さが増し、プロジェクトには以下のような課題が生じました。

課題

• 不要なデータや冗長なデータを削除してファイルを最適化(コードの最小化)
• CoffeeScriptやTypeScriptをJavaScriptに変換(トランスパイル)
• CSSや画像ファイルの圧縮
• 静的ファイルのコピーや移動

これらの作業を効率化するために登場したのがタスクランナーです。

登場したツール

• Grunt (2011年登場)
  • JavaScript初のメジャーなタスクランナー
  • JSON形式でタスクを定義し、数多くのプラグインを活用可能
• Gulp (2013年登場)
  • Gruntに次いで登場し、設定ファイルをJavaScriptコードとして記述可能
  • ストリーム処理を採用し、より高速なタスク実行が可能

Gruntは設定が冗長で、プラグイン数が多い反面、大規模プロジェクトでは管理が煩雑になりがちでした。
一方、Gulpは設定ファイルをJavaScriptで書けることから設定を柔軟に記述できます。

3. モジュールバンドラーの台頭 (2010年代中盤)

背景

AngularJS(2016年にAngularへ変更)やReactなどのフレームワークの普及に伴い、SPAが一般化し、JavaScriptコードが巨大化しました。
複数のモジュールを組み合わせた開発が一般的になると、モジュールバンドラーが、依存関係を解決し、効率的にバンドルを生成する役割を果たすようになりました。

登場したツール

• Browserify (2013年登場)
  • CommonJSモジュール（require）をブラウザで利用可能にした最初のツール
  • シンプルながら柔軟性が限定的で、拡張性に課題がありました
• Webpack (2014年登場)
  • JavaScriptの依存関係を解決し、1つのバンドルファイルにまとめるツール
  • プラグインやローダーを使えば、CSSや画像も処理可能
  • 初期は設定が難解でしたが、バージョンアップにより簡単なプロジェクトならほぼデフォルト設定で動作
• Rollup (2015年登場)
  • 未使用コードの除去(Tree-shaking) を採用し、軽量なライブラリやパッケージの作成に適したバンドラー

4. ビルドツールの進化と多機能化 (2010年代後半〜2024現在)

背景

タスクランナーとモジュールバンドラーの機能が一体化し、設定の簡略化や開発効率の向上を重視した次世代のビルドツールが登場しました。

登場したツール

• Parcel (2017年登場)
  • ゼロコンフィグのビルドツール
    • 例えばParcelでは、設定ファイルなしでJavaScriptファイルを指定するだけでビルドが完了する
  • デフォルトで高速かつ最適化されたバンドルを生成
• esbuild (2020年登場)
  • Golangで実装された超高速なビルドツール
  • 他のツール（ViteやParcel）の内部でも使用されることが多い
• Vite (2020年登場)
  • ES Modulesを活用し、超高速なホットリロードを実現
  • 開発サーバーとビルドツールを統合し、特にVue.jsやReactプロジェクトで人気

5. 新たな台頭...

• Bun (2023年登場)
  • Zigで構築されており、トランスパイルやバンドリング、実行速度が非常に高速
  • JavaScriptランタイム、モジュールバンドラー、開発サーバー、パッケージマネージャーを統合
    • bun dev や bun install などシンプルなCLIを提供
  • TypeScriptとJavaScriptのネイティブサポート
  • Node.jsとの互換性

Bunは、ランタイム、バンドラー、開発サーバーを1つのツールに統合し、シンプルなCLIでセットアップを簡単にすることで、従来のエコシステムに革新をもたらしました。

総評

大規模プロジェクトで依存関係が多い場合はWebpackを、
小規模な開発やモダンな開発体験を重視する場合はViteまたはBunを選択すると良いでしょう。

たとえば、ReactプロジェクトではViteを採用するとホットリロードの恩恵を受けられるため、開発がスムーズです。

フロントエンド周りは常に新しいサービスやツールが登場します。
今後はAIを活用したコード最適化や、開発プロセス全体を統合するツールが主流になる可能性があります。

プロジェクトの規模や要件に応じて適切なツールを選び、開発体験を最大化していきましょう！

明日の記事

6日目ミライトアドベントカレンダーは yukimasa さんのNotionの記事です！
お楽しみに！