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の中身でレスポンスを置き換えることができました。

公式サイト

JSONPlaceholder - Free Fake REST API

コメント

タイトルとURLをコピーしました