はじめに

最近仕事後はovercooked 2で遊んでいる fujimmm331 です。

フロントエンドの開発では、npm run dev のコマンドを実行すると、開発環境としてアプリケーションがブラウザに表示されますよね。

一方、 package.json の scripts を見ると、 build というスクリプトも定義されており、 npm run build のコマンドを実行することもできます。

これらの違いは一体なんでしょうか？本記事ではフロントエンドにおけるビルドとはなんぞやという話から、ビルドして作られた成果物たちはどう使われているのかまとめていきます。

ビルド is 何？

web開発においてビルドという言葉はよく使われますが、フロントエンドの領域においてはビルドとは開発中のコード（例: .vueファイル）を、ブラウザが理解できる形式（HTML, CSS, JavaScript）に変換するプロセスを指します。

ちょっと難しく聞こえるかもしれませんが、簡単に言えば「ブラウザで動くJavaScriptやCSSファイルに変換してくれる作業」です。

では、なぜビルドは必要なのでしょうか？そもそもですが、vueファイルはそのままブラウザで読み込まれているわけではありません。

ブラウザは基本的にHTML、CSS、JavaScriptしか読み込めないため、これらの形式に変換が必要になります。

.vueファイルには <template> や <style> 、<script> といったブロックで構成されていますが、これらのブロックからJavaScriptやCSSに変換するのが「ビルドツール」と呼ばれるツールの役割です。

vueファイルをJavaScript, cssに変換する以外にも、例えば以下のような処理もビルドで行われています↓

そしてビルド時に作成された成果物は最終的には、本番環境へとデプロイされ、実際にユーザーが操作することになります。

npm run dev を実行した時・npm run build を実行した時では、ブラウザに表示している違いは何か見てみます。

まずは npm run dev を実行し、開発環境を立ち上げてみます。

ブラウザのデベロッパーツールを見てみると、bodyタグ内にscriptタグがあり、そこからmain.tsを読みこんでいることがわかります。

それでは npm run build を実行しビルドしてみます。

ビルドを実行すると、特に指定がなければ dist ディレクトリが出来上がっています。

viteのpreviewモードで表示してみると、先程と同じような見た目でブラウザに表示されていることがわかります。

しかし、先ほどまでは main.ts を読み込んでいましたが、 assets/index-aNVf...js というJSファイルを読み込むようになっています。

先ほどのdistフォルダを見てみると、/assetsに同様のjsファイルが入っていることがわかります。

今回は vite preview で表示しましたが、例えばvercel製の serve のような、httpサーバーを立てられるライブラリを使ってビルドしたファイルを公開してみても同様に表示することができます。

ビルドは、開発中のコードをブラウザが理解できる形式に変換し、最適化する重要なプロセスです。本記事では、npm run dev と npm run build の違い、そしてビルドによって生成された成果物がどのように利用されるのか、ブラウザに表示されているhtmlを例に解説しました。

ビルドしたファイルは本番環境へのデプロイに限らず、CI環境でのテストにも応用できます。例えばPlaywrightとmswを組み合わせれば、APIのレスポンスがエラーコードだった場合にどのように表示されるかなど、実際の操作では再現しにくい状態をテストする手段の1つとなります。

開発環境で動作するVue3のようなフレームワークが、本番環境でユーザーに提供されるまでの流れを理解する参考になれば幸いです！