Mock データ生成
ランダム JSON · テンプレートプレースホルダー · 一括生成
Mock データ生成
準備完了
ABOUT
Mock データ生成について
プレースホルダー付き JSON テンプレートを定義、ワンクリックで複数ランダムテストデータを生成。
フロントエンドはバックエンド進捗でブロックされるべきではありません。Mock ジェネレーターはテンプレートから構造正しい JSON を一括生成、リストページ、フォーム、チャートコンポーネントを実 API 完成前に開発・結合テスト・視覚検収可能にします。
DEEP DIVE
Mock データ生成を詳しく
フロントエンド開発はバックエンド API 未完成でしばしばブロックされます。Mock データジェネレーターは JSON テンプレートとプレースホルダー構文から、ランダムだが構造正しいテスト JSON を一括生成。JSONSort Mock ツールはローカル生成、文字列、数字、ブール、配列長などランダム化ルールに対応。
プレースホルダーは JSON 構造任意階層にネスト可能、1回定義で N レコード配列生成、Mock Server やコンポーネント props データソースとして直接使用。
プレースホルダー構文は JSON 文字列値内で有効、ジェネレーターはフィールド名セマンティクスでランダム戦略選択（name → 人名、email → メール形式など）。固定フィールドはプレースホルダー不要で各レコードに繰返、status、type など列挙定数に最適。
FEATURES
主な機能
テンプレートプレースホルダー
JSON テンプレート内でプレースホルダー構文を使用、ランダム値を生成。
一括生成
数量指定、1回で複数 Mock レコード配列を生成。
型ランダム
文字列、整数、浮動小数点、ブール、UUID、日付などランダム型。
構造保持
生成データはテンプレート定義 JSON 構造に厳密準拠。
即時プレビュー
テンプレートまたは数量変更後即座に再生成。
ローカル生成
Mock データはサーバーを経由せず、プロトタイプ段階でも安心使用。
一括件数
N 件を1回生成、ページング total データ量をシミュレート。
構造制約
出力はテンプレート JSON Schema 形状に厳密準拠、余分キーなし。
HOW TO USE
使用手順
-
1
JSON テンプレートを記述または貼り付け
-
2
生成数量を設定
-
3
Mock データ配列をコピー
-
4
サンプルデータボタンで入出力形式を素早く理解
-
5
結果をクリップボードにコピー、または他 JSONSort ツールと連携
WORKFLOW
典型的なワークフロー
データインポートから結果エクスポートまでの完全フロー。チームで Mock データ生成の使い方を統一。
テンプレート定義
JSON オブジェクトを1つ記述、文字列値を {{field}} プレースホルダーに変更。
数量設定
生成件数を指定、配列出力をプレビュー。
テンプレート微調整
UI 要件に応じフィールドとプレースホルダー型を調整。
fixtures エクスポート
src/mocks/ または MSW handler にコピー。
USE CASES
適用シーン
フロントエンド開発
UI 開発段階でリストページ、詳細ページ Mock データを生成。
テストエンジニア
境界テストデータ構築：空配列、超長文字列、特殊文字。
プロダクトデモ
Demo 環境に realistic 偽データを投入、空白ページを回避。
バックエンド開発
API ドキュメント例データ一括生成、Swagger 説明に埋め込み。
UI 開発
Storybook stories に20件リスト Mock データを投入。
負荷テスト
大量 JSON 生成でフロントエンド仮想スクロールとメモリ性能をテスト。
TIPS
使用のコツ
- 先に「コード生成」で実 API サンプルから構造取得、フィールドをプレースホルダーに変更して Mock テンプレート化。
- リストページ Mock は1回10-20件生成推奨、ページングとスクロールテストをカバー。
- プレースホルダー名が型を暗示、{{name}}、{{age}}、{{email}} など。
- 生成後フォーマットツールで構造確認、Mock Server にインポート。
- JSON フォーマット連携：Mock 出力 → フォーマット → プロジェクト fixtures ディレクトリにコピー。
- Mock データに実ユーザー PII を使用しない、ローカル開発でも。
- テンプレートは先にコード生成ツールで取得、値を {{placeholder}} に変更。
- id フィールドは {{uuid}} でリスト key 競合回避。
- 境界テスト：0件、1件、1000件生成で UI を個別検証。
- Mock データに fake_ プレフィックス追加、実データとの混同回避。
LOCAL VS ONLINE
ローカル vs オンラインツール
JSONSort は純フロントエンドアーキテクチャを堅持。以下の比較が、開発データ処理にローカルツールが適している理由を示します。
TROUBLESHOOTING
よくある誤解とトラブルシューティング
実際の使用で起こりやすい問題と推奨対処法。試行錯誤の時間を削減します。
プレースホルダー未置換
推奨：文字列値内の {{name}} である必要あり。非文字列は置換されません。
型が不正
推奨：数字フィールドにプレースホルダー使用時はテンプレートで文字列記述後処理、または固定数字。
配列構造不一致
推奨：テンプレートは単一構造定義、ジェネレーターが配列に包装。
PII コンプライアンス
推奨：Mock でも実名/携帯番号をテンプレートに使用しないでください。
FAQ
よくある質問
プレースホルダー構文は？
文字列値内で {{fieldName}} 形式を使用、ジェネレーターがランダム値に置換。
特定フィールドを固定できる？
プレースホルダーを使用しないフィールド値は各レコードでそのまま保持。
生成数量上限は？
ブラウザメモリに依存、通常数百レコードは問題なし。
ランダムシードは固定？
ページ更新ごとに再ランダム。固定 seed が必要なら生成結果を保存。
ネスト配列も Mock できる？
可能。ネストオブジェクト内でも同様にプレースホルダー文字列を使用。
データはサーバーにアップロードされる？
いいえ。JSONSort のすべてのツールはブラウザ内ローカルで動作し、入力内容はバックエンドサーバーに送信されません。
登録やインストールが必要？
不要です。ページを開くだけで使用でき、アカウント不要、クライアントダウンロード不要、PWA オフラインキャッシュにも対応。
どのくらいのファイルサイズに対応？
ブラウザメモリに依存しますが、通常数 MB 級のデータをスムーズに処理できます。超大ファイルは先に分割するかマージ・クリーンツールをご利用ください。