はじめに
フロントエンドの開発では、npm run dev を実行すると、開発環境としてブラウザに表示されますよね。
でもpackage.jsonを見ると、npm run build っていうスクリプトも定義されてますよね。
これは一体なんでしょうか？
本記事ではビルドとはなんぞやという話から、ビルドして作られた成果物たちはどう使われているのかまとめていきます。
ビルド is 何？
ビルドとは、開発中のコード（例: .vueファイル）を、ブラウザが理解できる形式（HTML, CSS, JavaScript）に変換するプロセスを指します。
ちょっと難しく聞こえるかもしれませんが、簡単に言えば「ブラウザで動くJavaScriptやCSSファイルに変換してくれる作業」です。
web開発にてビルドという言葉はよく使われますが、フロントエンドの領域においては先のような意味合いになります。
ブラウザが読み込めるのはHTML、CSS、JavaScript
では、なぜビルドは必要なのでしょうか？
そもそもですが、vueファイルはそのままブラウザで読み込まれているわけではありません。
ブラウザは基本的にHTML、CSS、JavaScriptという形式のファイルしか読み込めないため、これらに変換が必要になります。
.vueファイルにはテンプレートやスタイル、スクリプトといったさまざまな情報がまとまっていますが、これらをJavaScriptやCSSに変換するのが「ビルドツール」と呼ばれるツールの役割です。
vueファイルをJavaScript, cssに変換する以外にも、例えば以下のような処理もビルドで行っています↓
-
コードの変換: .vue や .ts ファイルを、ブラウザで動作する .js や .css に変換
-
コードの最適化: ファイルサイズを削減し、読み込み速度を向上
-
ブラウザ互換性の確保: 古いブラウザでも動作するよう、コードを変換（例: ES6 を ES5 に）
そしてビルド時に作成された成果物は最終的には、本番環境へとデプロイされ、実際にユーザーが操作することになります。
デベロッパーツールで違いを見てみる
npm run devを実行した時、buildを実行した時では、ブラウザに表示している違いは何か見てみます。
まずは開発環境を立ち上げてみます。
ブラウザのデベロッパーツールを見てみると、bodyタグ内にscriptタグがあり、そこからmain.tsを読みこんでいることがわかります。
それではビルドしてみましょう。
ビルドを実行すると、特に指定がなければ dist ディレクトリが出来上がっています。
viteのpreviewモードで表示してみると、
先程と同じような見た目でブラウザに表示されていることがわかります。
しかし、先ほどまでは main.ts を読み込んでいましたが、
assets/index-aNVf...js というファイルを読み込むようになっています。
先ほどのdistフォルダを見てみると、同様のjsファイルが入っていることがわかります。
今回は vite preview で表示しましたが、
例えばvercelのserveのような、httpサーバーを立てられるライブラリを使ってビルドしたファイルを公開してみても同じように表示することができます。
最後に
ビルドは、開発中のコードをブラウザが理解できる形式に変換し、最適化する重要なプロセスです。本記事では、npm run dev と npm run build の違い、そしてビルドによって生成された成果物がどのように利用されるのか、ブラウザに表示されているhtmlを例に解説しました。
ビルドしたファイルは本番環境へのデプロイに限らず、CI環境でのテストにも応用できます。
例えばPlaywrightとmswを組み合わせれば、APIのレスポンスがエラーコードだった場合にどのように表示されるかなど、より本番環境に近い状態でテストすることもできます。
開発環境で動作するVue3のようなフレームワークが、本番環境でユーザーに提供されるまでの流れを理解する参考になれば幸いです！
参考