モック JSON ジェネレーター

モック JSON ジェネレーターとは？#

もっともらしいテストデータは、すべてのプロトタイプで退屈なボトルネックです。500 行でテーブルがどう描画されるか、変なメールアドレスでフォームがどう振る舞うか、数値が 3 桁の幅にわたるときチャートがどう見えるかを見たい——それなのに、本物のデータはプライベートで使えないため、午後を費やして何度も {"name":"test","email":"[email protected]"} と打ち込むことになります。

モック JSON ジェネレーターはその隙間を埋めます。必要なオブジェクトの形——いくつかのフィールド型、あるいはプレースホルダー付きテンプレート——を記述すると、要求しただけの行を、それぞれ異なり、実在の人物ではないものとして合成します。出力は、フィクスチャファイル、デモデータベース、fetch のモックにそのまま落とせる JSON 配列です。

このページは 2 つの方法で生成します。フィールド選択モードは、よくあるフィールド（氏名、メール、電話、UUID、日付、会社など）のメニューをオン/オフで選べます。各行がそれらのフィールドを持つオブジェクトになります。テンプレートモードは、{{faker.path}} プレースホルダーを持つ JSON の骨組みを書けるようにし、キー名と入れ子を完全に制御できます。出力は JSON または CSV でダウンロードでき、ロケール対応データにも対応しているため、デモの相手先に応じた自然な名前になります。

使い方#

1. ツールバーの切り替えでモードを選びます:
   • フィールド選択（既定）: 左にフィールド型のチェックリストが現れます。各行に入れたいものにチェックを入れます——例えば氏名、メール、UUID。各フィールドには固定の既定キー（name、email、uuid）があります。
   • テンプレート: 代わりにテキストエリアが現れます。文字列の葉に {{person.fullName}} や {{internet.email}} のようなプレースホルダーを持つ JSON オブジェクト（または配列）を書きます。
2. 件数を設定します——0 から 1000 まで、生成する行数です。
3. 言語を選んで、生成される氏名・都市・電話番号の味付けを変えます。英語から 中文、日本語、한국어、العربية まで 10 のロケールが用意されています。
4. 生成をクリックします。右ペインに、合成された行の整形済み JSON 配列が現れます。
5. 出力の下のJSON をダウンロードまたはCSV をダウンロードをクリックして、結果をファイルとして保存します（CSV はスプレッドシートへの読み込みや、インポートによるデータベースのシードに便利です）。
6. サンプルで初期テンプレートを読み込むか、クリアでリセットします。

重い生成ライブラリは、最初に生成をクリックしたときにだけ読み込まれるため、ページは瞬時に開きます。生成は完全にブラウザ内で走ります。

主な特徴#

• 2 つの作成スタイル。 手早く始めるにはフィールドを選び、カスタムキーや入れ子、リテラルテキストと生成値の混在が必要な場合はテンプレートを書きます。
• 14 のプリセットフィールド。 氏名、役職、メール、ユーザー名、電話、UUID、最近の日付、市、国、会社、URL、段落、色名——デモレコードのよくある構成要素です。
• ロケール対応の値。 ロケールを切り替えると、人物や位置のデータがそれに従います——デモをローカルに見せる必要があるときに有用です。
• テンプレートのプレースホルダーは型を保つ。 文字列の葉の値全体であるプレースホルダーは、ネイティブ型に解決されます——だから {{date.recent}} はクォート付きの断片ではなく、実際の ISO 日付文字列になります。
• 最大 1000 行。 ページ付けされたテーブルや代表的なフィクスチャを埋めるには十分で、タブを圧倒しません。
• JSON と CSV のエクスポート。 一度生成すれば、消費側が JSON フィクスチャでもスプレッドシートのインポートでも、どちらにも書き出せます。
• ローカルのみ。 データはブラウザ内で合成され、テンプレートや出力に関する何もページから外に出ません。

実例#

デモ用に、氏名・メール・一意 ID を持つ 10 件のユーザーレコードが必要です。フィールド選択モードのまま、氏名、メール、UUID 以外のチェックをすべて外し、件数を 10 にして生成をクリックします。出力は JSON 配列で、先頭の数行は次のような見た目です:

[
  {
    "name": "Sara Schultz",
    "email": "[email protected]",
    "uuid": "f3a1c2b4-9d8e-4a7b-bc6e-1f2d3a4b5c6d"
  },
  {
    "name": "Derrick Watsica",
    "email": "[email protected]",
    "uuid": "b7e6d5c4-a3b2-4987-8d6e-5c4b3a2f1e09"
  }
]

行ごとに異なり、どのアドレスも実際の受信箱ではなく、UUID は一意です。プリセットでは表現できないカスタムの形——例えばリテラルの役割と生成フィールドを混ぜたレコード——が必要なら、テンプレートモードに切り替えて次のように書きます:

{
  "id": "{{string.uuid}}",
  "name": "{{person.fullName}}",
  "role": "member",
  "email": "{{internet.email}}"
}

role フィールドはリテラルテキストなので、すべての行で "member" と読まれます。残りの 3 つは行ごとに新たに合成された値に解決されます。件数を必要な分に設定してエクスポートしてください。

よくある質問#

メールアドレスは送信できる実際の受信箱ですか？#

いいえ。すべての値は合成されたものです——氏名はもっともらしい組み合わせ、メールアドレスは現実的な形に従いますが、誰にも届きません。それがポイントです。本物のメールボックスに触れることなく、レイアウト・検証・ソートのテスト用に、本番データのように見えるデータを得られます。

データを特定の国にローカルに見せられますか？#

はい。言語セレクターが、氏名・都市・電話番号の生成方法を変えます。中文（简体）を選べば氏名は中国語になり、日本語を選べば日本語の氏名になります。これは、デモがその対象者に本物らしく感じられる必要があるときに重要です。

テンプレートモードで、{{date.recent}} が日付のロジックを囲むクォートなしの ISO 文字列として現れるのはなぜですか？#

プレースホルダーが文字列の葉の値の全体であるとき、テキストとして補間されるのではなく、ジェネレーターのネイティブな戻り値に解決されます。最近日付の呼び出しは実際の date オブジェクトを返し、それが JSON 出力では ISO 文字列としてシリアライズされます。代わりに周囲のテキストの中に埋め込みたい場合は、前後にリテラル文字を置いてください——"shipped on {{date.recent}}"——すれば文の中に文字列化されます。

一度に何行まで生成できますか？#

最大 1000 行です。ページ付けされたテーブルを埋めるには十分ですし、フィクスチャファイルを用意したり、CSV インポートでテストデータベースをシードするのにも十分です。それ以上は、バッチで生成するか、専用のデータベースシーダーを使ってください。

生成されたデータは再現可能ですか？#

生成のクリックごとに、新しいランダムセットが生成されます——それは UI のエッジケースを探すときに望む挙動です。値はこのページではシードに固定されないため、特定の出力を後でバイト単位で再現できるものとして扱わないでください。特定のデータセットを正確に再現する必要がある場合は、出力をフィクスチャファイルに保存してください。