JSON PlaceholderでFake API(mock api)を作成する

JSON PlaceholderでFake API(mock api)を作成する

JSON PlaceholderでFake API(mock api)を作成する

バックエンドのAPIをとりあえずmockにしておき、フロントエンドからたたける状態にしておきたいことがあると思います。

Beeceptorが使えますが、今回はJSON Placeholderを使ってみました。

リソース

最初から6つのリソースが用意されています。

リソース	データ
/posts	100 posts
/comments	500 comments
/albums	100 albums
/photos	5000 photos
/todos	200 todos
/users	10 users

curlテスト

curlでたたいてみます。

C:\>curl -X GET https://jsonplaceholder.typicode.com/posts/2
{
  "userId": 1,
  "id": 2,
  "title": "qui est esse",
  "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}

ダミーのJSONが返ってきました。

パスパラメータを101にしてみます。

C:\>curl -X GET https://jsonplaceholder.typicode.com/posts/101
{}

{}が返ってきました。

予め用意されているFake APIの使用例はコチラです。

レスポンスを独自データに変更する

mock apiのレスポンスを開発に合わせたレスポンスに変更したいケースがあると思います。

githubと連携して、My JSON Serverを使用します。こちらはベータ版ですので以下注意事項です。

URLは変更される可能性があります
サービスが停止する可能性がある
後に認証が追加される可能性がある

いつ使えなくなるかわからないサービスなので、信頼できるソリューションが必要な場合はJSON Serverを使用してくださいとのことです。

JSON Serverについては「node.js でJSONを返すWebAPI モックを作成する方法」を参照ください。

githubリポジトリ作成

githubリポジトリを作成します。

db.json

db.jsonファイルを作成します。/usersだけを用意しています。

{
  "users": [
    {
      "id": 1,
      "name": "takahashi",
      "age": 20
    },
    {
      "id": 2,
      "name": "yamada",
      "age": 30
    }
  ]
}

curl

curlでテストします。URLのプレースホルダを適宜以下のように置き換えます。

<your-username>…takahashi-h5
<your-repo>…my-json-server

URLは、「https://my-json-server.typicode.com/takahashi-h5/my-json-server」になります。

リソースを含めると、「https://my-json-server.typicode.com/takahashi-h5/my-json-server/users」です。

C:\>curl -X GET https://my-json-server.typicode.com/takahashi-h5/my-json-server/users
[
  {
    "id": 1,
    "name": "takahashi",
    "age": 20
  },
  {
    "id": 2,
    "name": "yamada",
    "age": 30
  }
]
C:\>curl -X GET https://my-json-server.typicode.com/takahashi-h5/my-json-server/users/2
{
  "id": 2,
  "name": "yamada",
  "age": 30
}

db.jsonの中身でレスポンスを置き換えることができました。