ビルドとは
一般的に、「ビルド」とは、人間が書いたソースコードを、実際に動かせる形（実行可能な形）に変換する作業のことです。
どんなプログラムでも最終的には、CPUが実行する機械語（0と1ってやつです。量子コンピュータは例外です）に変換される必要があります。
そのための作業と考えてもらえればと思います。
JavaScriptにおけるビルドとは
しかしながら、厳密には、プログラミング言語や実行環境によって、微妙に意味合いが変わってきます。
プログラミング言語ごとの意味合い
| 言語 | ビルドですること |
|---|---|
| C / C++ | ソースコードを機械語（0と1）にコンパイルし、実行ファイル(.exe など)を作る |
| Java | ソースコードをバイトコード(.class)に変換し、JVM上で動く形にする |
| Python | 基本的に事前ビルド不要（インタプリタがその場で読んで実行） |
| JavaScript | 本来は不要だが、開発効率や本番環境向けに変換・最適化する工程として存在する |
注意したいのが、C / C++やJavaはすべてのソースコードをいっぺんに機械語なりバイトコード（←Javaに詳しくない人はとりあえずそういうのがあるんだ程度でOKです）へ変換する工程が含まれます。
このことをコンパイルと呼び、コンパイルが必要な言語をコンパイル言語などと呼ぶことがあります。
一方で、PythonやJavaScriptは、そういった一括の変換なしに動作させることができます。
これは、ソースコードが（JavaScriptの場合ブラウザなどによって）逐一解釈されるためです。
このような、コンパイルが不要な言語をインタプリンタ言語とか呼びます。
JavaScriptにおける意味合い
ここで、「ビルド」と「コンパイル」という二つの言葉が出てきました。
そうすると...
「ビルドとコンパイルって何が違うの？」
「JavaScriptがインタプリンタ言語ならビルドはいらないのでは？」
といった疑問が生じると思います。
そこで、意識してほしいこととしては、以下の2点です。
- プログラミング言語によって、「ビルド」の意味合いは異なる
- コンパイルはビルドの一部である
一つ目に関してはすでに述べている通りです。
それに加えて二つ目を意識しすると、疑問が解消されると思います。
すなわち、言語によって、ビルドにコンパイルが含まれるか否かが変わってくるということです。
ここで、JavaScriptにおけるビルドの意味合いについてみてみましょう。
- トランスパイル: TypeScriptや最新のJS構文、Reactなどのライブラリを、古いブラウザでも動くJSに変換（Babel、tscなど）
- バンドル（束ねる）: 複数のファイル（モジュール）を1つ、または数個のファイルにまとめる（Webpack、Vite、esbuildなど）
- ミニファイ（圧縮）: 変数名を短くしたり空白を削ったりしてファイルサイズを小さくする
- アセット最適化: 画像やCSSの最適化、パスの解決など
本来JavaScriptはブラウザ上にそのまま配置しても実行されます。
しかし、現代の進化した様々な開発手法において、快適・安全に開発・本番運用するための変換作業としてのビルドが実質不可欠になっているといえます。
そういう意味で、確かに他の言語と同質な「コンパイル」は不要かもしれませんが、ビルドをする必要が運用上あるという感じです。
※TypeScriptをJavaScriptに変換することをコンパイルということもあるので、注意です。紛らわしいので個人的にはトランスパイル派です。
npm run dev と npm run build の違い
おまけとして、最後にnode.jsで開発しているとよく使いがちなコマンドの違いについて説明して終わりたいと思います。
npm run dev |
npm run build |
|
|---|---|---|
| 目的 | 開発中の作業用 | 本番公開用のファイル生成 |
| 出力 | ファイルには出力せず、メモリ上で開発用サーバーを起動 |
dist/ などにファイルを出力 |
| 速度優先 | ビルド速度・再読み込み速度を優先（圧縮などはしない） | 実行速度・ファイルサイズを優先（時間がかかってもOK） |
| コード | 圧縮されていない、読みやすい状態 | ミニファイ・最適化済みで読みにくい |
| 便利機能 | HMR（コード変更が即座にブラウザへ反映される）、詳しいエラー表示 | ソースマップは付けない場合が多い、デバッグ情報を減らす |
今まで何となく使っていた方なら思い当たる節があると思います。
また、ビルドの工程で紹介した主な4つの工程についてですが、npm run build を実行するとこれらすべてが行われることになります。
一方で、npm run devはどうでしょうか？
| 工程 | npm run dev |
理由 |
|---|---|---|
| トランスパイル | ○ 行われる | JSXや.tsxはブラウザがそのまま読めないので、開発中でも必ず変換が必要 |
| バンドル | △ ツールによる | Webpack系は行う、Vite系はほぼ行わない |
| ミニファイ | ✕ 基本行われない | 圧縮すると読みにくくなり、デバッグしづらくなるため |
| アセット最適化 | ✕ 基本行われない | 画像圧縮などは時間がかかるので開発中は素通し |
開発ツールによって変わってくることもあるので一概には言えませんが、全工程を行うわけではありません。
これも npm run build との違いといえそうです。
まとめ
- ビルドは、プログラムを実行するための作業
- プログラミング言語によって、意味合いは異なる
- コンパイルは、ビルドの一工程
-
npm run devは開発向き -
npm run buildは本番適用向き