はじめに

社会人 2 年目です。社会人になってからは API 開発/設計をすることがほとんどです。
API の開発をしていく中で、一般公開されている API を使用して実装することもあります。
その中でリクエスト制限がかかっている API をたまに見ます。
その API を使用して実装していると、私の心の中では「リクエスト制限超えてしまった！！！ 1 時間待たないといけない...orz。開発中だけでもリクエスト制限を無くしたい！」と個人的に思っています。
本記事はそういった悩みを解決する手段の 1 つとして紹介している記事です。

所感

リクエスト制限がかかっている API には、API を利用するために料金設定しているものが多いです。
(いいプランの API を使用して開発する場合は気にする必要はないですが...)
例)

などなど探せばたくさんあります。

(利用制限について詳しくまとまっている記事があるのでこちらもご参考ください)

中には開発用に提供している嬉しいプランもあります。

例)

Salesforce(Developer Edition)

対象読者

リクエスト制限回数のある API を使用して開発している時に、開発時だけはリクエスト制限をなくしたい人(欲しいレスポンスデータをモックさせ制限がない API から取得したい人)
手軽に REST API を体験してみたい人
json-server を使ってみたい人

初期設定/モック API アプリの作成

開発環境

$ node -v
v15.14.0
$ yarn -v
1.22.11

手順

1. `json-mock-api` のディレクトリを作成する

$ mkdir json-mock-api
$ cd json-mock-api

2. `.gitignore` を作成する

json-mock-api/.gitignore

node_modules
yarn-error.log

3. `package.json` を作成する

json-mock-api/package.json

{
  "name": "json-mock-api",
  "scripts": {
    "json-server": "json-server -w db/database.json"
  }
}

4. 必要なパッケージをインストールする

$ yarn add json-server

追加したパッケージはpackage.jsonに追加される

json-mock-api/package.json

{
  "name": "json-mock-api",
  "scripts": {
    "json-server": "json-server -w db/database.json"
  },
  "dependencies": {
    "json-server": "^0.17.0" // <= 追加された
  }
}

5. ダミーな json データを作成する

db/database.json に以下の json データを追加する
(ここに追加する json データがレスポンスボディに含まれます。この値を変更すれば欲しい json データを取得することが可能です)

json-mock-api/db/database.json

{
  "books": [
    {
      "id": 1,
      "title": "title01",
      "author": "typicode"
    },
    {
      "id": 2,
      "title": "title02",
      "author": "typicode"
    }
  ]
}

6. サーバーを起動する

-p 5000をつけることで 5000 ポートを使用してサーバを起動することができます。
-p 5000 をつけずに json-server を起動するとデフォルトで3000 番ポートを使用します。
(私の場合は 3000 ポートで API 開発することが多いため、モック API では5000ポートを使用することが多いです)

※ 5000 を使用しているかはlsof -i:5000コマンドで確認できます

$ yarn json-server -p 5000

  \{^_^}/ hi!

  Loading db/database.json
  Done

  Resources
  http://localhost:5000/books

  Home
  http://localhost:5000

  Type s + enter at any time to create a snapshot of the database
  Watching...

7. curl コマンドで `db/database.json` に追加した json データが取得できるか確認します

$ curl -X GET http://localhost:5000/db
{
  "books": [
    {
      "id": 1,
      "title": "title01",
      "author": "typicode"
    },
    {
      "id": 2,
      "title": "title02",
      "author": "typicode"
    }
  ]
}

curl コマンド実行でdb/database.json に追加したデータが返ってこれば成功です。

上記のようにjson-mock-apiを使用すれば簡単にモックAPI を作成することができます。

他にもbooksのみの json データを取得したい場合はcurl -X GET http://localhost:5000/booksを実行できたり、
クエリパラメータで Paginate、Sort、Slice、Operators、部分一致検索など条件を絞ることが可能なのでいろいろモック API としてご利用できます！
詳しくはjson-server ドキュメントをご参考ください。

(REST API のように使用したい方はGitHubにまとめたのでこちらをご参考ください)

では！！お待ちかね！！上記(モック API アプリ)を利用して、
Twitter API のモックを作っていこうと思います。

Twitter API のモックを作ってみよう

Twitter API ドキュメントのTweet lookup を参考にし Tweet 検索のモックを作成します。

モック対象とする Twitter API

https://api.twitter.com/2/tweets?ids=1228393702244134912,1227640996038684673,1199786642791452673&tweet.fields=created_at&expansions=author_id&user.fields=created_at

手順

db/database.json に欲しい json データを追加します(これだけです)

Tweet lookup のステップ5 のレスポンスのサンプルデータをdb/database.jsonに書き換えます。

json-mock-api/package.json

{
  "data": [
    {
      "author_id": "2244994945",
      "created_at": "2020-02-14T19:00:55.000Z",
      "id": "1228393702244134912",
      "text": "What did the developer write in their Valentine’s card?\n  \nwhile(true) {\n    I = Love(You);  \n}"
    },
    {
      "author_id": "2244994945",
      "created_at": "2020-02-12T17:09:56.000Z",
      "id": "1227640996038684673",
      "text": "Doctors: Googling stuff online does not make you a doctor\n\nDevelopers: https://t.co/mrju5ypPkb"
    },
    {
      "author_id": "2244994945",
      "created_at": "2019-11-27T20:26:41.000Z",
      "id": "1199786642791452673",
      "text": "C#"
    }
  ],
  "includes": {
    "users": [
      {
        "created_at": "2013-12-14T04:35:55.000Z",
        "id": "2244994945",
        "name": "Twitter Dev",
        "username": "TwitterDev"
      }
    ]
  }
}

実際にサーバを起動してモック API を使ってみます

$ yarn json-server -p 5000

  \{^_^}/ hi!

  Loading db/database.json
  Done

  Resources
  http://localhost:5000/data
  http://localhost:5000/includes

  Home
  http://localhost:5000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Tweet lookup API のレスポンスデータには data、includesのレスポンスデータがあります。
それぞれのレスポンスデータを API で利用したい場合は

dataの json データのみ欲しい時: curl -X GET http://localhost:5000/data
includesの json データのみ欲しい時: curl -X GET http://localhost:5000/includes

今回はTweet lookupのサンプル API モックが欲しいので
db/database.jsonに追加した全ての json 出たを取得できるcurl -X GET http://localhost:5000/dbコマンドを実行して取得していこうと思います。

※ curl コマンドを実行した時レスポンスデータの値がdb/database.jsonに追加した値と違う場合は一度サーバを再起動してください。

$ curl -X GET http://localhost:5000/db

{
  "data": [
    {
      "author_id": "2244994945",
      "created_at": "2020-02-14T19:00:55.000Z",
      "id": "1228393702244134912",
      "text": "What did the developer write in their Valentine’s card?\n  \nwhile(true) {\n    I = Love(You);  \n}"
    },
    {
      "author_id": "2244994945",
      "created_at": "2020-02-12T17:09:56.000Z",
      "id": "1227640996038684673",
      "text": "Doctors: Googling stuff online does not make you a doctor\n\nDevelopers: https://t.co/mrju5ypPkb"
    },
    {
      "author_id": "2244994945",
      "created_at": "2019-11-27T20:26:41.000Z",
      "id": "1199786642791452673",
      "text": "C#"
    }
  ],
  "includes": {
    "users": [
      {
        "created_at": "2013-12-14T04:35:55.000Z",
        "id": "2244994945",
        "name": "Twitter Dev",
        "username": "TwitterDev"
      }
    ]
  }
}

curl -X GET http://localhost:5000/db を実行すると Tweet lookupのサンプル API と同じレスポンスデータが取得できます。
これを使用すれば開発だけでもリクエスト制限がかからずに済むので開発中にストレスなく実装に集中できます。

リクエスト例

クエリパラメータを設定することが可能で、そのリクエスト例をご紹介します。

method	Twitter API(モック対象 API)	モックした API	HTTP status	備考
GET	https://api.twitter.com/2/tweets?ids=1228393702244134912,1227640996038684673,1199786642791452673&tweet.fields=created_at \| jq '.data'	http://localhost:5000/data	200	`data`の json データを取得
GET	"https://api.twitter.com/2/tweets?ids=1228393702244134912,1227640996038684673,1199786642791452673&tweet.fields=created_at&expansions=author_id&user.fields=created_at" \| jq '.includes'	http://localhost:5000/includes	200	`includes`の json データを取得
GET	https://api.twitter.com/2/tweets?ids=1228393702244134912&tweet.fields=created_at,author_id	http://localhost:5000/data/?id=1228393702244134912	200	完全一致検索。`id=1228393702244134912` の json データを取得
GET	https://api.twitter.com/2/tweets?ids=1228393702244134912,1227640996038684673,1199786642791452673&tweet.fields=created_at&expansions=author_id&user.fields=created_at	http://localhost:3000/db	200	Twitter API (Tweet lookup) のサンプルと同じ json データを取得

このようにjson-serverを使えば簡単にモック API を作ることができます。

終わりに

本記事で作成したソースコードはGitHub載せています。
git cloneやフォークをしてご活用しても大丈夫です
(GET メソッド以外にも POST、PUT、DELETE メソッドも使えます。詳しくはGithub README.mdにまとめています)

json-serverに出会ってからはリクエスト制限で困った...ってことは無くなったので、同じ悩みで困っている方の手助けになれば幸いです。

APIの利用制限(Rate Limit)めんどくせー(笑)

はじめに

所感

対象読者

初期設定/モック API アプリの作成

開発環境

手順

1. json-mock-api のディレクトリを作成する

2. .gitignore を作成する

3. package.json を作成する

4. 必要なパッケージをインストールする

5. ダミーな json データを作成する

6. サーバーを起動する

7. curl コマンドで db/database.json に追加した json データが取得できるか確認します

Twitter API のモックを作ってみよう

モック対象とする Twitter API

手順

実際にサーバを起動してモック API を使ってみます

リクエスト例

終わりに

参考

1. `json-mock-api` のディレクトリを作成する

2. `.gitignore` を作成する

3. `package.json` を作成する

7. curl コマンドで `db/database.json` に追加した json データが取得できるか確認します