👷‍♂️

ReactアプリでMock Service Worker(MSW)を使う方法

に公開
GraphQL
Node.js
React
TypeScript
MSW
tech

はじめに

フロントエンド開発を進めるとき、APIのバックエンド実装がまだ完成していないと、画面操作時などにデータ取得と反映ができないという課題に直面します。
そんなとき役立つのが Mock Service Worker(MSW) です。

MSWは APIのモックデータをレスポンスするライブラリ で、フロントエンドの開発やテストを効率的に進められます。
https://mswjs.io/

MSWの特徴

  • ブラウザ環境でもNode.js環境でも動作
  • APIリクエストを本物に近い形式でモックできる
  • REST API / GraphQL 両方対応
  • JestやVitestなどテスト環境にも組み込みやすい

インストール

React + Viteを例にします。

npm install msw --save-dev

基本的な使い方

1. ハンドラの定義

まずは「どのエンドポイントに対して、どんなレスポンスを返すか」を定義します。

// src/mocks/handlers.ts
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ id: 1, name: 'Taro Yamada' })
    );
  }),
];

2. Service Workerのセットアップ

// src/mocks/browser.ts
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

3. アプリ起動時にMSWを有効化

開発モードのときだけモックを有効にするのが一般的です。

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

// 開発環境でのみMSWを起動
if (process.env.NODE_ENV === 'development') {
  const { worker } = await import('./mocks/browser')
  worker.start()
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

4. Reactコンポーネントから利用する例

// src/App.tsx
import { useEffect, useState } from 'react';

type User = {
  id: number;
  name: string;
};

function App() {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  return (
    <div>
      <h1>MSW Example</h1>
      {user ? <p>Hello, {user.name}</p> : <p>Loading...</p>}
    </div>
  );
}

export default App;

ブラウザで確認すると、実際のAPIがなくても 「Hello, Taro Yamada」 と表示されます

テスト環境での利用(Jest / Vitest)

テストでも同じモックを利用できます。

// src/mocks/server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

// src/setupTests.ts
import { server } from './mocks/server';

// テスト前後にサーバーを制御
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

これで、ユニットテスト時にも実際のAPIを叩かずに動作確認できます。

まとめ

  • MSWはAPIモックを実現するライブラリ
  • 開発環境でもテスト環境でも同じモック定義を再利用できる
  • REST/GraphQL両対応で柔軟に使える

バックエンド未実装の状態でもデータ取得と反映が可能になるため、Reactアプリ開発で便利なツールです。

Discussion