1分でできるjson-serverによるダミーAPI作成方法

json-serverとは

ダミーAPIを作成できるnode.jsのライブラリ。

最近はフロントエンド側でAPIでjsonを取得して表示させることが多いが、使用するAPIを作成するのはバックエンド側のエンジニアの作業なので、フロントエンドの作業時にはまだ作成されていないことが多いです。

フロントエンドの作業が先行している場合はAPIでjsonが取得できないとJavaScriptのコーディング作業が進まず困ることがあります。

そんなときはjson-serverを使用すればダミーAPIを簡単に作成できます。

json-serverの使い方

まず以下のコマンドでインストールします。

npm install -g json-server

次にJSONファイルを作成します。(例としてdb.jsonで作成)

ファイル名は自由ですが、[{}]の形で作成することはできません。

{
  "data": [
    { "id": 1, "name": "sato", "age": 34 },
    { "id": 2, "name": "suzuki", "age": 18 },
    { "id": 3, "name": "tanaka", "age": 26 }
  ]
}

// このような形は可能
{
  "foo": [],
  "bar": {}
}

// この形は不可
[
  { "id": 1, "name": "sato", "age": 34 },
  { "id": 2, "name": "suzuki", "age": 18 },
  { "id": 3, "name": "tanaka", "age": 26 }
]

JSONファイルを作成したら以下のコマンドでサーバーを起動します。

json-server --watch db.json

コマンドを実行して以下のようなメッセージが表示されたらResourcesに書かれているURLをJavaScriptのfetchなどで指定してJSONを読み込むことができます。

$ json-server --watch db.json

\{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:3000/data

Home
http://localhost:3000

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

fetch('http://localhost:3000/data')
  .then(response => response.json())
  .then(data => console.log(data))

idを指定して読み込む

先程のURLのうしろに /1 のように特定のidを指定すればそのidのデータだけを読み込める。

fetch('http://localhost:3000/data/1')
  .then(response => response.json())
  .then(data => console.log(data))
  // [{id: 1, name: 'sato', age: 34}]

_limitで読み込み上限を指定する

URLに_limit=2のようなパラメータを付けることで最大表示数を指定できる。

fetch('http://localhost:3000/data?_limit=2')
  .then(response => response.json())
  .then(data => console.log(data))
  // [
  //   {id: 1, name: 'sato', age: 34},
  //   {id: 2, name: 'suzuki', age: 18}
  // ]

_pageパラメーターを併用すればページネーションの確認に利用できます。

fetch('http://localhost:3000/data?_limit=2&_page=2')
  .then(response => response.json())
  .then(data => console.log(data))
  // [{id: 3, name: 'tanaka', age: 26}]

--delayオプションで応答を遅延させる

json-serverはローカルで実行されるため遅延がほとんどないです。

遅延がないとローディング中の表示がほとんど表示されないため、ローディング中の表示を確認することができません。

そんなときは--delayオプションで応答の遅延時間を設定すればローディング画像を表示できます。

例えば表示までに3秒遅延させる場合は--delay 3000を追加します。

json-server --watch --delay 3000 db.json

その他のパラメーターはGitHubを確認

ここまで書いた内容だけでもダミーAPIとして問題なく使えるが、ほかにもフィルターやソートなどが使用可能です。

詳しくはjson-serverのGitHubをご確認ください。