フロントエンド開発において、ネットワーク請求のデバッグは頻繁に行われる作業です。従来の方法では、モックデータを返すためにソースコードを直接編集し、実際の API 呼び出しをコメントアウトするケースが多く見られます。しかし、このアプローチはコードの修正と戻しを繰り返す必要があり、開発フローを阻害する要因となります。
ここでは、ブラウザの標準機能を用いて、コードを変更せずに API のレスポンス内容を介入・書き換えする効率的な手法について解説します。
DevTools によるレスポンス介入の仕組み
現代のブラウザ開発者ツールには、ネットワーク通信の内容をローカルファイルと置き換える「Overrides」機能が搭載されています。これを利用することで、サーバーからの応答を任意の JSON データに差し替えることが可能です。
実装手順
- ブラウザで F12 を押し、DevTools を開きます。
- Network タブを選択し、Disable cache にチェックを入れます（キャッシュの影響を排除するため）。
- 対象のページ遷移やアクションを行い、該当の API 請求を発生させます。
- Network リストから対象のエンドポイント（例：
getFormData）を探し出します。 - 該当請求を右クリックし、Override content を選択します。
- 初回実行時は保存先のフォルダを指定する必要があるため、プロジェクトのルートディレクトリなどを設定して許可します。
- エディタが開くので、用意したモック用 JSON データを貼り付けて保存します。
- ページをリロードまたは再度アクションを実行すると、書き換えたデータが返却されます。
モックデータの例
以下は、フォーム設定情報を模倣した JSON 構造の例です。実際のプロジェクト構造に合わせてキー名や値を調整してください。
{
"status": "ok",
"payload": {
"schema": {
"type": "dynamic_form",
"version": "3.0",
"components": [
{
"kind": "text_input",
"uid": "inp_001",
"props": {
"label": "氏名",
"required": true,
"placeholder": "入力してください",
"width": "100%"
}
},
{
"kind": "select_box",
"uid": "sel_002",
"props": {
"label": "所属部署",
"options": [
{ "label": "営業部", "val": "sales" },
{ "label": "開発部", "val": "dev" }
]
}
},
{
"kind": "submit_action",
"uid": "btn_003",
"props": {
"label": "送信",
"actionType": "commit"
}
}
],
"settings": {
"layout": "vertical",
"submitAction": "postForm"
}
},
"initialValues": {
"inp_001": "山田太郎",
"sel_002": "dev"
}
}
}従来のコード修正との比較
本手法を採用しない場合、通常は以下のように関数内部に条件分岐やハードコーディングを追加することになります。
async function retrieveFormSchema() {
try {
// 開発環境向けの擬似データ注入
const isDebugMode = true;
if (isDebugMode) {
const dummyPayload = { /* 上記 JSON の payload 部分 */ };
return Promise.resolve(dummyPayload);
}
// 本来の API 通信処理
const response = await fetch('/api/form/config');
return await response.json();
} catch (error) {
console.error('Form load failed', error);
throw error;
}
}コード内にモック処理を埋め込む場合、テスト終了後に該当箇所を特定して削除する手間が発生します。また、誤ってコミットしてしまうリスクも存在します。一方、DevTools の Override 機能を用いれば、ローカル環境完結で通信内容を制御できるため、ソースコードの汚染を防ぎつつ迅速な検証が可能となります。