モック (MSW)（モック）
API テストの応答を模擬する技術。Mock Service Worker (MSW)/nock/sinon が主流、2025-2026年は MSW 2.7+ で Service Worker ベースの統一モック標準化。
概要
モック (Mock) は実際の API・関数・サービスの応答を模擬 (シミュレート) してテスト・開発を行う技術。実 API への依存を排除し、テストの ① 高速化 ② 決定性 ③ オフライン実行 ④ エラーケース再現を可能にする。1999年 Tim Mackinnon の「Endo-Testing: Unit Testing with Mock Objects」論文で概念確立、Mockito (Java、2008-)、Sinon.js (JS、2010-)、unittest.mock (Python、2012-) で各言語標準化が進んだ。
2026年4月時点のフロントエンド標準は Mock Service Worker (MSW) で、世界 GitHub Stars 17,500+。Service Worker API を活用しブラウザ・Node.js 両環境で動作、fetch/axios/XMLHttpRequest 全てを統一インターセプト可能。Node.js 環境では nock (8,500 Stars)、sinon (3,800 Stars) が伝統的だが、MSW Node (msw/node) が急速にシェア奪取中。
2025-2026年最大トレンドは ① MSW 2.7+ で Vitest 統合強化 (2024-12 公開、Vitest setup file 1行で完了)、② OpenAPI スキーマ→自動モック生成 (msw-auto-mock、prism)、③ AI モック生成 (Cursor/Claude Code で fetch コードからモック自動生成)、④ GraphQL+REST 統一インターフェース (MSW v2 で graphql 完全対応)、⑤ 本番障害シミュレーション (Chaos Engineering for Frontend、ランダムエラー注入)。
主な特徴・仕組み
- モック種別: Stub (固定応答)、Mock (呼出記録+応答)、Fake (簡易実装)、Spy (呼出のみ記録)、Dummy (空)
- MSW 動作原理: Service Worker が fetch を intercept、テストコードでハンドラ登録、ブラウザ実環境で透過的応答
- Node.js 利用 (MSW): msw/node でテスト実行時に fetch を傍受、Vitest/Jest テストで活用
- 対応プロトコル: REST (HTTP)、GraphQL、WebSocket (MSW 2.4+ 対応)、Server-Sent Events
- ハンドラ定義:
http.get('/api/users', () => HttpResponse.json([...]))のように TypeScript で型安全 - 遅延シミュレーション:
delay(500)で 500ms 遅延、タイムアウトエラー再現可 - エラー再現:
HttpResponse.error()でネットワークエラー、new HttpResponse(null, { status: 500 })で 500 エラー - OpenAPI 連携:
msw-auto-mockで OpenAPI 3.0 スキーマ → 自動ハンドラ生成 - GraphQL:
graphql.query('GetUsers', ...)で query/mutation/subscription 全対応 - デバッグ: MSW DevTools (Chrome 拡張)、msw runtime logger
主要モックライブラリ比較表（2026年4月）
| ライブラリ | 言語 | Stars | 強み | 弱み |
|---|---|---|---|---|
| MSW (Mock Service Worker) | TS/JS | 17,500 | ブラウザ+Node 統一、業界標準 | 学習コスト中 |
| nock | Node.js | 8,500 | Node 特化、軽量 | ブラウザ非対応 |
| sinon | JS | 3,800 | スパイ・スタブ統合 | API 古い |
| Vitest Mock | TS/JS (Vitest) | (Vitest 内蔵) | Vitest 統合最強 | Vitest 依存 |
| Jest Mock | JS (Jest) | (Jest 内蔵) | Jest 標準 | 機能限定 |
| Mockito | Java | 16,000 | Java 業界標準 | Java 限定 |
| pytest-mock | Python | 1,800 | pytest 統合 | Python 限定 |
| WireMock | Java/Standalone | 6,500 | プロキシモック、超大規模 | 設定複雑 |
| Mirage JS | JS | 3,500 | フロント統合 | MSW に押される |
| json-server | Node | 73,000 | 簡易モック API | 機能限定 |
自作PC でのモック環境構築
フロント開発+テスト+モック開発の自作PC：
- CPU: Ryzen 7 7700X (¥48,800) — Vitest+MSW+VS Code+Browser+Node 並列
- メモリ: DDR5-5600 32GB (¥24,800) — node_modules×複数案件で 200GB+消費
- ストレージ: NVMe Gen4 SSD 1TB (¥18,800)
- エディタ: VS Code (無料) または Cursor ($20/月) で AI 補完
- テスト FW: Vitest 4 (高速、ESM 標準) または Jest 30 (既存)
- MSW 学習: 公式チュートリアル (mswjs.io) 無料、書籍『Testing JavaScript Applications』推奨
- AI 補助: Claude Code ($20-200/月) で「fetch ロジック→ MSW ハンドラ自動生成」可
モックの実装パターン
MSW 2.7+ では http.get(URL, handler) および http.post(URL, handler) で REST ハンドラを定義する。HttpResponse.json(data) で JSON 応答、new HttpResponse(null, { status: 500 }) でエラー応答、delay(100) で遅延シミュレーション可。詳細はコードサンプル ref msw-2.7-rest-handler 参照。
モックと類似技術の違い
- モック vs スタブ: スタブは固定応答のみ、モックは呼出記録+応答
- モック vs スパイ: スパイは呼出記録のみ、モックは応答も提供
- モック vs フェイク: フェイクは簡易実装 (in-memory DB)、モックは記録+応答
- モック vs プロキシ: プロキシは中継、モックは置換
よくある質問（FAQ）
Q1: 2026年新規プロジェクトでの推奨は？ A: TS/JS なら MSW 2.7+ が圧倒的標準。ブラウザ・Node・E2E テスト全環境で統一API、TypeScript 型安全、Vitest 統合最強。Jest+Mock Service Worker、Cypress+MSW 等の組合せで品質保証完結、月¥0 OSS で運用可。
Q2: AI モック生成はどこまで実用的？ A: 革命的。Cursor / Claude Code で fetch コード → MSW ハンドラ自動生成 (3-5秒)、OpenAPI スキーマからの自動生成 (msw-auto-mock) も標準化。手動モック作成 30分→ 30秒、テスト網羅率 +30-50% 向上、月¥3,000 (Cursor Pro) で投資対効果絶大。
Q3: 本番 API 障害時のモック切替えは？ A: 可能。MSW を Production Build に含める (本番デプロイ可能) パターンで、API 障害時に自動 fallback。ただしコスト+セキュリティリスクあるため、通常は Service Worker キャッシュ+ローカル UI フォールバックが現実的。緊急時のみ手動 MSW 有効化。
まとめ
- モック = API/関数応答の模擬、Tim Mackinnon (1999) 概念確立
- 主要は MSW (TS/JS フロント+Node 統一)/nock/sinon/Mockito/pytest-mock
- 2025-2026年は MSW 2.7+ Vitest 統合+OpenAPI 自動生成+AI 補助で生産性激増
- 自作PC は Ryzen 7+32GB+VS Code+Vitest+MSW で月¥0-300 開発環境完結