概要
ビルドツール（Build Tool）とは、Webアプリを本番環境で動かせる形に自動変換・最適化するツールです。
一般的にnpm run buildなどで実行され、トランスパイル、圧縮、バンドル、成果物生成など、さまざまな処理をまとめて行います。
本記事では、
- ビルドツールの役割・一覧
- ビルド処理の種類
- CI/CD 含めた実務での活用例
という観点で整理してまとめます。
目次
ビルドツール一覧
| ツール名 | 主な用途 | 特徴 |
|---|---|---|
| Vite | フロント全般、React/Vue | 高速開発サーバー、軽量ビルド、設定が少ない |
| Webpack | 複雑な大規模開発 | 拡張性が高い、プラグインが豊富、設定が詳細 |
| Parcel | 小〜中規模 | 設定不要（ゼロコンフィグ）で動く |
| esbuild | 高速ビルド特化 | Go製、非常に高速なバンドル・トランスパイル |
| Rollup | ライブラリ開発 | モジュール最適化に優れる、軽量な成果物 |
| Babel | JavaScript変換専用 | 単体ではビルドせず、トランスパイル特化 |
※ Babel は単体ではビルドツールではなく トランスパイル専門 のため、他のツールと併用されることが多い。
ビルド処理一覧（カテゴリ別）
| カテゴリ | 主な処理 | 例 | 説明 |
|---|---|---|---|
| トランスパイル（Transpile） | TypeScript, JSX, Sass |
TS → JS, JSX → JS, SCSS → CSS
|
ブラウザが理解できる形式に変換 |
| バンドル（Bundle） | 複数の JS / CSS を結合 | index.js + util.js → bundle.js |
HTTP リクエスト削減 |
| 圧縮（Minify） | JS / CSS / 画像を軽量化 | コメント削除、変数名短縮 | 表示速度向上 |
| 最適化（Optimize） | Tree Shaking / Code Splitting | 未使用コード削除 | 不要な部分を除去 |
| 依存解決（Dependency Resolution） | npm packages |
node_modules 処理 |
ライブラリを実行可能に加工 |
| ハッシュ付与（Hashing） | JS / CSS ファイル名 | main.js → main.ab12cd.js |
キャッシュ更新対策 |
| 成果物生成（Artifact） |
dist/, build/ フォルダ出力 |
デプロイ対象 | サーバに置くだけで動く完成品 |
活用例
1. TypeScript + React をブラウザで動かす
npm run build
実行内容の例：
TypeScript → JavaScript へ変換
React JSX → JavaScript へ変換
コード圧縮・バンドル
dist/ フォルダへ成果物を生成
本番環境には dist/ だけをデプロイする。
2. CI/CD でデプロイ前にビルド実行
steps:
- run: npm ci
- run: npm run build # ← ここで成果物生成
- run: deploy dist/
- ソース全体ではなく 成果物のみをデプロイ
- テスト通過後にビルド → 本番へ反映
3. 画像・CSS の最適化（ページ高速化）
ビルドツールは以下の処理を自動で行うことが多い：
.min.js, .min.css 生成
画像圧縮
キャッシュ対策としてハッシュ付与
→ モバイル環境の読み込み速度改善につながる。
まとめ
| 観点 | 内容 |
|---|---|
| ビルドツールとは | 本番用に 変換・最適化・成果物生成 を行う自動処理ツール |
| ビルドの目的 | ブラウザで高速・安全に動く形へ加工する |
| 成果物生成とは | デプロイ可能な完成ファイル（dist/build）を出力すること |
| 実務での利用 | CI/CD、React/TS開発、画像・CSS最適化、キャッシュ戦略 |