前置き

Reactとかを触っているとビルドする・ビルドした後の云々みたいな話をすると思いますが、しっかり理解できていなかったのでビルドとはなんなのかについてまとめておきます。

ビルドとは

「build（ビルド）」は、主にソフトウェア開発において、**ソースコードを製品として動作可能な形に変換するプロセスのことです。**特にフロントエンド開発（JavaScriptやTypeScriptなど）で使われる場合、以下のような操作が含まれます。

1. コードの変換

• TypeScript → JavaScript

  TypeScriptはそのままではブラウザで実行できないので、JavaScriptに変換（トランスパイル）します。

• 最新のJavaScript（ES6+） → 古いJavaScript（ES5）

  一部の古いブラウザでも動くように、コードを後方互換性のある形式に変換します。

1. コードの結合
   • JavaScriptやCSSが複数のファイルに分かれている場合、それらを1つのファイルにまとめることで、ブラウザが効率よく読み込めるようにします。

2. 最適化

• コード圧縮（Minify）

  空白やコメントを削除し、コードサイズを小さくしてページの読み込み速度を改善します。

• デッドコードの削除

  使われていないコード（未使用の関数など）を削除して、サイズをさらに小さくします。

3. アセットの処理

• CSS、画像、フォントなどを圧縮したり、特定の形式に変換します（例: SCSS → CSS、画像圧縮など）。

4. 環境ごとの設定適用

• 本番環境（Production）では最適化を行い、開発環境（Development）ではデバッグしやすい形式にする。

なぜビルドが必要なのか？

1. ブラウザで動作可能にするため
   • TypeScriptやモダンなJavaScriptをそのままブラウザに渡しても、すべてのブラウザがサポートしているわけではありません。ビルドによって互換性のある形式に変換することで、幅広い環境で動作します。
2. パフォーマンスを向上させるため
   • ファイルサイズを小さくする、リクエスト数を減らすなど、ユーザーにとって快適な体験を提供できます。
3. コードを安全にするため
   • ビルドによって、ソースコードを難読化（Obfuscate）することで、コードの読み取りや改ざんを防ぐ効果があります。

ビルドのツール

基本的にビルドは何からのツールを使って行います。JavaScriptやTypeScriptのプロジェクトでよく使われるビルドツールは以下です。

Webpack

• ファイル結合、コード圧縮、アセットの管理など、ビルドに必要な機能を多く備えています。

Vite

• 高速なビルドツールで、開発環境と本番環境で効率的に動作します。

Parcel

• 設定がほとんど不要で簡単に使えるビルドツール。

Rollup

• 主にライブラリ開発向けのビルドツール。コードのサイズを最小化するのに適しています。

esbuild

• 高速なビルドツール。TypeScriptやJavaScriptを瞬時に処理できます。

実際のフロー例

例えば、TypeScriptのプロジェクトでビルドを行う場合、以下のようなコマンドが使われます。

TypeScriptをJavaScriptに変換するビルド

tsc

Webpackでのビルド

webpack.config.js を設定した後、以下を実行します。

npx webpack --mode production

ビルド後の成果物

ビルドを実行すると、以下のようなファイルが生成されます。

• 開発中のファイル（ソースコード）
  • src/index.ts
  • src/styles.scss
• ビルド後のファイル（成果物）
  • dist/main.js（圧縮済みJavaScript）
  • dist/styles.css（CSSに変換済み）

まとめ

ビルドは、コードを実際に動作可能な形に変換し、最適化する重要なプロセスです。特に、モダンな開発環境ではほぼ必須のステップであり、最終的なパフォーマンスや互換性を大きく向上させます。