Vue + Vite で MSW を使った API モック環境の構築

開発中にバックエンドAPIがまだできていなかったり、安定していなかったりする場面、ありますよね。
バックエンドを待たずとも、モックを使ってフロントエンドだけドンドン進めていきたいですよね！

そんな時に便利なMSW (Mock Service Worker)
Service Worker を使ってブラウザ上で通信を横取り（intercept）し、APIレスポンスをモックできる 強力なライブラリです。
今回は、Vue 3 + Vite プロジェクトにおいて、MSWを使ったモック環境の作り方をご紹介します。

1. パッケージのインストール

まずは開発用依存としてMSWをインストールします。

npm install msw --save-dev

2. モックハンドラの定義

MSWはハンドラーと言って、src/mocks/handlers.js または handlers.ts にAPIレスポンスの定義を記述します。
記述も公式にサンプルもあり、直感的に書けるよな内容になっているので、モックを返すだけなら困ることはないです。

import { http, HttpResponse, passthrough } from 'msw'

export const handlers = [
  http.get('/hello', () => {
    return HttpResponse.json({
      message: 'Hello, world!',
    })
  }),

  // その他のGETリクエストを処理
  http.get('*', ({ request }) => {
    const url = request.url

    // 静的ファイル（画像やCSSなど）は通す
    if (url.match(/\.(png|jpg|jpeg|css|js|json)$/)) {
      return passthrough()
    }

    console.warn('[MSW] モックされていないGETリクエスト:', url)
    return HttpResponse.json({ error: 'このリクエストはモックされていません' })
  }),
]

ポイント：

http.get('*') を使って、想定外のリクエストもキャッチ。
静的ファイル（画像やCSS等）は passthrough() を使ってモック対象から除外。

MSWがfetchやXMLHttpRequestによるリクエストをすべてインターセプトするため、静的ファイル（例：画像やJSONなど）へのアクセスもモック対象とMSWが誤解してしまうことがあるため、最後の砦（fallback）としてワイルドカードで設定しています。

3. モックサービスワーカーの初期化

次に、Service Worker を使ってハンドラを有効にします。src/mocks/browser.ts を作成します。

import { setupWorker } from 'msw'
import { handlers } from './handlers'

// ブラウザ用のService Workerをセットアップ
export const worker = setupWorker(...handlers)

4. 開発モード限定でモックを有効化

アプリの起動時に、MSWのセットアップを行います。
以下のような enableMocking() 関数を作成し、main.ts や main.js で呼び出します。

async function enableMocking() {
  if (import.meta.env.MODE !== 'mock') {
    return
  }
  const { worker } = await import('./mocks/browser')
  return worker.start()
}

import.meta.env.MODE で vite のモードを判別できます（通常は development、production ですが、ここでは mock モードを追加）。

5. モックモード専用の起動スクリプトを追加

package.json に以下のようなスクリプトを追加して、モック用に vite を起動できるようにします。

{
  "scripts": {
    "dev:mock": "vite --mode mock"
  }
}

これで以下のコマンドでモック環境が立ち上がります：

npm run dev:mock

6. Service Worker ファイルの生成

MSWを初めて使うときは、Service Worker ファイルを生成する必要があります。

npx msw init public/ --save

このコマンドで public/mockServiceWorker.js が生成され、Viteの開発サーバー経由で読み込まれるようになります。

まとめ

MSWを使えば、ブラウザ上で実際の通信をせずにAPIをモックできる
vite --mode mock のようなカスタムモードと組み合わせることで、開発・モック・本番を柔軟に切り替えられる
静的ファイルは passthrough() で除外し、余計なモック干渉を防げる

参考リンク