この記事は、 KENTEM TechBlog アドベントカレンダー2025 16日目、12月16日の記事です。

こんにちは、フロントエンド開発のY.O.です。

フロントエンドの業務に携わるようになって4年目になりますが、なんとなくの理解で日々の開発をやり過ごしているものの一つにビルドツールがあります。フロントエンドのビルドツールは種類がたくさんあり、複雑で混乱しがちですよね。

そこで今回は私の認識の整理や備忘録も兼ねてフロントエンドのビルドツールについて書かせていただきます。正直この話は類似のもっと良くまとまった記事がたくさんあり、内容もほぼほぼ被っています。自分の理解のために書くので、それでも良い方はお付き合いください。

ビルドツールがなぜ必要か

昔々のWebは「HTML + CSS + JavaScript をそのままブラウザに送れば動く」シンプルな仕組みでした。

しかしフロントエンドが進化するにつれ、次のような課題が生まれました。

JavaScriptの巨大化

現代のWebアプリはSPAやSSRが一般的になり、それを実現するために依存関係が爆発的に増えています。

React本体
UIライブラリ
状態管理
ユーティリティ
日付ライブラリ
アイコンセット

これらをそのままブラウザで読み込むと通信コストが大きく、ページが重くなるという問題が発生します。

そこでビルドツールは主に以下を行い、JavaScriptを軽量化します。

フロントエンドは現在、素のJavaScriptだけで書かれることは少なくなってきています。

しかし、ブラウザはこれらを直接読み込めませんので、ブラウザが理解できる形に変換する必要があります。これをトランスパイルと呼びます。

JavaScript には歴史的経緯から複数のモジュール形式が存在します。

ビルドツールはこの差異を吸収し、統合されたコードを生成します。

現代の高速化、最適化テクニックは非常に複雑です。

これらを手でやるのはほぼ不可能なので、ビルドツールが自動で行います。

ビルドツールは「開発サーバー」として動作するものもあります。

現代フロントエンドでは開発DX = 生産性なので、ビルドツールが必須になっています。

今のフロントは、もはや「フロントだけ」ではありません。

クライアント用とサーバー用のビルドを分離し最適化する必要があり、ビルドツールが欠かせなくなっています。

昔の Web → 生JavaScriptでOK
今の Web → TypeScript / JSX / 数百の依存 / 最適化 / 画像変換 / SSR…

これらを処理するために、ビルドツールは必須のものとなりました。

ビルドツールの主な機能は以下の通りです。

簡単に各ビルドツールの特徴を比較した表を以下に示します。まだあるかとは思いますが、主要なものは網羅しているかと思います。

ツール	HMR	開発サーバー	最適化（minify, tree-shake等）	バンドル	トランスパイル / コンパイル
Vite	✔️（esbuild + HMR最適化）	✔️	✔️（esbuild / Rollup）	✔️（本番はRollup）	✔️（esbuild / SWC / babel）
Webpack	✔️	✔️	✔️（Terser, tree-shake）	✔️（主用途）	✔️（babel 等）
Rollup	△（プラグイン）	❌（基本はビルドのみ）	✔️（tree-shakeが強力）	✔️	△（babel / SWC プラグイン）
esbuild	△（開発サーバーはあるが簡易）	✔️（簡易 dev server）	✔️（高速 minify / tree-shake）	✔️	✔️（TS/JSをGoで高速変換）
SWC	❌	❌	△（minify あり）	❌	✔️（Rust製超高速トランスパイル）
Turbopack（Next.js 系）	✔️（高速HMR）	✔️（Next.js dev server）	✔️	✔️	✔️（Rust製）
Rspack	✔️	✔️	✔️	✔️（Webpack互換）	✔️（Rust製）
Parcel	✔️	✔️	✔️（自動最適化）	✔️（no-config）	✔️
Snowpack（Viteの前身）	✔️	✔️	△（プラグイン）	△（バンドルは外部ツール）	✔️
Rome（現 ReScript/Biome 方向へ分裂）	❌	❌	❌（最適化は開発中段階）	❌	✔️（将来）
Browserify	❌	❌	△	✔️	△
Metro（React Native）	✔️	✔️	✔️	✔️（RN用）	✔️（babel）