DEV Community

Cover image for JSONPlaceholderで数分！フェイクREST APIの簡単な構築方法
Akira
Akira

Posted on • Originally published at apidog.com

JSONPlaceholderで数分！フェイクREST APIの簡単な構築方法

フロントエンド実装中にバックエンドが未完成でも、GET、POST、PUT、DELETEが動くREST APIを用意すれば開発を止めずに進められます。json-serverならJSONファイル1つでローカルAPIを起動でき、JSONPlaceholderならインストールなしで公開フェイクAPIをすぐ呼び出せます。

今すぐApidogを試す

json-serverは、単一のJSONファイルからCRUD対応のREST APIを生成するnpmツールです。JSONPlaceholderは、同じ作者が提供するホスト済みのフェイクAPIで、セットアップなしで試せます。この記事では、両方の使い方、実装時の使い分け、そしてスキーマ駆動のモックへ移行すべきタイミングを整理します。

エンドポイントの偽装に関する全体像は、モックAPIとは何かを参照してください。ここでは、開発者が最初に使いやすい2つの選択肢に絞ります。

json-serverとは？

json-serverは、プレーンなJSONファイルをREST APIとして公開するオープンソースのnpmツールです。

db.jsonにリソースを定義してコマンドを実行すると、次のようなCRUDルートが自動生成されます。

  • GET
  • POST
  • PUT
  • PATCH
  • DELETE

書き込みリクエストは実際にdb.jsonへ反映されるため、ローカル開発中は状態を保持したAPIとして使えます。

バックエンド実装なしで、プロトタイプ、フロントエンド開発、デモ、テスト用APIを素早く用意したい場合に有効です。プロジェクトはGitHubで公開されています。

json-serverのインストールと実行

まずnpmからインストールします。

npm install json-server
Enter fullscreen mode Exit fullscreen mode

次に、プロジェクトルートにdb.jsonを作成します。

トップレベルの配列はコレクションルートになり、トップレベルのオブジェクトは単一リソースルートになります。

{
  "posts": [
    { "id": "1", "title": "First post", "views": 100 },
    { "id": "2", "title": "Second post", "views": 250 }
  ],
  "comments": [
    { "id": "1", "text": "Nice work", "postId": "1" }
  ],
  "profile": {
    "name": "apidog"
  }
}
Enter fullscreen mode Exit fullscreen mode

サーバーを起動します。

npx json-server db.json
Enter fullscreen mode Exit fullscreen mode

デフォルトでは次のURLでAPIが起動します。

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

これで、フロントエンドからすぐにAPIを呼び出せます。

バージョンに関する注意：json-server v1では古い--watchフラグが廃止され、現在はnpx json-server db.jsonを使います。古い0.x系のチュートリアルではjson-server --watch db.jsonが使われている場合があります。

自動生成されるルート

上記のdb.jsonを使うと、posts配列には次のRESTエンドポイントが生成されます。

GET    /posts
GET    /posts/:id
POST   /posts
PUT    /posts/:id
PATCH  /posts/:id
DELETE /posts/:id
Enter fullscreen mode Exit fullscreen mode

profileのような単一オブジェクトには、次のルートが生成されます。

GET   /profile
PUT   /profile
PATCH /profile
Enter fullscreen mode Exit fullscreen mode

たとえば、投稿一覧を取得するには次のように呼び出します。

curl http://localhost:3000/posts
Enter fullscreen mode Exit fullscreen mode

新しい投稿を追加する場合は、POST /postsを使います。

curl -X POST http://localhost:3000/posts \
  -H "Content-Type: application/json" \
  -d '{ "id": "3", "title": "Third post", "views": 10 }'
Enter fullscreen mode Exit fullscreen mode

追加後、db.jsonにもデータが書き戻されます。

クエリ、ソート、ページネーションを使う

json-serverには、よく使うクエリ操作も組み込まれています。

GET /posts?views:gt=100            # viewsが100より大きい
GET /posts?views:lte=50            # viewsが50以下
GET /posts?_sort=-views            # viewsで降順ソート
GET /posts?_page=1&_per_page=25    # ページネーション
GET /posts?_embed=comments         # 関連するコメントを含める
Enter fullscreen mode Exit fullscreen mode

利用できる演算子には、次のようなものがあります。

  • lt
  • lte
  • gt
  • gte
  • eq
  • ne
  • in
  • contains
  • startsWith
  • endsWith

フロントエンド側で一覧、詳細、検索、ページングUIを実装する程度であれば、JSONファイル1つで十分に検証できます。

JSONPlaceholder：セットアップ不要のフェイクAPI

ローカルにツールを入れたくない場合は、JSONPlaceholderを使えます。

JSONPlaceholderは、jsonplaceholder.typicode.comで公開されている無料のフェイクREST APIです。

curl https://jsonplaceholder.typicode.com/posts/1
Enter fullscreen mode Exit fullscreen mode

レスポンス例：

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident",
  "body": "quia et suscipit..."
}
Enter fullscreen mode Exit fullscreen mode

利用できる主なリソースは次のとおりです。

  • /posts：100件
  • /comments：500件
  • /albums：100件
  • /photos：5000件
  • /todos：200件
  • /users：10件

POST、PUT、PATCH、DELETEも受け付けますが、書き込みは保存されません。

たとえば次のようにPOSTできます。

curl -X POST https://jsonplaceholder.typicode.com/posts \
  -H "Content-Type: application/json" \
  -d '{ "title": "hello", "body": "world", "userId": 1 }'
Enter fullscreen mode Exit fullscreen mode

APIは作成されたようなレスポンスを返しますが、実データは変更されません。UIの接続確認やデモには便利ですが、状態をまたぐフローの検証には向きません。

json-server 対 JSONPlaceholder

json-server JSONPlaceholder
セットアップ npmパッケージをインストールし、db.jsonを作成 なし。URLを呼び出すだけ
動作場所 ローカル環境 公開ホスト環境
カスタムデータ 可能 不可。固定リソースのみ
書き込みの永続化 可能。db.jsonに保存 不可。書き込みは偽装
最適な用途 独自データ構造でのプロトタイプ作成 クイックデモ、学習、疎通確認

判断基準はシンプルです。

  • すぐに公開APIを叩きたいだけならJSONPlaceholder
  • 独自のJSON構造や永続的な書き込みが必要ならjson-server

これらのツールが限界を迎える場面

json-serverとJSONPlaceholderは、JSONを素早く返す用途には便利です。ただし、プロジェクトがプロトタイプを超えると制約が出てきます。

  • スキーマバリデーションがない

    数値フィールドに文字列を送っても保存される場合があります。実APIと同じ制約を再現できません。

  • 動的データ生成が弱い

    レスポンスは基本的にファイル内の値です。毎回異なるメールアドレス、将来日付、ランダムな価格などを自動生成する用途には向きません。

  • チーム共有しにくい

    json-serverは通常localhostで動作します。チームメンバーやCIからそのままアクセスできません。

  • API仕様とモックがずれやすい

    OpenAPI定義とdb.jsonが別管理になると、APIの変更にモックが追従しなくなります。

  • JSONPlaceholderの書き込みは保存されない

    カート、申請フォーム、複数ステップの登録フローなど、状態を持つ機能の検証には不十分です。

フラットファイルでは足りなくなった場合は、RESTエンドポイントをモックするためのツールのまとめ、無料および安価なAPIモックサーバー、オンラインAPIモックツール比較も参考になります。

実際のモックサーバーに移行するタイミング

スキーマを意識したモックが必要になったら、json-serverから次の段階へ移行するタイミングです。ここでApidogが選択肢になります。

Apidogでは、API仕様をもとにモックを生成できます。

  • ファイル駆動ではなくスキーマ駆動

    エンドポイントを定義するか、OpenAPI仕様をインポートすると、定義に基づいてモックを作成できます。

  • 現実的な動的データ

    フィールド名や型に応じて、メールアドレス、日付、数値などの値を返せます。詳しくはFaker.jsのガイドとテストデータジェネレーターのチュートリアルを参照してください。

  • 共有可能なクラウドURL

    localhostではなく、チームやCIからアクセスできるモックURLを利用できます。

  • Node環境が不要

    プロジェクトごとにnpmパッケージやdb.jsonを管理する必要がありません。

Apidogで同じAPIをモックする

json-serverで作った/posts相当のAPIを、Apidogでモックする基本手順は次のとおりです。

  1. Apidogをダウンロードします。
  2. プロジェクトを作成または開きます。
  3. GET /postsなどのエンドポイントを追加します。
  4. レスポンススキーマを定義します。既存のOpenAPIファイルがある場合はインポートします。
  5. 生成されたモックURLを呼び出します。
  6. 固定値が必要なフィールドには、モックルールを追加します。
  7. モックURLをチーム、テストコード、CIに共有します。

json-serverの「数分でAPIを作る」速度を保ちながら、スキーマ、動的データ、共有可能なURLを扱えるようになります。

よくある質問

json-serverは無料ですか？

はい。オープンソースで無料で利用できます。JSONPlaceholderも無料です。

json-serverはデータを永続化しますか？

はい。POST、PUT、PATCH、DELETEはdb.jsonに書き戻されます。サーバー実行中は、リクエスト間で変更が保持されます。JSONPlaceholderは書き込みを偽装するだけで、保存はしません。

json-serverを本番環境で使えますか？

いいえ。json-serverはプロトタイプ作成やテスト向けです。本番APIに必要な認証、権限管理、スケーラビリティ、厳密なバリデーションは備えていません。

json-serverとApidogのようなモックサーバーの違いは何ですか？

json-serverは静的なJSONファイルをAPIとして公開します。ApidogはAPIスキーマをもとにモックを生成し、動的で現実的なデータや共有可能なクラウドURLを扱えます。背景はモックAPIとは何かとRESTモックツールまとめも参考になります。

静的な行ではなく、現実的な偽データを返すにはどうすればよいですか？

テストデータジェネレーターを使います。Apidogのモックでは、スキーマに基づいて現実的な値を生成できます。

要約

json-serverは、JSONファイル1つでローカルREST APIを起動できる便利なツールです。JSONPlaceholderは、セットアップ不要で公開フェイクAPIを呼び出せます。

ただし、スキーマバリデーション、動的データ、チーム共有、CI連携、API仕様との同期が必要になると、フラットファイル中心のモックでは限界があります。

その段階では、Apidogのようなスキーマ駆動のモックサーバーを検討してください。Apidogをダウンロードして仕様をインポートすれば、実際のAPI契約に沿ったモックをすぐに使い始められます。

Top comments (0)