フロントエンド開発におけるデータ生成と API モックの戦略

フロントエンド開発において、バックエンド API の完成を待たずに作業を進めることは不可欠です。chance、faker、json-server、mockjs は、この課題を解決するための代表的なツールですが、それぞれのアプローチと適した場面が異なります。これらは大きく分けて「データの生成」と「API のモック」の 2 つのカテゴリに分類できます。

🎲 データ生成：chance vs faker vs mockjs

ランダムなデータを生成する際、どのライブラリを選ぶかは「再現性」と「データの豊富さ」のバランスで決まります。

chance は、シード値（seed）を用いた決定論的なデータ生成に強みがあります。テストで同じデータを繰り返し生成したい場合に有効です。

// chance: シード値を使用して再現性を確保
const Chance = require('chance');
const chance = new Chance(12345);

console.log(chance.name()); // 常に同じ名前が生成される
console.log(chance.email()); // 常に同じメールが生成される

faker（現在は @faker-js/faker）は、非常に豊富なデータタイプと多言語（ロケール）サポートを提供します。現実味のあるデータを大量に生成したい場合に最適です。

// faker: 豊富なデータとロケール対応
const { faker } = require('@faker-js/faker');

console.log(faker.person.fullName()); // 現実的な人名
console.log(faker.location.city()); // 都市名
faker.locale = 'ja'; // 日本語対応も可能

mockjs は、データ生成だけでなく、テンプレート構文を用いてデータ構造を定義する特徴があります。データ生成ルールを JSON like な構文で記述できます。

// mockjs: テンプレート構文でデータ定義
const Mock = require('mockjs');

const data = Mock.mock({
  'list|1-10': [{
    'id|+1': 1,
    'name': '@cname'
  }]
});

console.log(data.list); // 指定された構造のランダムデータ

🌐 API モック：json-server vs mockjs

API エンドポイント自体をモックする方法には、サーバーを立ち上げるアプローチと、クライアント側でインターセプトするアプローチがあります。

json-server は、JSON ファイルをデータベースとして扱い、本物の REST API サーバーを数秒で立ち上げます。ネットワークリクエストを実際に行うため、fetch や axios の設定を変更せずにテストできます。

# json-server: db.json ファイルからサーバー起動
# npx json-server --watch db.json

// json-server を利用するクライアントコード
// 実際の HTTP リクエストとして処理される
fetch('http://localhost:3000/users/1')
  .then(res => res.json())
  .then(data => console.log(data));

mockjs は、XMLHttpRequest または Fetch API をインターセプトし、サーバーにリクエストを送らずにモックデータを返します。デプロイ環境でもコードを変更せずにモックを無効化できる利点があります。

// mockjs: リクエストをインターセプト
Mock.mock(/\/api\/users/, 'get', {
  'id': 1,
  'name': '@cname'
});

// この fetch は実際にはネットワークに飛ばず、Mock のデータが返る
fetch('/api/users').then(res => res.json());

🔄 再現性とテスト：シード値の扱い

テスト自動化において、毎回異なるデータが生成されると問題になることがあります。

chance はコンストラクタでシード値を指定するだけで、完全に再現可能なデータストリームを作成できます。

// chance: シード値による完全再現
const chance1 = new Chance(999);
const chance2 = new Chance(999);

// chance1.name() と chance2.name() は常に一致する

faker も最近のバージョンではシード機能を提供していますが、chance ほど軽量ではありません。

// faker: シード機能の利用
const { faker } = require('@faker-js/faker');
faker.seed(12345);

const name1 = faker.person.fullName();
faker.seed(12345);
const name2 = faker.person.fullName();
// name1 と name2 は一致する

json-server はデータ生成ライブラリではないため、シード値の概念はありません。ただし、固定された JSON ファイルをソースとするため、データ自体は常に一定です。

// json-server: db.json
{
  "users": [
    { "id": 1, "name": "Fixed Name" }
  ]
}

mockjs はランダム生成が基本ですが、テンプレート内で固定値を混ぜることで調整可能です。

// mockjs: 固定値とランダム値の混合
Mock.mock({
  'fixedId': 100,
  'randomName': '@name'
});

🛠️ 保守性とコミュニティの状況

ライブラリを選択する際、メンテナンス状況は重要な要素です。

faker は、元のメンテナーによる問題を経て、コミュニティフォークである @faker-js/faker が事実上の標準となっています。活発にメンテナンスされており、セキュリティアップデートも迅速です。

chance は長年安定しており、大きな変更はありません。堅実な選択肢ですが、新機能の追加は緩やかです。

json-server は開発の一時停止（メンテナンスモード）が発表されていますが、依然としてプロトタイピング用途では非常に強力です。本番環境での利用は避けるべきです。

mockjs は更新頻度が低く、モダンな Fetch API や TypeScript との相性に課題がある場合があります。新しいプロジェクトでは、MSW (Mock Service Worker) などの代替を検討するのが賢明です。

📊 比較サマリー

💡 最終的な推奨事項

プロジェクトの要件に応じて、以下のように選択するのが最適です。

1. テストの再現性が最優先なら chance を選んでください。シード値の扱いがシンプルで確実です。
2. 多様なデータと多言語対応が必要なら @faker-js/faker が一択です。機能性と保守性のバランスが最も優れています。
3. API 全体を素早くモックしたいなら json-server が便利です。ただし、長期的なメンテナンスを考慮し、段階的に本番 API へ移行する計画を立ててください。
4. mockjs は既存のレガシープロジェクトでは有用ですが、新規プロジェクトでは MSW や json-server の併用を検討することをお勧めします。

これらのツールは相互に排他的ではありません。例えば、json-server のデータ生成に faker を組み合わせるなど、目的に応じて組み合わせるのがプロフェッショナルなアプローチです。