APIレスポンス用のダミーJSONを生成する
機密情報を含まないJSONサンプルから、項目規則・件数・Seed・出力形式を指定してBrowser内でモックデータを生成できます。
結論：API仕様をSource of TruthにしてMock Responseを作る
PathやStatusを独自に決めるのではなく、API仕様からResponse Bodyの型を抜き出し、通常・空・ErrorのFixtureを作ります。FrontendはMockと実APIを同じInterface越しに扱い、切替箇所を限定します。
Frontendだけで独自Mockを育てると、Backend完成時に型・null・Pagination形式が合わなくなります。契約変更をMockへ同期してください。
Backend完成前の分担
| 成果物 | 担当 | 確認 |
|---|---|---|
| API契約 | Frontend・Backend共同 | 型、必須、Status |
| Mock JSON | Frontendで利用 | 契約と一致 |
| Request Intercept | MSW等 | Path、Method、Status |
| 実API | Backend | 同じContract Testを通す |
Frontendを先行実装する手順
- 1. Endpointごとの成功・空・Error Responseを合意します。
- 2. 個人情報を含まない1件のJSON例を作ります。
- 3. 必要件数を生成しFixtureとして保存します。
- 4. Data取得層をMockへ差し替えてUIを実装します。
- 5. Backend完成後にContract Testを通し実APIへ切り替えます。
先行確認するUI状態
| 確認対象 | 用意するケース | 確認内容 |
|---|---|---|
| Loading | 遅延はMSW側で設定 | Skeleton・二重送信 |
| Success | 通常Response | 基本表示 |
| Empty | 空配列・0件 | Empty State |
| Error | Error BodyとStatus | 再試行・案内 |
DevelopToolsは遅延やHTTP Statusを設定しません。生成したBodyと、MSW等のNetwork Mock設定を分けて管理します。
実APIへの切替を簡単にする
UI Componentへ直接FixtureをImportし続けず、RepositoryやFetcherの境界でMockを差し替えます。型定義、OpenAPI、JSON Schemaのいずれかを契約として共有すると差分を検出しやすくなります。
APIモックデータ生成ツールでできること・できないこと
| 項目 | 現在の対応 | 補足 |
|---|---|---|
| 入力 | JSONの貼り付け・.jsonファイル・5種類のプリセット | OpenAPI／JSON Schemaの直接入力は未対応 |
| 出力 | 単体・配列・固定形式のページネーションJSON | HTTP EndpointやMock Serverは起動しない |
| 件数 | 1～10,000件 | 配列要素数は0～100。出力Byte数の上限はない |
| 値 | 連番、UUID、氏名、Email、URL、IP、数値、Boolean、日付・日時、enum、null等 | 項目名とサンプル値による推定はHeuristic |
| 再現性 | 文字列Seedと同じ設定による再生成 | Generator実装を変更すると将来の値が変わる可能性がある |
| Locale | 日本語・英語 | 内蔵辞書を使用し、Faker Libraryは読み込まない |
| Edge Case | null確率、空配列、固定値、数値範囲 | Optional項目の出現確率や専用Boundary Scenarioは未対応 |
| 保存 | Copy・UTF-8 JSON Download | 入力と生成結果をServerへ送信しない |
生成するのはAPI Responseへ利用できるJSONデータです。RequestをInterceptするMSW Handler、HTTP Status、Header、遅延、Endpoint自体は別の開発環境で設定します。
一次資料と実装を照合する
- Faker: Usage and reproducible results
- Faker: Localization
- Mock Service Worker
- Storybook: Mocking network requests
- OpenAPI Specification 3.2.0
- JSON Schema Draft 2020-12
Faker、MSW、Storybook、OpenAPI、JSON Schemaの仕様は更新されます。記事の例をそのまま固定せず、利用中のVersionと公式資料を確認してください。DevelopToolsの生成器はFakerやMSWを内蔵せず、Browser内の独自Seed乱数と内蔵辞書でJSONを生成します。
具体例：商品一覧をBackendより先に作る
Productのid、name、price、stockを合意し、通常20件と空配列を用意します。
Error Bodyは別Fixtureにし、HTTP 500の設定はMSW Handler側へ書きます。
- Response型を合意する
- 通常・空・Errorを生成する
- MSW等へ組み込む
- 実APIで同じUI Testを再実行する
Mockだけに存在するPropertyをUIで使わないよう、結合前にResponse差分を確認します。
よくある質問
- Mock Serverも必要ですか？
- 単純なComponentへDataを渡すだけならFixtureで十分です。実際のfetch処理も試す場合はMSW等を組み合わせます。
- Mockを本番へ残してよいですか？
- Development/Test限定にし、本番Bundleや切替条件へ混入しないよう構成を分けてください。