Mock Data Builder
JSON テンプレートからプレースホルダーで模擬レコードを一括生成。シード固定と MSW / json-server 用スニペット対応。
プレースホルダー
{{index}}{{int 1 100}}{{float 0 1 2}}{{bool}}{{uuid}}{{name}}{{firstName}}{{lastName}}{{email}}{{word}}{{sentence}}{{pick a b c}}{{date}}{{phone}}{{url}}{{city}}{{country}}{{company}} プレースホルダーは引用符なしで書きます。例: "score": {{int 1 100}}。引用符内の文字列にあるプレースホルダーはその場で埋められます。
同じシードなら同じデータ。空欄のときは実行ごとに新しい乱数になります。
このタブは JSON テキストを生成するだけです。モックサーバーの起動もリクエスト送信も行いません。結果をコピーして自分のモック層に貼り付けてください。
使い方
- 左のパネルにレコード 1 件分の JSON テンプレートを書きます。プレースホルダーは引用符なしで、例:
"score": {{int 1 100}}。 - 件数に欲しい行数を指定します（1〜1000）。
- 次回も同じデータが欲しい場合はシードを入力します。空欄なら実行ごとに新しい乱数になります。
- 生成を押すと、プレースホルダーを埋めて解析し、JSON 配列を出力します。
- 配列をコピーするか、スニペットを MSW / json-server / JS モジュールに切り替えて、生成したレコード入りの設定コードをコピーします。json-server 側はコメントを含まない妥当な JSON です。
引用符内の文字列に書いたプレースホルダーはその場で埋められるため、"こんにちは {{name}}" も使えます。
よくある用途
- エンドポイントが無いまま一覧画面を埋める —— 連番 id 付きのユーザーを 50 件生成してフィクスチャに貼り付け。
- 再現可能なバグ報告 —— シードを issue に書けば、誰でも同じペイロードを再生成できます。
- 表の負荷を試す —— 件数を 500 や 1000 にして、長いリストでの挙動を確認。
- MSW に接続する —— スニペットを MSW に切り替え、入力したパス入りのハンドラをモック設定へ。
よくある質問
Q: モックサーバーを起動したり fetch を傍受しますか？ A: いいえ。ローカルでモックデータを生成し、JSON テキストとスニペットを出力するだけです。サーバーの起動もリクエストの傍受・送信も行いません。
Q: テンプレートを配列にするとどうなりますか？ A: 配列として解析し、先頭の要素をレコードのテンプレートとして使います。サンプルからまるごと貼り付けたテンプレートでも、指定した件数で生成できます。
Q: 未知のプレースホルダーが null になるのはなぜ？ A: 認識できないプレースホルダーには妥当な値を入れられないため null とし、実行全体を失敗させる代わりに名前をステータス行に一覧表示します。
データはこのデバイス内にとどまります
Mock Data Builder は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。