まず結論
ビルドとは、開発中のファイルを、ブラウザやサーバに公開しやすい形へ変換する作業です。
開発中は、人間が読みやすい形でファイルを分けます。TypeScript、Astro、React、CSS、画像、設定ファイルなどが混ざっています。しかし公開時には、ブラウザが読み込めるHTML、CSS、JavaScript、画像に整理する必要があります。
この整理を自動で行うのがビルドです。
ビルド前とビルド後
開発中の構成は、たとえば次のようになります。
src/
pages/
components/
styles/
public/
package.json
ビルド後は、公開用のフォルダにHTMLやCSSなどが出力されます。
dist/
index.html
_astro/
index.xxxxx.css
index.xxxxx.js
images/
この dist のようなフォルダを、Cloudflare Pages、Netlify、Vercel、一般的なWebサーバなどに置くと、サイトとして表示できます。
ビルドで起きること
ビルドでは、プロジェクトによって次のような処理が行われます。
| 処理 | 何をするか |
|---|---|
| HTML生成 | ページのHTMLを作る |
| CSS生成 | Tailwindなどから必要なCSSを作る |
| JavaScript変換 | 新しい書き方やTypeScriptをブラウザ向けにする |
| バンドル | 複数ファイルを読み込みやすい単位にまとめる |
| 最小化 | 空白やコメントを削って軽くする |
| 画像参照整理 | 画像パスを公開用に整える |
つまりビルドは、単なるコピーではありません。人間が書いた開発用の形から、公開に向いた形へ変える工程です。
なぜ開発中のファイルをそのまま置かないのか
ブラウザは、TypeScriptやAstroコンポーネントをそのまま理解できません。ブラウザが基本的に理解するのは、HTML、CSS、JavaScriptです。
また、開発中はファイルが細かく分かれています。そのまま大量に読み込むと、読み込み回数が増えたり、不要なコードまで配信されたりします。
ビルドすることで、次のような利点があります。
- ブラウザが読める形式になる
- 不要なコードを減らせる
- CSSやJSを軽くできる
- 公開用フォルダが明確になる
- 本番環境で同じ形を再現しやすくなる
build コマンドは何をしているか
多くのプロジェクトでは、package.json にビルド用のコマンドがあります。
{
"scripts": {
"build": "astro build"
}
}
この場合、次のコマンドでビルドします。
npm run build
npm run build は、package.json の scripts.build に書かれた処理を実行するだけです。実際に何をするかは、Astro、Next.js、Viteなど、使っているツールによって変わります。
ビルドエラーとは
ビルド中に問題が見つかると、エラーで止まります。
よくある原因:
- import先のファイルが存在しない
- TypeScriptの型が合わない
- 画像パスが間違っている
- Markdownのfrontmatterが壊れている
- Node.jsのバージョンが合わない
開発サーバでは見えていても、ビルドで落ちることがあります。本番公開前は必ずビルドを通す必要があります。
ポイント: 「画面で見えたからOK」ではなく、「buildが通ったから公開できる形になった」と考えると安全です。
まとめ
ビルドは、開発中のファイルを公開できる形へ変換する工程です。HTML生成、CSS生成、JavaScript変換、バンドル、最小化などが含まれます。
Web開発で dist、build、.next のようなフォルダが出てきたら、それは公開用の成果物だと考えてください。
