モジュールバンドラって何？次世代Webpackが切り開くフロントエンド開発の新時代✨
本題に入る前に
この記事は「モジュールバンドラとは何か」を説明できるようになることを目的としているため、現在主流となっているモジュールバンドラの詳しい説明については触れておりません。
モジュールバンドラは知ってるけど何をしてるの？今後どうなるの？と思った方はぜひ最後まで読んでください！
モジュールバンドラって何？
そもそもモジュールというのは変数や関数をまとめたもの。簡単に言えば.jsファイルのことで、1つのモジュールは1つのJavaScriptファイルに対応する。
モジュールバンドラはjsファイルを一つにまとめること。ただまとめるだけでなく、依存関係を解決しながら、1つにまとめて実行できる形にしてくれる。
依存関係を解決するとは、モジュール間の依存関係（あるモジュールが他のモジュールの機能やデータに依存している状態）を正しく解決すること。
私はこの依存関係があまり理解できなかったので、依存関係の理解とともにモジュールバンドラが行ってくれることを見ていきます。
// モジュールB (math.js)
export function add(a, b) {
return a + b;
}
// モジュールA (appA.js)
import { add } from './math.js';
const result = add(2, 3);
console.log(result); // 5
// モジュールC (appC.js)
import { add } from './math.js';
const resultC = add(5, 10);
console.log(resultC); // 15
この場合、モジュールAとモジュールCはモジュールBのadd関数に依存していて、モジュールBがなければ正しく動作しません。依存関係以外にも次のようなこともできます。
依存の順序を解決
モジュールAがモジュールBに依存している場合、バンドラがモジュールBを先にロードする。
依存関係の最適化
モジュールAとモジュールCがどちらもモジュールBに依存している場合、バンドラはモジュールBを一度だけロードする。
このようにすることで、依存関係を最適化し、無駄な読み込みを防ぐことができる。
循環依存の管理
互いに依存しているモジュール同士（AがBに依存し、BがAに依存する場合）などの、複雑な依存関係もバンドラが適切に処理してくれる。
次に現在主流となっているモジュールバンドラ、ビルドツールについてみていきます。知っているよ！と言う方は飛ばして読んでいただいて大丈夫です。
Vite
Vite(ヴィート)とは「次世代フロントエンドツール」のことです。私はフロントエンドビルドツールと呼んでいます。
上記で解説したモジュールバンドラとしてだけではなく、開発サーバーやビルドパイプライン全体を管理するといったフロントエンドの開発全体を改善するためのビルドツールとして設計されています。
Viteの詳細については以下の記事が分かりやすかったです。
Webpack
JavaScriptアプリケーションのモジュールバンドラです。
主な役割は、複数のファイルやモジュールを1つのファイルにまとめて、依存関係を管理し、効率的にアプリケーションを動作させることです。
他のモジュールバンドラと比較した強みは「柔軟でカスタマイズ性高い、さまざまなモジュールシステムをサポートしている」と言った点が挙げられると思います。
しかし、フロントエンド開発の進化により、設定が複雑になっていき次世代Webpackの時代に移り変わってきています。
ViteとWebpackの比較についてはこちらの記事が分かりやすかったので掲載させていただきます。
他のモジュールバンドラ: webpack、Rollup、Parcel など..
モジュールシステム: CommonJS、AMD、ESM など..
Webpackが作られた経緯
初回リリースは 2014年2月19日
CommonJSやAMDのようなモジュール規格が広く使われていましたが、これらの規格は標準化されておらず、ブラウザでの利用が複雑でした。
ES2015のモジュール概念の導入を見越してリリースされたため、2015年以前からリリースされています。
ES2015（ES6）より導入されたモジュールの概念を使い開発したいという思いから生まれました。
約10年前にリリースされ今もWeb開発を支えていると考えると凄いなーと感じます。
現在(9/16執筆)のモジュールバンドラの流行と今後
https://npmtrends.com/parcel-vs-rollup-vs-webpack
npmtrendsで見てみると、Viteで採用されているモジュールバンドラのRollupがWebpackを抜かす勢いで伸びてきています。State of JavaScript 2023の結果を見てみても、明らかにWebPackからViteの時代になってきているのが分かります。
それに加え、今後確実に普及するであろうTurbopackについても注目しており、ViteとTurbopackが次世代のWebpackとして使われていくのかも知れません。…というかもう使われているのか？
まとめ
・モジュールバンドラとは依存関係を自動的に解決し、1つのファイルにまとめてくれるツール
・Webpackは今もWeb開発を支えているが、Vite・Turbopackを中心とした次世代Webpackの時代になっていくと思われる
最後に
今回初めてブログ記事を執筆しましたが、調べていく内に記事の方向性が途中で変わってしまったり、深掘りするところそこだったのか？と感じる部分がありました。今後はそのブログ記事で伝えたい内容を明確にし、情報の正確性を意識したいと考えております。
次回以降の記事は今回出てきたTurbopackについて詳しくみていく記事と現在私が取り組んでいるgithubに毎日日報をあげる生活をしておすすめできるポイント、成長したことについての記事をあげたいと考えています。
最後まで読んでいただきありがとうございました。
参考記事
Discussion