モックデータとは何ですか？なぜ開発者はそれを使うのですか？

モックデータ（フェイクデータまたはダミーデータとも呼ばれる）は、テスト、プロトタイピング、開発に使用されるリアルに見えるが完全に作り物のデータです。開発者はプライバシーの問題を避け、データベースを手動でシードする手間を省きながらアプリを構築・テストできます。

生成されたデータを本番環境で使用しても安全ですか？

いいえ。モックデータは開発・テスト専用です。すべての名前、メールアドレス、電話番号、住所はランダムに生成された完全な作り物です。本番環境でフェイクデータを使用すると、アプリに実ユーザーや有効なレコードがないことになります。

生成されるフィールドをカスタマイズできますか？

はい。チェックボックスで必要なフィールドを選択できます。名前とメールアドレスだけ、または住所・会社名・職種を含む完全なプロフィールも可能です。選択したフィールドのみが含まれます。

どの出力形式がサポートされていますか？

ジェネレーターはJSON（オブジェクトの配列）、CSV（ヘッダー付き）、SQLのINSERT文をデータベースに直接貼り付けられる形式で出力します。各形式はクリップボードへのコピーまたはファイルとしてのダウンロードが可能です。

データはブラウザの外に出ますか？

いいえ。すべてのデータはJavaScriptを使用してブラウザ内でローカルに生成されます。サーバーには何も送信されません。そのため、リアルに見えるデータ形状が必要な内部プロジェクトでも安全に使用できます。

モックデータ生成ツール — テストとプロトタイプ用の偽JSON・CSV・SQLを即座に生成

こんな場面を想像してください：きれいな新しいReactダッシュボードを組み立て終えました。デザインも完成し、コンポーネントも繋がっています。アプリを開くと…空のテーブル、スケルトンローダー、そしてまったく同じオブジェクトを12回コピーしたせいで全行に「山田太郎」と表示されている虚空が広がっています。

誰でも経験したことがあるでしょう。ダミーデータを手書きするのは2分の作業に見えて、なぜか午後の半分を食いつぶします。{ id: 1, name: "Alice" } から始めて、メールアドレスも必要だと気づきます。次に電話番号。次に会社名。少なくとも20行は必要でページネーションが機能するかテストしたい。そして同僚から「なぜすべてのユーザーが '1-2-3 メインストリート' に住んでいるのか」と聞かれ、自分でその住所を入力したことを白状することになります。

より良い方法があります。モックデータ生成ツールは、設定不要でリアルで多様な偽データセットを数秒で生成します。

手書きのテストデータが罠である理由

手作りのダミーデータの問題は時間がかかることだけではなく、完璧すぎることです。手書きでは入力しやすい清潔で均一な予測可能な値を使います。すべての名前が聞き慣れたもので、すべてのメールアドレスが同じパターンに従い、すべての文字列がほぼ同じ長さです。

実際のデータは乱雑です。名前にはハイフンやアクセントや珍しい大文字化があります。メールアドレスには数字があります。会社名には句読点があります。整然としたダミーデータだけでテストしていると、本番環境で整理されたテストフィクスチャでは決して露見しなかったバグを発見します。

良いモックデータは：

多様である — 長さ、パターン、文化的出自が異なる
十分な量がある — ページネーション、フィルタリング、ソートのストレステストに十分な行数
オンデマンドで再生成可能 — スキーマが変わっても再生成できる
フォーマット柔軟 — JavaScriptにはJSON、スプレッドシートにはCSV、データベースにはSQL

このツールはまさにそれを提供します。

ユースケース：いつモックデータが必要か？

UIプロトタイプ作成

ユーザー管理テーブル、連絡先リスト、リーダーボードをデザインしています。さまざまなデータ密度でレイアウトがどう動作するかを確認するためにリアルに見える行が必要です。会社名が30文字のときテーブルがオーバーフローしますか？アバターカラムがグリッドを崩しますか？実ユーザーが存在する前に分かることが必要で、すぐに必要です。

データベースシーディング

ローカル開発データベースが空です。空の状態の画面やゼロレコードの場合にしか発生しないエッジケースのループを繰り返しています。50〜100行のモックデータでシーディングすると、開発環境が実際のアプリケーションのように動作します。SQL出力モードで、データベースクライアントや移行スクリプトにINSERT文を直接貼り付けられます。

APIモッキングとコントラクトテスト

バックエンドAPIの準備ができる前にフロントエンドを構築しています。永遠に { "name": "test" } を繰り返すのではなく、実際のシステムから来るように見えるリアルなJSONを返すモックサーバーが必要です。JSON出力をエクスポートし、フィクスチャファイルやMSW（Mock Service Worker）のようなツールに渡すと、UIの開発を独立して進められます。

デモとプレゼンテーション

製品デモを録画したり、プレゼンテーションをしています。「John Doe / john@example.com」が10回繰り返されているテーブルほど磨かれた製品の印象を壊すものはありません。モックデータ生成ツールで数秒で、実際に使われているアプリのような画面が作れます。

モックデータ生成ツールの使い方

モックデータ生成ツールを開くと、3つの主要コントロールが表示されます。

1. フィールドの選択

チェックボックスで含めるフィールドを選択します。利用可能なフィールド：

id — 1から始まる連番整数
firstName / lastName — 国際的な名前プールから抽出
email — 名/姓から派生し、ランダムな2桁のサフィックスと @example.com
phone — US形式：+1-XXX-XXX-XXXX
company — 架空の会社名リストから
jobTitle — リアルな職種名（ソフトウェアエンジニア、プロダクトマネージャーなど）
address — 番地 + 通り名 + 種別（St、Ave、Blvdなど）
city / country — 15の主要世界都市/国からペアで
zipCode — ランダムな5桁コード
birthDate — 1944年から2006年の間の日付
avatar — メールハッシュに基づくGravatar形式のURL
isActive — ブール値、70%の確率でtrue
age — 18から80の整数

自由に組み合わせられます。id、firstName、lastName、email だけ必要なら、その4つにチェックするだけです。

2. 行数

数値入力で行数を設定します（1〜100）。デフォルトは10です。ページネーションとフィルタリングのテストには50か100に増やします。

3. 出力形式

3つの形式から選択：

JSON — オブジェクトの配列を返します。JavaScript/TypeScriptプロジェクトやAPIフィクスチャに最適。

CSV — ヘッダー行とデータ行を返します。ExcelやGoogleスプレッドシートで開く、データベースにインポート、またはスクリプトに渡します。

SQL — INSERT INTO users (...) VALUES (...) 文を返します。データベースクライアントに直接貼り付け可能。PostgreSQL、MySQL、SQLite、および標準INSERT構文をサポートする任意のSQLダイアレクトで動作します。

4. 生成・コピー・ダウンロード

生成をクリックして新しいランダムデータのバッチを作成します。コピー でクリップボードに取得するか、ダウンロード で .json、.csv、.sql ファイルとして保存。

出力形式の詳細

JSON

[
  {
    "id": 1,
    "firstName": "Amara",
    "lastName": "Rossi",
    "email": "amara.rossi74@example.com",
    "company": "NovaSoft"
  }
]

JSONはトップレベルが配列なので、変数に直接代入したり、フィクスチャファイルに使ったり、モックAPIから提供したりできます。

CSV

id,firstName,lastName,email,company
1,Amara,Rossi,amara.rossi74@example.com,NovaSoft

CSVはデータ交換の共通語です。PostgreSQLで COPY してインポート、pandasで読み込む、Googleスプレッドシートで開く。

SQL

INSERT INTO users (id, firstName, lastName, email, company) VALUES (1, 'Amara', 'Rossi', 'amara.rossi74@example.com', 'NovaSoft');

SQL出力は users テーブルを対象としています。テーブル名が異なる場合は、テキストエディタで検索と置換するだけで対応できます。

Faker.jsとブラウザツール：どちらを使うべきか

モックデータの最も一般的なライブラリベースのソリューションはFaker.jsです。優れたツールです。使い分けのガイド：

Faker.js（またはライブラリ）を使う場合：

モックデータ生成を自動テストスイートの一部にする必要がある
一度に100行以上が必要
ロケール固有のデータが必要（フランス語の住所、漢字の日本語名など）
CIパイプラインにモックデータ生成を統合する

このブラウザツールを使う場合：

何もインストールせずに今すぐデータが必要
プロジェクトにpackage.jsonすらない段階でプロトタイプを作っている
スクリプトを実行できないリモートまたは共有データベースをシードしたい
開発者でない同僚がテストデータを必要としている

両方のアプローチに役割があります。ブラウザツールには摩擦がゼロで — インストール不要、インポート不要、設定不要です。

ヒントとテクニック

avatarフィールドは本物のURL。 生成されたGravatar形式のURLは、任意の <img> タグでアイコンとして表示されます。

isActiveはソフトデリートのテストに使用。 isActive ブール値は70%の確率でtrueになっており、フィルタービュー（アクティブユーザーのみ、非アクティブユーザーなど）のテストに現実的な組み合わせを提供します。

設定変更なしで再生成。 生成ボタンは何も変更していなくても毎回クリックで新しいバッチを作成します。

ダウンロード + インポートのワークフロー。 データベースシーディングの最速ワークフロー：フィールド選択 → 行数100 → SQL選択 → ダウンロード → データベースクライアントで .sqlファイルを開く → 実行。完了。

まとめ

モックデータは常に必要なものですが、本当の時間を費やす正当性がないものです。モックデータ生成ツールは10分のタスクを10秒のタスクにします。フィールドを選択し、形式を選び、生成をクリックして、実際に重要な作業に戻りましょう。

JSONをフォーマットしたい場合はJSONフォーマッターへ。CSVをJavaScriptアプリが使える形式に変換したい場合はCSV→JSONが即座に対応します。

インストール不要。サインアップ不要。データはブラウザの外に出ません。オンデマンドでデータを提供するだけです。