173
133

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

KIT AppDeveloperAdvent Calendar 2015

Day 21

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

Posted at

本記事は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の状態も見ることができます。
完璧ですね。
他にも色々機能があるので公式ページを確認して見てください。

173
133
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
173
133

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?