APIのモックアップに便利なjson-server使ってみた。

フロントエンドの制作とかで使えるAPIのモックアップにjson-serverってのが便利だよーって教えてもらったので使ってみた。

インストール

$ yarn add -D json-server

デフォルトのデータを作成

db.json

{
  "articles": [
    {"id": 1, "title": "json-server", "author": "TEST"},
    {"id": 2, "title": "aikatsu", "author": "Johnny"}
  ]
}

サーバーを起動するスクリプトを作成

packege.jsonにjson-serverを起動するnpmスクリプトを作成 packege.json

{
  "scripts": {
    "start": "json-server --watch db.json --port 3001"
  }
}

--watchオプションを付けておくとサーバー起動中に直接db.jsonを編集しても変更内容を反映してくれるようになる。
(メインのアプリを3000で起動することが多いので、json-serverは3001番を指定しました。)

json-serverを起動

$ yarn start

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3001/articles

  Home
  http://localhost:3001

エンドポイントにアクセスしてデータを取得してみる

curlコマンドでDBにアクセスしてみます

$ curl -X GET http://localhost:3001/articles

👇

[
  {"id": 1, "title": "json-server", "author": "CHAIKA"},
  {"id": 2, "title": "aikatsu", "author": "Johnny"}
]

articlesのデータが返されました。

idで単一のデータを取得

データにidキーが有るとhttp://localhost:3001/articles/{id}でデータにアクセスできるようです。
cf. json-server#getting-started

$ curl -X GET http://localhost:3001/articles/2

👇

{"id": 2, "title": "aikatsu", "author": "Johnny"}

GETパラメータを使ってデータを取得

?{key}={value}のいわゆるGETで使われるパラメータ指定はフィルターになるようです。
cf. json-server#filter

$ curl -X GET http://localhost:3001/articles?title=json-servr

👇

[
  {"id": 1, "title": "json-server", "author": "CHAIKA"}
]

フィルターなので配列が返されました。

POST PUT DELETE

GET以外にもPOST, PUT, DELETEも受け付けます。
これらでデータを変更するとdb.jsonが直接変更されます。

POST

$ curl -X POST http://localhost:3001/articles/ -d 'title=foo&author=bar'
{
  "title": "foo",
  "author": "bar",
  "id": 3
}

idが自動的に割り振られてデータが挿入されました。
複数のデータがある場合はPOSTするデータを上記のように'で囲うか、-d title=foo -d author=barの様にデータごと-dオプションをで渡して上げる必要があります。-d title=foo&author=barのようにデータをコーテーションで囲わず送ると、先頭の値だけが受け付けられました。

PUT

$ curl -X PUT http://localhost:3001/articles/3 -d 'title=星宮いちご&author=星宮らいち'
{
  "title": "星宮いちご",
  "author": "星宮らいち",
  "id": 3
}

確認

$ curl -X GET http://localhost:3001/articles/

👇

[
  {"id": 1, "title": "json-server", "author": "CHAIKA"},
  {"id": 2, "title": "aikatsu", "author": "Johnny},
  {"title": "星いちご", "author": "星宮らいち", "id": 3}
]

※ 該当するidのデータがまるっとPUTで送ったデータに置き換えらる

$ curl -X PUT http://localhost:3001/articles/3 -d name=紫吹欄
{
  "name": "紫吹蘭",
  "id": 3
}
$ curl -X GET http://localhost:3001/articles/3

👇

{"name": "紫吹蘭", "id": 3}

もとのパラメータにマージされるわけではないので注意が必要かもです。 (PUTとしては正しい挙動？)

DELETE

$ curl -X DELETE http://localhost:3001/articles/3
{}

確認

$ curl -X GET http://localhost:3001/articles/

👇

[
  {"id": 1, "title": "json-server", "author": "CHAIKA"},
  {"id": 2, "title": "aikatsu", "author": "Johnny}
]

オンメモリで動作させる

jsonファイルを指定して動作させるとPOSTやDELETEでjsonファイルそのものが変更されてしまいますが、JSファイルを指定して実行した場合オンメモリとなりファイルの変更はされません。
公式ドキュメントには1000個のユーザーを作成するサンプルが載っています。cf. json-server#generate-random-data

db.js

module.exports = () => require('./db.json');

package.json

{
  "scripts": {
    "start-js": "json-server --watch db.js --port 3001"
  }
}

実行

$ yarn start-js

元のdb.jsonの内容はデフォルトデータとして利用され変更されることなくPOST, PUT, DELETEでデータが追加・変更・削除可能で、json-serverを走らせているプロセスが生きている限り変更した内容が保持されているようです。

[WIP] ネストしたデータを取得する方法が不明

例えば次のようなデータ

{
  "units": [
    {
      "id": 1,
      "name": "soleil",
      "members": [
        {"id": 1, "name": "星宮いちご", "division": "スターライト学園" },
        {"id": 2, "name": "霧矢あおい", "division": "スターライト学園" },
        {"id": 3, "name": "紫吹蘭", "division": "スターライト学園" }
      ]
    },
    {
      "id": 2,
      "name": "Luminas",
      "members": [
        {"id": 1, "name": "大空あかり", "division": "スターライト学園" },
        {"id": 2, "name": "氷川すみれ", "division": "スターライト学園" },
        {"id": 3, "name": "新条ひなき", "division": "スターライト学園" }
      ]
    },
    {
      "id": 3,
      "name": "WM",
      "members": [
        {"id": 1, "name": "神崎美月", "division": "LOVE MOONRISE" },
        {"id": 2, "name": "夏樹みくる", "division": "ナツキグリーニングガーデン" }
      ]
    }
  ]
}

soleilのデータは次のURLで取得できます。

http://localhost:3001/units/1

soleil内のmembersから星宮いちごちゃんを取得しようとして

$ curl -X GET http://localhost:3001/units/1/members/1
$ curl -X GET http://localhost:3001/units/1/members?name=星宮いちご

としてもデータを取得することが出来ませんでした。
アクセス方法が間違っているのか、そもそもネストしたデータを取れるようになっていないのかは深く調べていないので現状わかっていません。

所感

フラットなデータをやり取りするAPIをjson-serverをインストールしてデータを用意するだけでサクッと作る事ができますので、Firebaseとか実際のサービスと繋ぐ前の開発用途にとても良さそうだと感じました。
ネストしたデータを取る方法がわからないままですが、GitHubのREADMEにはrouterの設定方法なども書いてあるので、自分で設定してしまえばネストしたデータとか複雑なデータでも返せるWEBAPIが作れるのではないかという気がしています。

[参考]