APIモックを使って開発速度を上げよう

本記事はKIT AppDeveloper Advent Calendar 2015の21日目の記事です。

APIの実装が追いついてなくてクライアント側が開発できない？

開発初期段階の場合だとよくあることだと思います。
APIの設計自体は全体通して済ませてあることが前提として必要ですが
レスポンスでどういうものが返ってくるか決まっているのであれば、APIのモックでダミーデータを返すことで、API実装が間に合っていなくともクライアントの開発を進めることができます。
また、クライアント側の開発によってAPI実装の修正が必要なときに、「このようなjsonのデータが欲しい」と伝えるのが簡単で分かりやすくなります。

APIのモックができたらいいこと

モックとはモックアップのことで、試作で作る模型のようなイメージです。
では、APIのモックとして何ができると嬉しいかというと最低でも下記のようなことができると、クライアント側の開発で利用することができると思います。

• URLにアクセスしてデータを返す。
• レスポンスを簡単に設計できる。
• GETでフィルターとかフィルターとかできると嬉しい！
• GETだけじゃなくてPOSTもできると嬉しい！！！

期待に答えてくれるAPIモックライブラリ json-server

なんと簡単にレスポンスの設計をできて、GETでフィルターやソートができて、POSTも出来ちゃうAPIのモック用のライブラリがあるんです！

Github: json-server

npmでインストールするだけで使えます。
グローバルにインストールしたくない人は、各プロジェクトのフォルダなどにインストールしましょう。

npm install -g json-server

1.APIのモックサーバーを起動する

まず、db.jsonのようなファイルを作成します。

db.json

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    },
    {
      "id": 2,
      "title": "hoge",
      "author": "hogehoge"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

そのファイルに対してjson-server -w db.jsonするだけでダミーデータを返すAPIが出来ます。

$ json-server -w db.json                                                     

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

2.APIのレスポンスを確認する

まずはGETを確認してみましょう。

$ curl -X GET "http://localhost:3000/posts"
[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  },
  {
    "id": 2,
    "title": "hoge",
    "author": "hogehoge"
  }
]

$ curl -X GET "http://localhost:3000/comments"
[
  {
    "id": 1,
    "body": "some comment",
    "postId": 1
  }
]

一つの要素だけ取得することも出来ます。

$ curl -X GET "http://localhost:3000/posts/1"
{
  "id": 1,
  "title": "json-server",
  "author": "typicode"
}

では、フィルターやソートをかけてみましょう。
まずは、ソート（_sort=ソートしたいキー&_order=昇順or降順）で指定できます。

$ curl -X GET "http://localhost:3000/posts?_sort=id&_order=DESC"
[
  {
    "id": 2,
    "title": "hoge",
    "author": "hogehoge"
  },
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  }
]

次に、フィルター（?フィルターしたいキー=フィルターしたい値&フィルターしたいキー=フィルターしたい値&...）で指定できます。

$ curl -X GET "http://localhost:3000/posts?title=json-server"
[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  }
]

最後にPOST！！！

$ curl -X POST -d "id=3&title=fuga&author=fugauga" "http://localhost:3000/posts"
$ curl -X GET "http://localhost:3000/posts"
[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  },
  {
    "id": 2,
    "title": "hoge",
    "author": "hogehoge"
  },
  {
    "id": 3,
    "title": "fuga",
    "author": "fugauga"
  }
]

追加されてますね。
ファイルを確認すれば分かりますが、きっちり書き込まれています。

他にもhttp://localhost:3000にアクセスすれば、現在の構成やdbの状態も見ることができます。
完璧ですね。
他にも色々機能があるので公式ページを確認して見てください。