この記事の対象読者

API完成前に画面を作る人
エラー時や0件時の画面を手元で確認したい人
モックを使ったフロントエンド開発に興味がある人

本題に入る前に

フロントエンドを作っていると、「APIがまだできていないけど画面を進めたい」という場面があります。

また、APIができていても、エラー時、0件時、権限なし、通信失敗のような状態は、毎回本物の環境で再現するのが面倒です。

でも、こういう状態こそ画面で確認したいんですよね。成功時だけきれいでも、失敗時に何も出ないと問い合わせにつながります。

この記事では、MSWを使ってAPIレスポンスをモックし、成功・0件・エラーの画面を手元で確認する考え方を紹介します。

モックは雑な代用品ではない

モックというと「本物がない間の仮置き」に見えるかもしれません。

でも実務では、次のような確認にかなり便利です。

確認したい状態	本物のAPIで大変な理由
0件	データを消す必要がある
500エラー	わざと障害を起こしにくい
権限なし	ユーザー設定が必要
遅いレスポンス	ネットワーク条件に依存する

モックで状態を作れると、画面の品質を上げやすくなります。

MSWでレスポンスを作る

MSWでは、ブラウザやテスト環境でAPIリクエストを横取りして、指定したレスポンスを返せます。

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/reservations", () => {
    return HttpResponse.json([
      { id: "rsv_001", title: "初回相談" },
      { id: "rsv_002", title: "定例ミーティング" },
    ]);
  }),
];

画面側は本物のAPIを呼んでいるつもりで fetch を書けます。

async function fetchReservations() {
  const response = await fetch("/api/reservations");
  return response.json();
}

失敗パターンも用意する

成功だけでなく、0件やエラーも作ります。

export const emptyHandlers = [
  http.get("/api/reservations", () => {
    return HttpResponse.json([]);
  }),
];

export const errorHandlers = [
  http.get("/api/reservations", () => {
    return HttpResponse.json(
      { message: "予約一覧を取得できませんでした" },
      { status: 500 },
    );
  }),
];

これで、画面の状態を切り替えながら確認できます。

Storybookやテストと相性がよい

MSWは、StorybookやTesting Libraryと組み合わせると便利です。

たとえば、予約一覧コンポーネントに対して、成功時、0件時、エラー時の表示をテストできます。

test("エラー時にメッセージを表示する", async () => {
  server.use(...errorHandlers);

  render(<ReservationList />);

  expect(await screen.findByText("予約一覧を取得できませんでした")).toBeInTheDocument();
});

本物のAPIに依存しないので、画面の分岐を落ち着いて確認できます。

まとめ

APIモックは、APIがないときだけの仮置きではありません。

成功、0件、エラー、権限なし、遅延など、業務画面で起きる状態を手元で再現するための道具です。失敗時のUIを作るときほど、モックがあると助かります。

参考