json-serverで手軽にREST APIのモックサーバーを作る

こー（エンジニア）

json-serverで手軽にREST APIのモックサーバーを作る

こー（エンジニア）

2022.03.23

IT技術

json-server REST API

はじめに

フロントエンドでの開発中、API がデプロイされていない状況でも、API 通信の挙動を確認したい！

そんな状況は開発を行っている中でよく遭遇します。

特に新規開発では、フロントエンドとバックエンド同時に開発が進むことが多いため、フロント側で動作確認したい API がまだ開発中...というパターンが多いです。

そこで、そんな時に手軽にローカルで API の挙動が確認できるモックサーバーの作り方と使い方を今回紹介していきます。

環境構築

json-server という Node.js のパッケージを使用するため、Node.js をインストールする必要があります。

json-server は手軽に REST API のモックサーバーを作ることのできるパッケージです。

https://github.com/typicode/json-server

基本的な GET メソッドの REST API であれば、コーディング不要で json データを用意するだけで OK なので、初学者にもハードルが低く導入しやすいですね。

Node.js のインストールについては、完了している前提で進めていきます。

Mac の方は以下の記事が参考になると思います。

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

package.json の作成

今回は複数の開発者同士で環境を共有する想定で、 package.json を利用してインストールする管理していきます。

sample-api-mock というディレクトリを作成して、その直下で npm init コマンドを実行しましょう。

実行するとインタラクティブに質問されるので、すべて回答すると package.json が生成されます。

今回は全て空欄でも大丈夫です。

以下のような package.json が生成されれば OK です！

1{
2  "name": "sample-api-mock",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC"
11}

json-server のインストール

それでは json-server をインストールしていきます！

以下のコマンドを実行して、ローカルに json-server をインストールします。

1npm install json-server --save-dev

package-lock.json というファイルと、 node_modules というディレクトリが生成されたら成功です。

これで環境構築は終了です！

GET メソッドのモック化

冒頭で述べましたが、json-server では json 形式でレスポンスデータを登録していきます。

今回はシンプルに user を管理するデータベースを想定します。

レスポンスデータの登録

まず、 db.json という名前でファイルを用意します。

その後、以下のように記述します。

1{
2    "user": {
3        "id": 0,
4        "name": "たなかたろう"
5    }
6}

これだけでレスポンスデータの準備完了です！

モックサーバーの起動

それではいよいよモックサーバーを起動してみましょう！

package.json に以下を追記してください。

1{
2  "name": "sample-api-mock",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    # ↓↓追記↓↓
9    "json-server": "json-server --watch db.json -port 5000"
10  },
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "json-server": "^0.17.0"
15  }
16}

これで、npm run json-server をターミナルで実行することで、 json-server --watch db.json -port 5000 を実行でき、コマンドを簡略化することができます。

加えて npm run で実行するコマンドは、プロジェクトローカルにインストールしているパッケージのパスを参照するので、各々の開発環境に依存しない運用を行えるというメリットもあります。

それでは、ターミナルで npm run json-server を実行してモックサーバーを起動しましょう！

ターミナルに以下のような表示がされれば起動成功です。

1▶︎ npm run json-server
2
3> sample-api-mock@1.0.0 json-server /path/to/sample-api-mock
4> json-server --watch db.json --port 5000
5
6
7  \{^_^}/ hi!
8
9  Loading db.json
10  Done
11
12  Resources
13  http://localhost:5000/user
14
15  Home
16  http://localhost:5000
17
18  Type s + enter at any time to create a snapshot of the database
19  Watching...

これで、 http://localhost:5000 にモックサーバーが起動されました！

レスポンスを確認する

それではモックサーバーの REST API との通信を確認していきましょう！

API 通信を確認するには Postman を利用したりなど様々な方法がありますが、ここでは基本に立ち返り curl コマンドを使って確認してみます。

まずは user の取得から。

1つのターミナルはモックサーバーの起動に利用しているので、新しいターミナルウィンドウを開き以下コマンドを実行しましょう。

1curl --request GET "http://localhost:5000/user"

実行結果で以下が表示されれば成功です！

1▶︎ curl --request GET "http://localhost:5000/user"
2{
3  "id": 0,
4  "name": "たなかたろう"
5}

db.json で記述した user のデータがレスポンスで返ってきていますね。

該当部分に配列でデータを登録すれば、ちゃんと配列で返ってきます。

ここまでが基本的な json-server を利用したモックサーバーの使い方になります。

ルーティング処理

実際に GET メソッドでデータを取得する際は、クエリパラメータを設定し指定したリソースを取得することが多いと思います。

現在の実装だと、どのようなクエリパラメータを付与しても、同じデータしか返ってきません。

今章では、ルーティング処理を通じてクエリパラメータに応じて返すデータを変える処理をプラスしてみましょう。

今回は userId というクエリパラメータに応じて、返す user を変更する処理を実装していきます。

レスポンスデータの準備

先程の db.json に以下の部分を追記しましょう。

1{
2    "user": {
3        "id": 0,
4        "name": "たなかたろう"
5    },
6    ## ↓↓ここから追記↓↓
7    "user_1": {
8        "id": 1,
9        "name": "さとう"
10    },
11    "user_2": {
12        "id": 2,
13        "name": "やました"
14    }
15    ## ↑↑ここまで追記↑↑
16}

この追加した2つの user にルーティング処理を行うために、プロジェクトのルートディレクトリに routes.json というファイルを記述し、以下のように記述します。

1{
2    "/users?userId=:user_id": "/user_:user_id"
3}

これで、クエリパラメータ userId で指定した id に対応した user のデータを返すルーティング処理を実装できました。

あとは、このルーティング処理を参照するようにモックサーバーを起動してあげればOKです。

モックサーバーの起動

package.json の scripts ブロックに記述した json-server に、--routes オブションを追記します。

1{
2  "name": "sample-api-mock",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    # ↓↓書き換え↓↓
9    "json-server": "json-server --watch db.json --routes routes.json --port 5000"
10  },
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "json-server": "^0.17.0"
15  }
16}

あとは、先程と同様に npm run json-server でモックサーバーを起動してあげればOKです！

1▶︎ npm run json-server
2
3> sample-api-mock@1.0.0 json-server /path/to/sample-api-mock
4> json-server --watch db.json --routes routes.json --port 5000
5
6
7  \{^_^}/ hi!
8
9  Loading db.json
10  Loading routes.json
11  Done
12
13  Resources
14  http://localhost:5000/user
15  http://localhost:5000/user_1
16  http://localhost:5000/user_2
17
18  Other routes
19  /users?userId=:user_id -> /user_:user_id
20
21  Home
22  http://localhost:5000
23
24  Type s + enter at any time to create a snapshot of the database
25  Watching...

Other routes が追加され、routes.json で指定したルーティング処理が反映されていることが確認できますね。

レスポンスの確認

それではまた curl コマンドでAPI通信を行いレスポンスを確認してみましょう。

以下コマンドを実行します。

1curl --request GET "http://localhost:5000/users?userId=1"

以下のように指定した id の user が返ってきていれば成功です！

1▶︎ curl --request GET "http://localhost:5000/users?userId=1"
2{
3  "id": 1,
4  "name": "さとう"
5}

以上 json-server にルーティング処理を反映する方法でした。

GET メソッド以外のモック化

開発で利用する API は GET リクエストだけじゃないですよね。

POST / PUT / PATCH / DELETE と様々なリクエストメソッドを利用するはずです。

これらと GET メソッドの違いは、実際にDB上のデータを更新するというところにあります。

それでは、user リソースに対して新しい user を作成する POST メソッドを実行してみます。

1▶︎ curl --request POST "http://localhost:5000/user" -d '{"id": 3, "name": "こばやし"}' -H "Content-Type: application/json"
2{
3  "id": 3,
4  "name": "こばやし"
5}

POST メソッドの実行が成功しました。

そして、db.json を確認してみましょう。

1{
2    # ↓↓POSTのリクエストボディで送信したデータ ↓↓
3    "user": {
4        "id": 3,
5        "name": "こばやし"
6    },
7    "user_1": {
8        "id": 1,
9        "name": "さとう"
10    },
11    "user_2": {
12        "id": 2,
13        "name": "やました"
14    }
15}

POST メソッドのリクエストボディで送信したデータが user オブジェクトに登録され、書き変わっていますね。

正常な挙動であることは間違いないのですが、

「ただ疎通を確認したいだけでデータまで書き変わってほしくない...」

ということも多いと思います。

実際モックサーバーをチーム開発前提で Git 管理していると、モックサーバーを起動して疎通確認をするたびに差分が出ますし、db.json が破茶滅茶なことになりますし、かなり面倒です。

それを解決するためには、API通信をモックサーバーで処理する前に1つ別の処理を挟み、 db.json が更新されないようにする必要があります。

そこで登場するのがミドルウェアです。

ミドルウェアとは？

ミドルウェアとは、文字通りOS⇄アプリケーションの中間（ミドル）に位置するソフトウェアのことで、ざっくり言うとアプリケーションに必要かつ特化した機能を提供するソフトウェアです。

今回の場合では、「APIリクエストを行うOS⇄API通信を処理するモックサーバー」と置き換えた方がわかりやすいと思います。

この2つの間に入り、db.json が更新されないようにする機能を提供するアプリケーションをミドルウェアとして実装していくわけです。

ミドルウェアの実装

プロジェクトのルートディレクトリに middleware.js というファイルを作成し、以下のように記述します。

1module.exports = function (req, next) {
2  if (req.method !== 'GET') {
3    req.method = 'GET'
4  }
5  next()
6}

内容は、送信されたリクエストメソッドが GET 以外の場合は GET に置き換えて処理を行う、という単純なものです。

これで、どのメソッドでモックサーバーにリクエストを行っても、ミドルウェアが全て GET メソッドに置き換えてくれるため、 db.json が更新されることがなくなります。

あとは、これをルーティング処理の時と同様に、モックサーバーに組み込んで起動します。

モックサーバーの起動

package.json の scripts ブロックに記述した json-server に、 --middleware オプションをさらに追記しましょう。

1{
2  "name": "sample-api-mock",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    # ↓↓書き換え↓↓
9    "json-server": "json-server --watch db.json --routes routes.json --middlewares middleware.js --port 5000"
10  },
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "json-server": "^0.17.0"
15  }
16}

そして、先ほどまでと同様に npm run json-server でモックサーバーを起動しましょう。

1▶︎ npm run json-server
2
3> sample-api-mock@1.0.0 json-server /path/to/sample-api-mock
4> json-server --watch db.json --routes routes.json --middlewares middleware.js --port 5000
5
6
7  \{^_^}/ hi!
8
9  Loading db.json
10  Loading routes.json
11  Loading middleware.js
12  Done
13
14  Resources
15  http://localhost:5000/user
16  http://localhost:5000/user_1
17  http://localhost:5000/user_2
18
19  Other routes
20  /users?userId=:user_id -> /user_:user_id
21
22  Home
23  http://localhost:5000
24
25  Type s + enter at any time to create a snapshot of the database
26  Watching...

Loading middleware.js が表示され、ミドルウェアの処理を組み込んだモックサーバーを起動できたことが確認できました。

POST メソッドでレスポンス & 動作確認

それでは、もう一度今章の冒頭と同じ POST メソッドでリクエストを送り、動作確認していきましょう。

まずはレスポンスから。

1▶︎ curl --request POST "http://localhost:5000/user" -d '{"id": 3, "name": "こばやし"}' -H "Content-Type: application/json"
2{
3  "id": 0,
4  "name": "たなかたろう"
5}

db.json の user に登録されているデータがレスポンスで返ってきてますね。

ミドルウェアの処理で GET リクエストに変換され、 db.json にある user オブジェクトが取得されたためですね。

次に db.json が更新されていないか確認しましょう。

1{
2    "user": {
3        "id": 0,
4        "name": "たなかたろう"
5    },
6    "user_1": {
7        "id": 1,
8        "name": "さとう"
9    },
10    "user_2": {
11        "id": 2,
12        "name": "やました"
13    }
14}