ビルド
ソースコードを実行可能な成果物に変換するプロセス
開発ツールCI/CD
ビルドとは
ビルド (Build) は、ソースコード (TypeScript, JSX) を実行可能な成果物 (JavaScript, HTML, CSS) に変換するプロセスである。トランスパイル、バンドル、最小化、型チェックを含む。
ビルドパイプライン
TypeScript → トランスパイル → JavaScript
JSX → トランスパイル → JavaScript
CSS Modules → バンドル → CSS
画像 → 最適化 → WebP
全体 → バンドル → チャンク分割 → 最小化 → 成果物
ビルドツール
| ツール | 特徴 | 用途 |
|---|---|---|
| Vite | 高速、ESM ベース | 開発サーバー + ビルド |
| esbuild | 超高速 (Go 製) | バンドル、トランスパイル |
| SWC | 超高速 (Rust 製) | トランスパイル |
| webpack | 豊富なプラグイン | レガシー、複雑な設定 |
| Turbopack | Rust 製、Next.js | Next.js の開発サーバー |
| tsc | TypeScript 公式 | 型チェック |
ビルドの最適化
| 最適化 | 効果 |
|---|---|
| Tree Shaking | 未使用コードの除去 |
| コード分割 | ルートごとにチャンクを分割 |
| 最小化 (Minify) | 変数名の短縮、空白の除去 |
| 圧縮 (gzip/Brotli) | ファイルサイズの削減 |
| ソースマップ | デバッグ用のマッピング |
package.json のスクリプト
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"typecheck": "tsc --noEmit",
"lint": "eslint .",
"test": "vitest"
}
}
SAM のビルド
sam build
# → .aws-sam/build/ に Lambda 関数のビルド成果物を生成
# → esbuild で TypeScript をトランスパイル + バンドル
ビルド時間の短縮
| 手法 | 効果 |
|---|---|
| esbuild / SWC | webpack の 10〜100 倍高速 |
| キャッシュ | 変更のないモジュールをスキップ |
| 並列ビルド | Turborepo でモノレポの並列ビルド |
| インクリメンタルビルド | 変更ファイルのみ再ビルド |
現場での応用を知るには関連書籍も役立つ。