WebAPIのモックアップ作りにjson-serverがすごい便利だった【旧ブログ】

【この記事は旧ブログから移転したものです】

現在、Xamarinを使って学祭のアプリを開発中なのですが、サーバサイドとクライアントサイドで友人と分担してて、クライアントサイド担当の私がAPIの仕様決めて友人がそれを作るみたいな感じでやってます。何度も仕様を変更するのも悪いので、ガチガチに仕様を固めてから渡そうとローカルでAPIのモックアップを作ろうと思ったらこんなのを見つけました。

【個人メモ】JSON Serverを使って手っ取り早くWebAPIのモックアップを作る - Qiita

npmパッケージのjson-serverというもので、jsonファイルを元にWebAPIのモックアップを作ってくれるらしいです。

さっそく使ってみる。

インストール

ターミナルで以下のコマンドを入力して下さい。

$ npm install -g json-server

npmコマンドが使える前提です。 -gオプションを付けてシステムにインストールしています。

jsonファイルを用意する

初めは引用元のような下のjsonファイルを用意しました。

{
  "users": [
    {
      "id": 1,
      "name": "futoase"
    },
    {
      "id": 2,
      "name": "hogehoge"
    }
  ],
  "limit": 100
}

すると、次のようなエラーが発生。

$ json-server db.json 

  \{^_^}/ hi!

  Loading db.json
  Done
/usr/local/lib/node_modules/json-server/src/server/router/index.js:73
    throw new Error(msg)
          ^
Error: Type of "limit" (number) in db.json is not supported. Use objects or arrays of objects.
    at /usr/local/lib/node_modules/json-server/src/server/router/index.js:73:11
    at /usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:4389:15
    at baseForOwn (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:2652:24)
    at /usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:4358:18
    at Function.forEach (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:8561:14)
    at /usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:3877:28
    at arrayReduce (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:639:21)
    at baseWrapperValue (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:3876:14)
    at LodashWrapper.wrapperValue (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:8261:14)
    at LodashWrapper.<anonymous> (/usr/local/lib/node_modules/json-server/node_modules/lowdb/lib/index.js:77:19)

どうやらlimitのところでエラーが起きているようです。原因はわからず…..。

とりあえずlimitのところを削ると無事動きました。

$ json-server db.json

\{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:3000/users

Home
http://localhost:3000

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

表示されているように、http://localhost:3000/usersでユーザーの一覧を取得できるみたいです。

その他

引用元では他にもレコードの更新やスナップショットの取り方も公開されています。

json-server、非常に便利ですね。サーバと連携するアプリの開発が捗りそうです。