json-serverで手軽にREST APIのモックサーバーを作る
2022.03.23
はじめに
フロントエンドでの開発中、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 3 4 5 6 7 8 9 10 11 | { "name": "sample-api-mock", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } |
json-server のインストール
それでは json-server をインストールしていきます！
以下のコマンドを実行して、ローカルに json-server をインストールします。
1 | npm install json-server --save-dev |
package-lock.json というファイルと、 node_modules というディレクトリが生成されたら成功です。
これで環境構築は終了です！
GET メソッドのモック化
冒頭で述べましたが、json-server では json 形式でレスポンスデータを登録していきます。
今回はシンプルに user を管理するデータベースを想定します。
レスポンスデータの登録
まず、 db.json という名前でファイルを用意します。
その後、以下のように記述します。
1 2 3 4 5 6 | { "user": { "id": 0, "name": "たなかたろう" } } |
これだけでレスポンスデータの準備完了です！
モックサーバーの起動
それではいよいよモックサーバーを起動してみましょう！
package.json に以下を追記してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "name": "sample-api-mock", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", # ↓↓追記↓↓ "json-server": "json-server --watch db.json -port 5000" }, "author": "", "license": "ISC", "devDependencies": { "json-server": "^0.17.0" } } |
これで、 npm run json-server をターミナルで実行することで、 json-server --watch db.json -port 5000 を実行でき、コマンドを簡略化することができます。
加えて npm run で実行するコマンドは、プロジェクトローカルにインストールしているパッケージのパスを参照するので、各々の開発環境に依存しない運用を行えるというメリットもあります。
それでは、ターミナルで npm run json-server を実行してモックサーバーを起動しましょう！
ターミナルに以下のような表示がされれば起動成功です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ▶︎ npm run json-server > sample-api-mock@1.0.0 json-server /path/to/sample-api-mock > json-server --watch db.json --port 5000 \{^_^}/ hi! Loading db.json Done Resources http://localhost:5000/user Home http://localhost:5000 Type s + enter at any time to create a snapshot of the database Watching... |
これで、 http://localhost:5000 にモックサーバーが起動されました！
レスポンスを確認する
それではモックサーバーの REST API との通信を確認していきましょう！
API 通信を確認するには Postman を利用したりなど様々な方法がありますが、ここでは基本に立ち返り curl コマンドを使って確認してみます。
まずは user の取得から。
1つのターミナルはモックサーバーの起動に利用しているので、新しいターミナルウィンドウを開き以下コマンドを実行しましょう。
1 | curl --request GET "http://localhost:5000/user" |
実行結果で以下が表示されれば成功です！
1 2 3 4 5 | ▶︎ curl --request GET "http://localhost:5000/user" { "id": 0, "name": "たなかたろう" } |
db.json で記述した user のデータがレスポンスで返ってきていますね。
該当部分に配列でデータを登録すれば、ちゃんと配列で返ってきます。
ここまでが基本的な json-server を利用したモックサーバーの使い方になります。
ルーティング処理
実際に GET メソッドでデータを取得する際は、クエリパラメータを設定し指定したリソースを取得することが多いと思います。
現在の実装だと、どのようなクエリパラメータを付与しても、同じデータしか返ってきません。
今章では、ルーティング処理を通じてクエリパラメータに応じて返すデータを変える処理をプラスしてみましょう。
今回は userId というクエリパラメータに応じて、返す user を変更する処理を実装していきます。
レスポンスデータの準備
先程の db.json に以下の部分を追記しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "user": { "id": 0, "name": "たなかたろう" }, ## ↓↓ここから追記↓↓ "user_1": { "id": 1, "name": "さとう" }, "user_2": { "id": 2, "name": "やました" } ## ↑↑ここまで追記↑↑ } |
この追加した2つの user にルーティング処理を行うために、プロジェクトのルートディレクトリに routes.json というファイルを記述し、以下のように記述します。
1 2 3 | { "/users?userId=:user_id": "/user_:user_id" } |
これで、クエリパラメータ userId で指定した id に対応した user のデータを返すルーティング処理を実装できました。
あとは、このルーティング処理を参照するようにモックサーバーを起動してあげればOKです。
モックサーバーの起動
package.json の scripts ブロックに記述した json-server に、--routes オブションを追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "name": "sample-api-mock", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", # ↓↓書き換え↓↓ "json-server": "json-server --watch db.json --routes routes.json --port 5000" }, "author": "", "license": "ISC", "devDependencies": { "json-server": "^0.17.0" } } |
あとは、先程と同様に npm run json-server でモックサーバーを起動してあげればOKです！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | ▶︎ npm run json-server > sample-api-mock@1.0.0 json-server /path/to/sample-api-mock > json-server --watch db.json --routes routes.json --port 5000 \{^_^}/ hi! Loading db.json Loading routes.json Done Resources http://localhost:5000/user http://localhost:5000/user_1 http://localhost:5000/user_2 Other routes /users?userId=:user_id -> /user_:user_id Home http://localhost:5000 Type s + enter at any time to create a snapshot of the database Watching... |
Other routes が追加され、routes.json で指定したルーティング処理が反映されていることが確認できますね。
レスポンスの確認
それではまた curl コマンドでAPI通信を行いレスポンスを確認してみましょう。
以下コマンドを実行します。
1 | curl --request GET "http://localhost:5000/users?userId=1" |
以下のように指定した id の user が返ってきていれば成功です！
1 2 3 4 5 | ▶︎ curl --request GET "http://localhost:5000/users?userId=1" { "id": 1, "name": "さとう" } |
以上 json-server にルーティング処理を反映する方法でした。
GET メソッド以外のモック化
開発で利用する API は GET リクエストだけじゃないですよね。
POST / PUT / PATCH / DELETE と様々なリクエストメソッドを利用するはずです。
これらと GET メソッドの違いは、実際にDB上のデータを更新するというところにあります。
それでは、user リソースに対して新しい user を作成する POST メソッドを実行してみます。
1 2 3 4 5 | ▶︎ curl --request POST "http://localhost:5000/user" -d '{"id": 3, "name": "こばやし"}' -H "Content-Type: application/json" { "id": 3, "name": "こばやし" } |
POST メソッドの実行が成功しました。
そして、db.json を確認してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { # ↓↓POSTのリクエストボディで送信したデータ ↓↓ "user": { "id": 3, "name": "こばやし" }, "user_1": { "id": 1, "name": "さとう" }, "user_2": { "id": 2, "name": "やました" } } |
POST メソッドのリクエストボディで送信したデータが user オブジェクトに登録され、書き変わっていますね。
正常な挙動であることは間違いないのですが、
「ただ疎通を確認したいだけでデータまで書き変わってほしくない...」
ということも多いと思います。
実際モックサーバーをチーム開発前提で Git 管理していると、モックサーバーを起動して疎通確認をするたびに差分が出ますし、db.json が破茶滅茶なことになりますし、かなり面倒です。
それを解決するためには、API通信をモックサーバーで処理する前に1つ別の処理を挟み、 db.json が更新されないようにする必要があります。
そこで登場するのがミドルウェアです。
ミドルウェアとは？
ミドルウェアとは、文字通りOS⇄アプリケーションの中間（ミドル）に位置するソフトウェアのことで、ざっくり言うとアプリケーションに必要かつ特化した機能を提供するソフトウェアです。
今回の場合では、「APIリクエストを行うOS⇄API通信を処理するモックサーバー」と置き換えた方がわかりやすいと思います。
この2つの間に入り、db.json が更新されないようにする機能を提供するアプリケーションをミドルウェアとして実装していくわけです。
ミドルウェアの実装
プロジェクトのルートディレクトリに middleware.js というファイルを作成し、以下のように記述します。
1 2 3 4 5 6 | module.exports = function (req, next) { if (req.method !== 'GET') { req.method = 'GET' } next() } |
内容は、送信されたリクエストメソッドが GET 以外の場合は GET に置き換えて処理を行う、という単純なものです。
これで、どのメソッドでモックサーバーにリクエストを行っても、ミドルウェアが全て GET メソッドに置き換えてくれるため、 db.json が更新されることがなくなります。
あとは、これをルーティング処理の時と同様に、モックサーバーに組み込んで起動します。
モックサーバーの起動
package.json の scripts ブロックに記述した json-server に、 --middleware オプションをさらに追記しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "name": "sample-api-mock", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", # ↓↓書き換え↓↓ "json-server": "json-server --watch db.json --routes routes.json --middlewares middleware.js --port 5000" }, "author": "", "license": "ISC", "devDependencies": { "json-server": "^0.17.0" } } |
そして、先ほどまでと同様に npm run json-server でモックサーバーを起動しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | ▶︎ npm run json-server > sample-api-mock@1.0.0 json-server /path/to/sample-api-mock > json-server --watch db.json --routes routes.json --middlewares middleware.js --port 5000 \{^_^}/ hi! Loading db.json Loading routes.json Loading middleware.js Done Resources http://localhost:5000/user http://localhost:5000/user_1 http://localhost:5000/user_2 Other routes /users?userId=:user_id -> /user_:user_id Home http://localhost:5000 Type s + enter at any time to create a snapshot of the database Watching... |
Loading middleware.js が表示され、ミドルウェアの処理を組み込んだモックサーバーを起動できたことが確認できました。
POST メソッドでレスポンス & 動作確認
それでは、もう一度今章の冒頭と同じ POST メソッドでリクエストを送り、動作確認していきましょう。
まずはレスポンスから。
1 2 3 4 5 | ▶︎ curl --request POST "http://localhost:5000/user" -d '{"id": 3, "name": "こばやし"}' -H "Content-Type: application/json" { "id": 0, "name": "たなかたろう" } |
db.json の user に登録されているデータがレスポンスで返ってきてますね。
ミドルウェアの処理で GET リクエストに変換され、 db.json にある user オブジェクトが取得されたためですね。
次に db.json が更新されていないか確認しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { "user": { "id": 0, "name": "たなかたろう" }, "user_1": { "id": 1, "name": "さとう" }, "user_2": { "id": 2, "name": "やました" } } |
これで無事 db.json を更新せず、 GET メソッド以外のリクエストをモック化することができました！
サンプル
↓に今回のコードをまとめていますので、ぜひ確認用にご利用ください！
さいごに
いかがだったでしょうか？
以上が json-server を用いた基本的な REST API のモックサーバーの実装方法と使い方でした。
今回は基本に重点を置いて解説したので触れませんでしたが、ミドルウェア部分ではレスポンスにも処理を加えることができるので、
- ステータスコードを変更する
- エラーを返す
- ヘッダを付与して返す
など、様々な挙動をモック化することができます。
触ってみて、こちらにも興味があればぜひ調べてみてくださいね！
この記事が1人でも多くの方のお役に立てれば幸いです。
ご覧いただきありがとうございました！
書いた人はこんな人
- 「クレヨンしんちゃんは人生のマニュアル」が口癖なモバイルアプリとバックエンドやってる人
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
