ダミーデータ作成ツールを作ってみた

作ったもの

Dummy Data Generator

• URL: https://dummy-data-generator.pages.dev/
• GitHub: https://github.com/n4k4y05h1/dummy-data-generator

主な機能

• ログイン不要: ブラウザでアクセスするだけですぐ使える
• 階層構造対応: オブジェクトの中にオブジェクト、配列の中にオブジェクト...みたいな複雑な構造も設定可能
• 直感的な操作: ドラッグ&ドロップでフィールドの並び替えが可能
• リアルタイムプレビュー: 生成される予定のデータをその場で確認
• データ定義の自動作成: JSON/YAML形式で設定をアップロードすると、データ定義を自動で作成

なぜ作ったのか

モックアップ用のダミーデータが必要になりました。AIで生成してもいいのですが、何度か作り直すことを考えると、手軽に編集できるUIが欲しくなりました。

既存のダミーデータ作成サイトも調べてみたのですが、特に下記のような階層構造のJSONを作るという点で、しっくりくるものが見つかりませんでした。（単に使い方が分からなかった可能性もありますが...）。

{
  "user": {
    "name": "Tanaka Taro",
    "email": "[e-mail]"
  },
  "metadata": {
    "created_at": "2024-08-10",
    "tags": ["test", "sample"]
  }
}

それならUIもAIに作ってもらおう！ということで、作ってみることにしました。

既存サービスの調査

まず、どんなサービスがあるのかChatGPTとClaude Desktopに調べてもらい、実際にいくつか試してみました。
実際に調査したサービスの比較表の一部がこちらです。

サービス	階層構造対応	ログイン要否	料金	特徴
Mockaroo	○（要ログイン）	高機能は要	無料枠あり	最も高機能、API対応
generatedata.com	△（限定的）	データ保存には要	無料	オープンソース、多言語対応
RNDGen	△（不明確）	不要	無料	AI機能あり、シンプル
testdata.userlocal.jp	✗	不要	無料	日本語特化、個人情報系

各サービスの詳細

Mockaroo (https://www.mockaroo.com/)

• 最も有名で高機能なダミーデータ生成サービス
• 階層構造やMock API機能があるが、これらの高度な機能にはアカウント登録とログインが必要
• 無料プランは1日200リクエスト、1,000行まで

generatedata.com (https://generatedata.com/)

• オープンソースプロジェクト
• 基本的なデータ生成は可能だが、複雑な階層構造の設定は限定的
• データセットの保存にはアカウント登録が必要

RNDGen (https://www.rndgen.com/data-generator)

• 比較的新しいサービス
• AI機能を謳っているが、階層構造への対応は明確でない
• シンプルなインターフェースが特徴

testdata.userlocal.jp (https://testdata.userlocal.jp/)

• 日本の個人情報に特化したダミーデータ生成
• 氏名、住所、電話番号などの日本語データが充実
• 階層構造には非対応、フラットなデータのみ

どれも素晴らしいサービスですが、「階層構造を手軽に作りたい」という自分のニーズにはマッチしませんでした。

作りたい機能を整理

既存サービスの調査を踏まえて、どうせ作るなら、こんな機能があったらいいなと思った機能をChatGPTとClaude Desktopでディスカッションして決めました。
このとき、画面レイアウトとかもざっくり決めました。

• 階層構造対応: ネストしたオブジェクトや配列を自由に定義したい
• フロントエンドのみ: 特に、個人プロジェクトなので、あまりお金をかけたくなかったので、フロントエンド（静的ファイル）のみで実現させる方針
• ログイン不要: コスト・複雑性にも関係しますが、認証機能をつけたくなかった
• 設定の再利用: DBを持たないので、jsonファイルをインポートすることでデータを自動生成（再利用）できる仕組みで代替することにしました

技術スタックの決定

つくりたい機能や画面イメージがまとまったので、次に要件を満たすシステム構成を考えました。
コスト重視で無料枠の多そうなCloudflareを使うことにしました。

• Next.js
• Faker.js（ダミーデータ生成）
• Cloudflare Pages

実装フェーズ

GitHub CopilotとGemini CLIを使い、以下のフローで進めました。

1. タスク分解: 要件を伝えて、必要なタスク一覧を作ってもらいました
2. タスク消化: 分解したタスクを実施
3. コミット: １つのタスクが完了したら、手動でテストをして問題なければコミット

UIの見た目や使い勝手は、人の感覚や判断が必要なので、テストは手動で実施しました。

それと、GitHub CopilotとGemini 2.5 Proの無料枠を使い果たしてしまい、Gemini 2.5 flashを使ったので、難易度によってモデルを切り替えて使えばよかったと思いました。

デプロイ

GitHubとCloudflare Pagesを連携したので、GitHubにpushするだけで、Pages側が自動ビルド＆デプロイします。

Cloudflare公式の動画と同じ手順です。

実際に作ってみて

今回作ったものは無料枠でできました。費用が掛かったのはPCの電気代とかです。
今後は、データ間の関連性設定やよく使うパターンのテンプレート化など追加してみたいと思います。gpt-ossとかを使ってみようと思います。

今回使用した主なもの

• AI支援: ChatGPT, Claude Desktop, GitHub Copilot, Gemini CLI
• ホスティングサービス: Cloudflare Pages
• ソース管理: GitHub
• ドメイン: Cloudflare Pagesで提供されるサブドメイン
• エディタ: VS Code