Vite × Vitestではじめる！Vue.jsモダン開発入門

## Viteとは何か？

### 1.1 Vite登場の背景

近年のフロントエンド開発では、**Webpack**などのバンドラーツールが広く使われてきました。  
しかし、大規模化に伴い次の課題が浮き彫りになりました。

- 開発サーバーの起動が遅い
- ファイルを修正するたびに全体ビルドが必要
- ホットリロードの反映に時間がかかる

こうした開発体験のストレスを解消するために登場したのが、**Vite**です。
Viteは「とにかく開発を速くする」ことを目指して設計された次世代ツールです。

### 1.2 Viteの特徴的なアプローチ

Viteは2つの革新的な仕組みを採用しています。

#### 開発中はバンドルしない

従来のツールでは、開発中であってもすべてのファイルをバンドルする方式を採用していました。
そのため、わずかな修正でもビルドに時間がかかるという課題がありました。

Viteはこの点が大きく異なります。
ブラウザ標準の **ES Modules（ESM）** 機能を活用し、必要なモジュールだけをリアルタイムで配信します。
これにより、以下のような高速な開発体験が実現されます。

- 開発サーバーが一瞬で起動する
- ファイル修正後、最小限のリロードで済む
- 変更がすぐに画面に反映される

:::note info
ES Modules（ESM）とは？
JavaScriptの「import/export」をブラウザが直接理解できる仕組み。
これにより、サーバー側でまとめなくてもモジュール単位でロードできる。
:::

:::note info
バンドル（Bundle）とは？
複数のJavaScriptファイル、CSSファイル、Vueコンポーネントなどを
1つまたは少数のファイルにまとめる処理のことです。

バンドルの主な目的は次の2つ。
- HTTPリクエストの数を減らすことで通信効率を上げる
- コードを圧縮・最適化してファイルサイズを小さくする

従来、HTTP/1.1環境ではリクエストごとに通信が直列化されるため、
小さなファイルが大量にあるとパフォーマンスが悪化しました。

そのため「とにかくまとめる」が常識でしたが、
最近はHTTP/2・HTTP/3の普及により「大量リクエストも高速処理できる」ようになり、「必ずしも巨大な1ファイルにしなくてもよい」時代になっています。

Viteのアプローチはこの流れに沿ったものです。
:::

#### 本番ビルドはRollupベース

開発中はバンドルを省略するViteですが、本番リリース時にはしっかりバンドルします。
内部ではRollupという高速なバンドラーを使い、

- 不要コードの除去（Tree Shaking）
- ファイル圧縮（Minify）
- ファイル分割（Code Splitting）

などを施し、最適な本番ファイルを生成します。
これにより、本番環境でもパフォーマンスの良いアプリを配信できます。

### 1.4 まとめ

| 比較項目 | 従来（Webpackなど） | Vite |
|:---|:---|:---|
| 開発サーバー起動 | 遅い（バンドル必要） | 超高速（即時起動） |
| モジュール更新時 | 全体再ビルド | 必要部分のみ差し替え |
| 本番ビルド | 必須 | 必須（Rollupで最適化） |

Viteは**開発中の高速体験**と**本番最適化ビルド**を両立する、  
**次世代フロントエンド開発環境**です。

## ViteでVue.jsアプリを構築する流れ

### 2.1 プロジェクト作成手順

まずはViteを使って新しいVue 3プロジェクトを作成しましょう。

```bash
## Node.jsがインストールされている前提です
npm create vite@latest
```

実行後、対話式で質問されます。

```yaml
## プロジェクト名
√ Project name: » my-vue-app
## フレームワーク
√ Select a framework: » Vue
## バリアント
√ Select a variant: » TypeScript / JavaScript （どちらか選択）
```

Vue + JavaScriptを選んで進めます。

一括でコマンド指定する場合は次です。

```bash
npm create vite@latest my-vue-app -- --template vue
```
これで、my-vue-appというディレクトリにプロジェクトが作成されます。

### 2.2 依存パッケージのインストール

生成されたディレクトリに移動して、パッケージをインストールします。

```bash
cd my-vue-app
npm install
## 最初はpackage.jsonに書かれている依存関係（Vite本体、Vue本体など）をまとめてインストールします。
```

### 2.3 開発サーバーの起動

ローカル開発サーバーを起動します。

```bash
npm run dev
```

実行すると、次のようなメッセージが出ます。

```arduino
 VITE v4.0.0  ready in 300ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
```

ブラウザで http://localhost:5173/ にアクセスすると、
初期Vueアプリの画面が表示されます。

初期画面には、Vueロゴと簡単なリンク集が並んでいるはずです。

### 2.4 プロジェクト構成

作成直後のVite + Vueプロジェクトは、以下のようなシンプルな構成になっています。

```pgsql
my-vue-app/
├── index.html
├── package.json
├── vite.config.js
├── src/
│   ├── assets/
│   │   └── vue.svg
│   ├── App.vue
│   └── main.js
├── node_modules/
└── public/
```

| 主なファイル・ディレクトリ | 説明 |
|:---|:---|
| `index.html` | アプリのエントリーポイントとなるHTMLファイル |
| `package.json` | プロジェクトの依存情報 |
| `vite.config.js` | Vite設定ファイル |
| `src/` | アプリ本体のコード |
| `src/main.js` | アプリのエントリーポイント。ここからVueアプリを起動する |
| `src/App.vue` | 最初に表示されるコンポーネント |
| `node_modules/` | インストールされたライブラリ群（自動生成） |
| `public/` | 静的ファイルを配置する場所 |

### 2.5 main.jsの役割

Viteでは、`src/main.js`がアプリケーションのエントリーポイントです。
初期状態は以下のようになっています。
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).mount('#app')
```

- `createApp(App)`でVueアプリケーションを作成
- `.mount('#app')`で、index.html内の`<div id="app"></div>`にアプリをマウントする

### 2.6 なぜnpmコマンドでプロジェクト作成・開発サーバー起動するのか？

#### Spring Bootとの比較

まず、Spring Bootアプリケーションはこのようなイメージでした。
- Javaで書いたプログラムをビルドしてjarファイルにする
- jarファイルの中に **サーバー（Tomcatなど）** も組み込まれている
- java -jar app.jarでサーバーごと起動する

つまり、
アプリケーションとサーバーが一体化しており、
アプリ自体がHTTPサーバーとして機能していました。

#### Vue.jsアプリの場合

一方、Vue.jsアプリはこうなっています。

- Vue.js自体はブラウザで動くJavaScriptのコード
- 通常のWebサーバー（Apache, Nginxなど）で **静的ファイル（HTML/CSS/JS）** として配信される

つまり、Vue.jsのコード単体では
サーバー機能を持たない＝ただのフロントエンドリソースと言えます。

開発中は、

- index.html
- main.js
- App.vue（＋各コンポーネント）

などたくさんのファイルに分かれているので、
それらをブラウザに正しく届けるために、
「開発用サーバー」（ViteのDev Server）が必要になります。

#### なぜnpmを使うのか？

ViteやVue.jsは、
**Node.js環境上で動くツール群**（npm/yarn/pnpmで管理）として配布されています。

つまり、
- Node.jsの力を借りて
- 開発サーバー（Vite Dev Server）を立ち上げて
- 最新のES ModulesやHot Reloadに対応した動作をする

という仕組みです。
npmコマンドで行っているのは、要するに下記の作業です。
|npmコマンド|やっていること|
|--|--|
`npm create vite@latest`|Viteのテンプレートプロジェクトを生成する
`npm install`|必要なパッケージ（ライブラリ群）をインストールする
`npm run dev`|開発用サーバーを立ち上げ、リアルタイムにファイルを配信する


#### イメージ図

##### Spring Boot構成

```
[アプリケーション.jar]
    ↓ （内蔵TomcatでHTTPサーバー起動）
ブラウザ
    ↓ 
アプリにリクエスト
    ↓ 
サーバー側でHTML生成・返却
```

##### Vite＋Vue.js構成（開発時）

```
[ソースコード群]
     ↓ （Vite Dev Serverで配信）
ブラウザ
     ↓ 
Viteサーバーからモジュール単位で受信
     ↓ 
Vueアプリ起動
```
本番運用では、ビルドして出来上がった静的ファイル群（HTML/CSS/JS）を
普通のWebサーバー（Apache/Nginxなど）で配信します。

### 2.7 まとめ

- Vue.jsは**サーバー型**ではなく**クライアント型**アプリケーション
- Viteは**開発中専用**のサーバー（開発支援ツール）
- Node.js＋npmでツール群を管理している
- Spring Bootはアプリ＋サーバーが一体化しているが、Vue.jsはフロントエンドだけ動かす

この違いを理解しておくと、Vite＋Vue.jsの開発スタイルにすぐに馴染めるでしょう

## Vue.js初期ロードの仕組みとViteの役割

### 3.1 Vue.jsアプリがロードされる流れ

まず、Vite＋Vue.jsの開発環境でブラウザを開くと、次の順番でアプリがロードされます。

```pgsql
1. ブラウザが http://localhost:5173/ にアクセス
   ↓
2. Vite Dev Serverが index.html を返す
   ↓
3. index.html 内の <script type="module" src="/src/main.js"> を読み込む
   ↓
4. main.js を実行し、Vueアプリ（App.vue）を起動
   ↓
5. ブラウザ上でVueアプリが動き出す
```

つまり、サーバー側では画面は作っていません。
HTMLとJavaScriptだけをブラウザに送り、
あとはブラウザ内で動的に画面を組み立てるのが基本です。

### 3.2 index.htmlの中身（実例）

Viteで作った初期状態の`index.html`は非常にシンプルです。
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```
ポイント：

- `<div id="app"></div>`：ここにVueアプリがマウントされて描画する
- `<script type="module" src="/src/main.js">`：Vueアプリを起動するためのJavaScriptファイルをロードする

### 3.3 Spring Boot（Thymeleaf）との根本的な違い

| 比較項目 | Spring Boot（Thymeleaf） | Vite＋Vue.js |
|:---|:---|:---|
| サーバー側の役割 | サーバーでHTMLを生成・返却 | 最小限のHTML＋JSを返却 |
| 初期画面構築 | サーバーでHTML構築 | ブラウザ内でVueが構築 |
| データ受け渡し | HTML生成時に埋め込み | API経由で取得 |

#### フロー比較

##### Spring Bootの場合

```
ブラウザ
↓
サーバーにリクエスト
↓
※サーバー側でHTML組み立て
↓
完成HTML受信・表示
```

##### Vite＋Vue.jsの場合

```
ブラウザ
↓
サーバーにリクエスト
↓
※index.htmlとmain.jsを受信
↓
ブラウザ内でVueアプリ起動・画面組み立て
↓
APIリクエストでデータ取得
```

### 3.4 開発中（Vite）と本番ビルド後の違い

| 項目 | 開発中（Vite Dev Server） | 本番（ビルド後） |
|:---|:---|:---|
| ファイル配信 | 動的にリアルタイム配信 | 最適化された静的ファイルを配信 |
| サーバー | Vite Dev Server | Nginx、Apacheなどの静的サーバー |
| 更新反映 | Hot Reload対応 | 本番用は手動デプロイ必要 |

開発中はリアルタイム編集に最適化、本番は最小・高速な静的ファイルに最適化されています。

### 3.5 ブラウザが最初にindex.htmlを取得する理由（基本動作の整理）

これはViteやVue.js独自の仕様ではなく、  
**Webブラウザの標準仕様（HTTP/HTML5のロード手順）** に従っています。

- ブラウザはURLアクセス時、まずHTMLドキュメントを要求
- サーバーはそれに応じてindex.htmlを返す
- HTML解析後、JS・CSSなどを順次ロードする

SPA（Vue.js、React、Angularなど）でも基本的に同じ動作をします。

## Viteの主な特徴と利点

### 4.1 なぜViteは高速なのか？

Viteの最大の特徴は、開発体験が圧倒的に速いことです。
その理由は大きく3つあります。

#### バンドルレス開発（開発中はビルド不要）

従来のツール（例：Webpack）は、開発中でもプロジェクト全体を一度ビルド（バンドル）してから提供していました。
これにより、プロジェクトが大きくなるほど
- 起動に時間がかかる
- ファイル修正時も再ビルドが必要

という問題がありました。

一方、Viteは
- 開発中はビルドをしない
- 必要なモジュールだけブラウザに個別配信
- ネイティブの **ES Modules（ESM）** を活用

することで、**サーバー起動もファイル更新も超高速**にしています。

#### 超高速なHot Module Replacement（HMR）
Viteはファイルを保存すると、
- 変更されたモジュールだけ即座に差し替え
- ページ全体をリロードせず
- アプリの状態（例えば入力中のフォーム内容など）を保持したまま

変更をブラウザに反映します。
これが **Hot Module Replacement（HMR）** です。

##### 具体例
App.vueのテキストを修正して保存すると、ブラウザはページ全体をリロードすることなく、変更された箇所だけを動的に更新します。
このため、入力途中のデータやアプリケーションの状態は失われることなく、そのまま維持されます。

##### HMRが効く範囲と効かない範囲
|変更内容|HMR対応状況|
|--|--|
Vueコンポーネントのテンプレート変更|即時反映（HMR）
CSS、スタイルの変更|即時反映（HMR）
状態管理（Pinia/Vuex）の設定変更|基本HMRだが影響大ならリロード推奨
vite.config.jsなど設定ファイル変更|要サーバー再起動

#### 本番ビルドはRollupベース

開発中はバンドルしない一方で、  
本番リリース時にはRollupを使って最適化された静的ファイルを生成します。

これにより、
- Tree Shaking（不要コード除去）
- Minify（圧縮）
- Code Splitting（ファイル分割）

などの最適化が行われ、
**軽量で高速な本番成果物**が生成されます。

開発中と本番でアプローチを切り替えている点が非常に賢い設計です。

### 4.2 Viteの主な利点まとめ

| 項目 | 内容 |
|:---|:---|
| 開発サーバー起動速度 | 一瞬（バンドル不要） |
| ファイル保存時の反映 | ミリ秒単位で即反映 |
| 設定のシンプルさ | 基本設定で十分、拡張も簡単 |
| モダンブラウザ対応 | ESMベース、最新仕様に最適 |
| 本番ビルド品質 | Rollupによる最適化バンドル |
| プラグインエコシステム | 豊富な公式・非公式プラグイン |

### 4.3 開発者目線でのメリット実感ポイント

- 朝イチの開発サーバー起動が超速（1秒以下）
- ファイル保存するだけで即座にブラウザ反映、ストレス激減
- 設定ファイル（vite.config.js）がシンプルで読みやすい
- TypeScript、Vue、React、Svelteにも標準対応
- 環境変数（.envファイル）管理が簡単

特に、ファイル保存＝即反映というスピード感は、
開発者の作業効率を劇的に向上させます

## Vitestとは何か？

### 5.1 Vitest登場の背景

従来、JavaScriptやTypeScriptアプリケーションのテストには**Jest**が主流でした。
しかし、次のような課題がありました。
- テストの起動が遅い
- モジュールモックが複雑
- フロントエンド開発（特にVite利用時）とスムーズに連携できない

そこで登場したのが**Vitest**です。
Viteと同じ仕組み（ES Modulesベース）を活用して、超高速なテスト実行を可能にした
次世代テストランナーです。

### 5.2 Vitestの特徴

| 項目 | 特徴 |
|:---|:---|
| 超高速起動 | Viteのキャッシュ機構を利用 |
| Viteとの統合性 | Viteプロジェクトならすぐ統合できる |
| ESMネイティブ対応 | import/exportに完全対応 |
| Jest互換API | describe, it, expectなどJestと同じ感覚で書ける |
| Watchモード搭載 | ファイル保存時に該当テストのみ再実行 |
| 高度なモック機能 | モジュール・関数のモックが簡単 |

Vitestは「速いだけ」でなく、開発フローに自然になじむ設計になっています。

### 5.3 Jestとの違い

| 比較項目 | Jest | Vitest |
|:---|:---|:---|
| 開発ベース | Node.js中心 | Vite/ESM中心 |
| 起動速度 | 比較的遅い | 超高速（数百ms） |
| モジュールローディング | 独自ローダー | ネイティブESM利用 |
| フロントエンド向け最適化 | やや弱い | 強い（Vue, React, Svelte向け） |
| 設定のシンプルさ | やや複雑 | Viteと統一されシンプル |

### 5.4 そもそもVue.jsのテストとは？

#### Vue.jsにおけるテストの目的  
Vueコンポーネントやロジックが正しく動くか自動で確認することです。

| テスト対象 | テスト内容 |
|:---|:---|
| カウンターコンポーネント | ボタンを押すとカウントアップするか |
| フォーム入力画面 | 必須チェックが正しく働くか |
| API呼び出し処理 | データが正しく取得・反映されるか |
| 表示切り替え | 条件に応じて正しい要素が表示されるか |

#### なぜテストするのか？

- コード変更時にバグ混入を防ぐ
- チーム開発時に安全な変更ができる
- リグレッション（機能後退）防止
- 品質保証・メンテナンス性向上

#### テストの種類

| 種類 | 説明 |
|:---|:---|
| ユニットテスト | 関数や小さな単位をテスト |
| コンポーネントテスト | Vueコンポーネントをマウントして動作検証 |
| E2Eテスト | アプリ全体の動作確認（別ツールで実施） |

Vitestは主に**ユニットテスト＋コンポーネントテスト**を担当します。

#### 簡単なテスト例（イメージ）

カウンターコンポーネント（Counter.vue）
```vue
<template>
  <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  }
};
</script>
```
このコンポーネントをVitestでテストすると…
```javascript
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
import { describe, it, expect } from 'vitest'

describe('Counter.vue', () => {
  it('初期状態では0を表示する', () => {
    const wrapper = mount(Counter)
    expect(wrapper.text()).toContain('0')
  })

  it('ボタンクリックでカウントが増える', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('1')
  })
})
```

### 5.5 どういう場面でVitestが便利か？

- Vue＋Viteプロジェクトを開発しているとき
- テストの起動・反映スピードを求めるとき
- Jestが重く感じられるとき
- 最新のフロントエンド開発フローを取り入れたいとき

特に、Vue3＋Vite開発では、
Vitestを導入することで開発効率が体感で2倍以上になることもあります。

## Vitestの基本的な使い方

### 6.1 Vitestのインストール手順

Viteで作成したVue.jsプロジェクトにVitestを導入します。

```bash
## インストールコマンド
npm install -D vitest @vitejs/plugin-vue @vue/test-utils
```

ここでインストールしているものは下記の通りです。
パッケージ|役割
|--|--|
vitest|テストランナー本体
@vitejs/plugin-vue|ViteでVueコンポーネントを正しく読み込むためのプラグイン
@vue/test-utils|Vueコンポーネントをマウント・操作するためのユーティリティ

### 6.2 package.jsonにスクリプト追加

テストを簡単に実行できるよう、`package.json`にスクリプトを追加します。
```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}
```
`npm run test`：通常のテスト実行
`npm run test:watch`：ファイル監視モードでテスト（開発中におすすめ）

が使えるようになります

### 6.3 最初のテストコードを書いてみよう

まずはシンプルなJavaScript関数をテストする例です。

```javascript
// src/utils/math.js
export function add(a, b) {
  return a + b;
}
```
これに対応するテストファイルを作成します。
```javascript
// src/utils/math.test.js
import { describe, it, expect } from 'vitest'
import { add } from './math'

describe('math.jsのテスト', () => {
  it('add関数は正しく加算できる', () => {
    expect(add(2, 3)).toBe(5)
  })
})
```
コマンドでテストを実行します。
```bash
npm run test
```
テスト結果
```yaml
✓ math.jsのテスト > add関数は正しく加算できる
```

### 6.4 Vueコンポーネントをテストしてみよう

Vueコンポーネントをテストする具体例を紹介します。

#### テスト対象のコンポーネント例
```vue
<!-- src/components/HelloWorld.vue -->
<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>
```
このコンポーネントは、受け取った`msg`を画面に表示するだけのシンプルなものです。

#### テストコード例
```javascript
// src/components/HelloWorld.test.js
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('propsで渡したメッセージが表示される', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'こんにちは、世界！' }
    })
    expect(wrapper.text()).toContain('こんにちは、世界！')
  })
})
```
ポイント：
- `mount()`でコンポーネントを仮想的に画面に描画
- `props`で渡したデータが正しく表示されるかをチェック

#### テスト実行結果イメージ

```yaml
✓ HelloWorld.vue > propsで渡したメッセージが表示される
```
と表示され、
Vueコンポーネントのテストが成功していることが確認できます。

## Vite × Vitestによる開発効率アップ

### 7.1 ファイル保存時に自動テスト実行（Watchモード）

開発中に毎回 `npm run test` を手動で実行するのは非効率です。
Vitestには、ファイル保存時に自動でテストを再実行する機能（Watchモード）が標準搭載されています。

開発時は、ファイルを保存するだけで関連するテストが自動実行されるこのモードを利用します。
```bash
npm run test:watch
```

この機能を活用することで、開発とテストがシームレスに連携した作業スタイルを実現できます。
主なメリットは以下のとおりです。
- 修正して保存するだけで、即座にテスト結果が得られる
- テスト実行漏れを防止できる
- バグを「作った瞬間に」発見できる
- 開発スピードを落とさずに品質を確保できる

### 7.2 カバレッジ（Coverage）を取得する

どれだけテストできているかを可視化するためにカバレッジレポートを取得します。

```bash
npm run test --coverage
## testコマンドに--coverageオプションをつけるだけ
```

カバレッジレポートには次のような情報が表示されます。

```yaml
Statements   : 85% (tested 85 of 100)
Branches     : 78% (tested 39 of 50)
Functions    : 88% (tested 22 of 25)
Lines        : 85% (tested 85 of 100)
```
さらに`coverage/`ディレクトリにHTMLレポートも自動生成されるので、ブラウザで可視化も可能です。

### 7.3 開発効率をさらに上げるコツ

#### 小さな単位でこまめにテストを書く
大きな変更をまとめてテストするより、小さな変更ごとにテストを書きすぐに結果を見る。
を繰り返すほうが、バグを早期発見でき修正コストも低くなります。

#### E2Eテストと使い分ける
Vitestはコンポーネント単位・ロジック単位の確認に強いツールです。
一方で、アプリ全体のフロー確認（ログイン～注文完了など）は、CypressなどE2Eツールを使った方が効率的です。
つまりユニットテストはVitest、E2EテストはCypressと、役割分担するのがベストプラクティスと言えます。

## 環境別設定（開発用・本番用）の切り替え

### 8.1 なぜ環境別設定が必要なのか？

開発中と本番環境では必要な設定が異なります。
| 設定内容 | 開発用 | 本番用 |
|:---|:---|:---|
| APIのURL | ローカルサーバー (http://localhost:3000) | 本番APIサーバー (https://api.example.com) |
| ログレベル | 詳細 (debugレベル) | 最小限 (errorレベルのみ) | 
| 機能フラグ | β機能有効 | 本番では無効 |

このような差分を安全に切り替えるため、Viteでは環境変数機能が標準サポートされています。

### 8.2 .envファイルを使った設定管理

Viteでは次のようなファイルで設定を管理します。

| ファイル名 | 説明 |
|:---|:---|
| .env | 全環境共通 |
| .env.development | 開発環境専用 |
| .env.production | 本番環境専用 |

### 8.3 .envファイルの命名規則について
Viteでは、モード名に応じた.envファイルが自動的に読み込まれます。

| ファイル名 | 適用対象 | コマンド例 |
|:---|:---|:---|
| .env | すべて共通 | 全コマンド |
| .env.development | 開発サーバー起動時 | npm run dev |
| .env.production | 本番ビルド時 | npm run build |
| .env.[任意] | カスタムモード使用時 | vite --mode 任意モード名 |

- すべての環境で共通な設定 → .env
- 特定環境専用設定 → .env.[mode]
- 環境変数名は必ずVITE_接頭辞付き（例：VITE_API_URL）
- カスタムモードも自由に追加できる（例：staging, qa, etc）
```bash
## この場合、.env.stagingファイルが読み込まれます。
vite --mode staging
```

### 8.4 import.meta.envで環境変数にアクセスする

環境変数はコード中で次のように参照します。
```javascript
console.log(import.meta.env.VITE_API_URL)
```
Vueコンポーネント内でも同様に使えます。

```vue
<script setup>
const apiUrl = import.meta.env.VITE_API_URL
console.log('API URL:', apiUrl)
</script>
```
:::note info
- import.meta.envオブジェクトにアクセスする
- VITE_接頭辞付きの変数しかアクセスできない
:::

### 8.5 本番ビルド時の最適化ポイント

本番ビルドコマンド
```bash
npm run build
```

これにより、
- Tree Shaking（不要コード削除）
- Minify（圧縮）
- Code Splitting（必要に応じた分割）
- import.meta.envの実値への展開

がすべて自動で適用され、
軽量・高速な本番用静的ファイルが生成されます。

生成されるファイルは、通常dist/フォルダに出力されます。

## まとめ

### 9.1 本記事で学んだこと
ここまで、ViteとVitestを中心に、次のような内容を学んできました。

| テーマ | ポイント |
|:---|:---|
| Viteとは | 超高速な開発体験＋最適化ビルド |
| Vue.jsロードの仕組み | index.html→main.js→ブラウザ内で起動 |
| Viteの特徴 | バンドルレス、超高速HMR、本番Rollupビルド |
| Vitestとは | 超高速なVite統合テストランナー |
| Vueテストの基本 | コンポーネント単位の品質保証 |
| Vite×Vitest開発サイクル | 保存→即テスト→即反映 |
| 環境別設定管理 | .env＋import.meta.env |

### 9.2 Vite＋Vitestの導入で得られるメリット

#### 開発効率の向上
- サーバー起動、ファイル更新、テスト実行すべてが爆速
- 開発体験そのものがストレスフリーになる

#### 品質向上
- テストコードを書くハードルが下がる
- 保存するだけで自動テスト → バグの早期検出

#### 保守性・運用性アップ
- .envファイルによる環境別設定切り替えが容易
- 本番ビルドは最適化済みで安全・高パフォーマンス

### 9.3 Vue.js開発における新しい標準

Vue.jsプロジェクトのモダンな構成としては、
- フロントエンドビルド → Vite
- ユニット・コンポーネントテスト → Vitest
- 本番環境用ビルド・デプロイ → Viteビルド成果物＋ホスティングサービス

という組み合わせが **新しい標準（デファクトスタンダード）** になりつつあります。

```
[Vue.jsコード] 
    ↓ （開発中はVite Dev Serverで即時反映）
[Vitestで自動テスト]
    ↓ （保存と同時にテストサイクル）
[ビルド]
    ↓ （本番用最適化ファイル生成）
[静的サーバーやCDNにデプロイ]
```

### 9.4 最後に

ViteとVitestは、単なるツールの置き換えではありません。
- 開発サイクルそのものを進化させる技術
- 開発スピードと品質保証を両立する武器
- 現代のフロントエンドエンジニアにとって必須の基礎知識

と言えます。

この2つを正しく理解し、活用できるようになれば、
Vue.jsだけでなく、あらゆるフロントエンド開発のレベルが一段階上がるはずです。