• トップ
  • ブログ一覧
  • 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}

    これで無事 db.json を更新せず、 GET メソッド以外のリクエストをモック化することができました!

    サンプル

    ↓に今回のコードをまとめていますので、ぜひ確認用にご利用ください!

    https://github.com/yoshiyasuko/sample-api-mock

    さいごに

    いかがだったでしょうか?

    以上が json-server を用いた基本的な REST API のモックサーバーの実装方法と使い方でした。

    今回は基本に重点を置いて解説したので触れませんでしたが、ミドルウェア部分ではレスポンスにも処理を加えることができるので、

    1. ステータスコードを変更する
    2. エラーを返す
    3. ヘッダを付与して返す

    など、様々な挙動をモック化することができます。

    触ってみて、こちらにも興味があればぜひ調べてみてくださいね!

    この記事が1人でも多くの方のお役に立てれば幸いです。

    ご覧いただきありがとうございました!

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    こー(エンジニア)
    こー(エンジニア)
    Show more...

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background