Vue.jsでnpm run devが必要な理由とViteの役割をわかりやすく解説

Vue.jsはフロントエンドのフレームワークなのに、なぜ npm run dev でサーバーを起動する必要があるのでしょうか？

この記事では、ブラウザが .vue ファイルを直接読めない理由から、Viteが開発サーバーとして果たす役割、HMRの仕組み、そして開発環境と本番環境（npm run build）の違いまでをわかりやすく解説します。

Vue.js・Viteを使い始めたばかりの方を対象にしています。

ブラウザが「.vueファイル」を読めない問題

Vue.jsはブラウザ上で動くフロントエンドのフレームワークです。「なら .vue ファイルをブラウザに直接渡せばいいのでは？」と思いますよね。ところが、そう単純にはいきません。

ブラウザが理解できる言語は HTML・CSS・JavaScript の3種類だけです。.vue ファイルや TypeScript（.ts）、SCSS（.scss）はブラウザが直接解釈できないため、そのままでは画面に何も表示されません。

また、.html ファイルをダブルクリックして開くと、ブラウザは file:// という方式で読み込みます。この方法だと、JavaScriptの import / export（モジュール機能）がセキュリティ上の理由でブロックされてしまいます。Vue.jsはモジュールを多用するため、この制限がそのまま障害になります。

【例え話】レストランで考えると、食材（.vue ファイル）をそのままお客さん（ブラウザ）に渡しても食べられません。調理人（Vite）が「ブラウザが食べられる料理（HTML/JS/CSS）」に変換して初めてテーブルに出せます。「npm run dev」は「キッチンを開ける」コマンドです。

npm run devの正体――Vite開発サーバーとは

npm run dev を実行すると起動するのは、一般的な「サーバーサイドで処理をするサーバー」ではありません。ブラウザのために .vue ファイルをリアルタイムで変換・配信する開発支援ツールです。

以前は Webpack というツールが主流でした。Webpackは起動時にすべてのファイルをまとめてからサーバーを起動するため、プロジェクトが大きいと起動に30秒〜数分かかることもありました。

【用語】ESモジュール（ES Modules / ESM）とは、JavaScriptの標準機能で、import / export を使ってファイルを分割・読み込みする仕組みです。最新ブラウザはこれをネイティブでサポートしています。

ViteはこのESモジュールをブラウザに直接活用させることで、起動時にファイルをまとめる処理をスキップします。リクエストされたファイルをその場で変換して渡すため、起動が瞬時に完了します。

HMR――コード変更が即座に反映される仕組み

【用語】HMR（Hot Module Replacement）とは、コードを変更したとき、ページ全体をリロードせずに変更したファイルだけをブラウザ上で差し替える機能です。「保存→画面反映」がほぼ瞬時（数十ミリ秒）で完了します。

ViteはWebSocketという通信手段でブラウザと常時接続しており、ファイルの変更を検知すると変わったモジュールだけをブラウザへ送ります。このためプロジェクトが大きくなっても反映速度が落ちません。

ファイルを保存したときの流れは以下のとおりです。

src/components/Header.vue を変更
    ↓
Vite が変更を検知（ファイル監視）
    ↓
Header.vue だけを再コンパイル（全体ではない）
    ↓
WebSocket でブラウザへ差分を送信
    ↓
ページリロードなしで画面に即反映 ⚡

npm run buildと本番環境――Viteのもうひとつの顔

開発が終わったら本番環境にデプロイする必要があります。本番環境では毎回Viteのサーバーを動かすわけにいきません。そこで npm run build の出番です。

npm run build を実行すると、ViteはすべてのVueファイル・TypeScript・CSSを最適化した上で純粋なHTML・JS・CSSに変換し、dist/ フォルダへ書き出します。

dist/
  ├── index.html
  ├── assets/
  │   ├── index-Bx2Kp4.js   # 最適化されたJavaScript
  │   ├── index-DkZ9aB.css  # 最適化されたCSS
  │   └── logo-Cq3xWe.png
  └── ...

この dist/ フォルダの中身は普通のHTML/JS/CSSファイルだけなので、ViteもNode.jsも不要です。NginxやApache、またはVercel・Netlifyなどに置くだけで動作します。

【用語】Rollup（ロールアップ）とは、Viteが本番ビルド時に内部で使用するモジュールバンドラーです。コードの最適化（不要コードの削除＝Tree Shaking）やファイルの分割・結合を担当します。

開発環境と本番環境の違いをまとめる

項目	開発環境（npm run dev）	本番環境（npm run build）
Viteの役割	常駐サーバーとして変換・配信	一度だけビルドして終了
出力形式	メモリ上で変換（ファイルなし）	dist/ に静的ファイルを生成
HMR	あり（変更を即反映）	なし（不要）
起動後の動作	Viteサーバーが常駐し続ける	Viteは終了。サーバー不要
コードの最適化	なし（開発速度優先）	あり（圧縮・Tree Shaking）
デプロイ先	ローカルPC上のみ	どのサーバーにも配置可

Viteの「二つの顔」でイメージを整理する

開発時（npm run dev）：「リアルタイム通訳者」として常駐。
.vue や .ts を書くたびにその場で翻訳してブラウザへ届けます。
本番前（npm run build）：「出版社の編集担当」として一度だけ作業。
全ファイルを整理・最適化して読者（ブラウザ）が最速で読めるかたちに仕上げます。

なぜサーバーサイドのように見えるのか？

比較	サーバーサイド（Express等）	Vite 開発サーバー
何をしているか	DBを操作したりAPIを返す	.vueをJSに変換して渡すだけ
本番で必要？	必要（APIサーバーとして動き続ける）	不要（ビルド済みで完結）
ビジネスロジック	あり	なし

Vite 開発サーバーは「ブラウザのための前処理係」であり、サーバーサイドのような処理（データベースアクセスや認証など）は一切行いません。

まとめ

ブラウザは .vue を読めないため変換が必要。それを担うのがViteです。
npm run dev は「ViteがリアルタイムでVueファイルを変換しながら開発サーバーとして動く」コマンドです。
ViteはサーバーサイドではなくブラウザのためにVueを変換・配信しています。
HMRにより、コードを変更するとページリロードなしで即座に画面へ反映されます。
npm run build でViteが静的ファイルを生成し、以後Viteは不要になります。
Viteの二つの顔：開発時は「常駐サーバー」、本番前は「ビルドツール」。