【APIモック】json-serverの導入手順

はじめに

どうもこんにちは、悠です。

先日妻から「json-serverを使ってAPIサーバーを立てたいけどうまくいかない」という相談を受けまして、その際にまとめた手順を記します。

json-serverとはなんぞや

ローカル環境で簡単にAPIモックサーバーを立てられるnpmパッケージです。
↓gitのリンクはこちらです。↓

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

モックってなんやねんって方はこちらのサイト様をご参照ください。

https://wa3.i-3-i.info/word19051.html

簡単にいうと表面上のみそれっぽい動きをするものです。

APIを呼び出す機能を実装する際、API側の準備が出来ていない等の事情によりAPIを呼び出す前後の処理の動作確認が出来ないことがあると思います。
モックサーバーを立てればAPI側の準備を待たずとも、APIを呼び出す処理の前後の動作確認をすることが出来るので開発がスムーズに進められるメリットがあります。

どこでうまくいかなかったのか？

妻のやりたいこと：次の動きをするモックサーバーを立てたい

1. アプリからPOSTリクエストをAPIに送信する
2. APIからは想定している形のデータがJSON形式で返ってくる

ですがjson-serverのデフォルトの動作だと2の際に期待と違う動きをします。
json-serverのPOSTのレスポンスは「idが付与されただけのリクエストデータ」がそのまま返ってくる仕様のためです。

そこでjson-serverには「middleware」というオプションがあるはずなんですが、どうやら最新のバージョンだとこのオプションが使えなくなっています。

バグなのか仕様なのかは不明ですが、オプションを使おうとしても「そんなオプションねーよ！」というエラーが出てうまくいかなかったという経緯でした。

解決策

middlewareオプションが存在したバージョンのjson-serverをインストールする

手順

1.json-serverバージョン0.17.3をインストールする

vscodeでターミナルでインストール先のフォルダを開いてnpm installコマンドを実行します。
私は分かりやすくそのままの名前で「json-sever」というフォルダを作ってインストールしました。

npm install json-server@0.17.3

2.index.jsと同階層に「db.json」を作成する

名前の通り疑似的なdbです。今回は任意のデータをPOSTの返却値に指定するために利用します。
ちなみに、デフォルトjson-serverでPOSTを実行すると、リクエストデータにidを付与したデータがdb.jsonに自動で使いされていきます。

{
  "users": [
    {
      "id": "1",
      "FirstName": "Taro",
      "LastName": "Yamada"
    },
    {
      "id": "2",
      "FirstName": "Jiro",
      "LastName": "Tanaka"
    },
    {
      "id": "e3ed",
      "targetid": "testid",
      "token": "testtoken"
    }
  ]
}

3.index.jsと同階層に「middleware.js」を作成する

module.exports = function (req, res, next) {
    console.log(req.headers);
    console.log(req.method);
    console.log(req.body);

    if (req.method === 'POST') {
        req.method = 'GET'
        if (req.url === "/api/GetUser") {
            // 説明
            // 1. /users ← API名(db.jsonのキー名)
            // 2. /1 ← id(db.jsonに記載されているid(自動付与されたりしているやつ))
            // (例)以下のようなデータの場合、/users/testid をとると、配列の3つ目にあるデータが取得される
            // {
            //     "users": [
            //       {
            //         "id": "1",
            //         "FirstName": "Taro",
            //         "LastName": "Yamada"
            //       },
            //       {
            //         "id": "2",
            //         "FirstName": "Jiro",
            //         "LastName": "Tanaka"
            //       },
            //       {
            //         "id": "testid",
            //         "token": "testtoken"
            //       },
            //       {
            //         "id": "e3ed",
            //         "targetid": "testid",
            //         "token": "testtoken"
            //       }
            //     ]
            //   }
            req.url = "/users/1"
        }
    }
    next()
}

こちらのコードは「POSTで特定のAPIが実行された場合、json-server的にはGETで実行された場合の処理に置換する」ということをしています。

GETの場合はdb.jsonの特定のレコードを返却する動作になるので、POSTの返却値を任意のデータに出来るという仕組みです。

「if (req.url === “/api/GetUser”)」の○○部分がAPIのパスです。
想定しているAPIと同じ名前に置き換えてください。

「req.url = “/users/1″」の部分で任意のデータを指定しています。

4.middlewareオプションを付けてjson-serverを起動する

「-m」がmiddlewareオプションで、「middleware.js」をミドルウェアとして使いますよという指定をしています。
オプションを付けないとデフォルトの動作になってしまうのでご注意ください。
「-p」がポート番号指定のオプションです。ポート番号は3000でないといけないわけではないので任意のものをご指定ください。

npx json-server --watch db.json -p 3000 -m middleware.js

これでモックサーバーは立ち上がりました。

5.APIを実行する

あとはアプリからAPIを実行するだけではありますが、念のためChromeの拡張機能等を利用してモックAPI単体で動くかどうかを試してみることをおすすめします。

Chromeの拡張機能に「Talend API Tester」というものがあるので私はこちらを利用しております。

最後に

json-serverを私は使ったことが無かったのですが、実務で使えそうだなーと思いました。
経験則でしかないですがAPI側が待ちになったり、API呼び出し口周りで不具合が起きたりといったことはよく聞きます。

機会があれば実務でも利用してみようと思います。
この記事がjson-server導入で詰まった方のお力になれば幸いです。