【json-server】簡単にモックAPI（モックサーバー）を作る手順や使い方（起動や設定方法など）

json-serverはレスポンスの中身をJSONで書くだけで、モックAPIとして動作してくれる便利なツールです。
インストールや起動も簡単にできるので、手軽にモックAPIが欲しいという時は便利なツールになります。
今回は、json-serverの特徴、インストールの手順、基本的な使い方について説明したいと思います。

JSONを書くだけで簡単にモックAPIを作成できるjson-serverの特徴
json-serverのインストール
1. json-serverを使用するにはNode.jsが必要
2. json-serverをインストール
  1. json-serverをグローバルでインストールする場合
  2. json-serverをローカルでインストールする場合
json-serverの起動方法
json-serverの動作確認（GET、POST、PUT、DELETE）
まとめ
1. 関連記事

JSONを書くだけで簡単にモックAPIを作成できるjson-serverの特徴

json-serverは簡単にモックAPIを作れるツールです。
Node.jsさえインストールしておけば、json-serverも簡単にインストールして起動させることができます。

簡単にjson-serverの特徴をまとめました。

難しいコード記述は必要なく、jsonだけ書けば良い
対応しているメソッドは以下
- get
- post
- put
- patch
- delete
以下の機能にも対応
- フィルター
- ページネーション
- ソート
- 演算子

json-serverのインストール

json-serverを使用するにはNode.jsが必要

json-serverはNode.js上で動作するので、まずNode.jsをインストールしておきます。

※本記事では、Node.jsのインストールについては割愛します。

json-serverをインストール

Node.jsのインストールができたら、次にjson-serverのインストールです。
json-serverのインストールはコマンドを1つ実行するだけの簡単操作です。
グローバルでインストールするか、ローカルでインストールするかでオプションが変わります。

json-serverをグローバルでインストールする場合

npm install -g json-server

json-serverをローカルでインストールする場合

npm install -save-dev json-server

json-serverの起動方法

json-serverのインストールがちゃんとできているかの確認を含めてjson-serverを起動してみましょう。

まずは、以下のコードを書いたdb.jsonファイルを作成します。

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

そして、作成したファイルがあるフォルダで以下のコマンドからjson-serverを起動します。

json-server --watch db.json

このコマンドを実行した後、ブラウザでhttp://localhost:3000にアクセスしてみましょう。
ブラウザで下のページのように表示されていれば、json-serverが問題なく起動しています。

json-serverの動作確認（GET、POST、PUT、DELETE）

これから、curlを使って作成したjson-serverのモックAPIの動作を確認します。
curlはサーバーにリクエストを送信して、レスポンスを受け取るツールです。APIの挙動を簡単に確認できるので、便利なツールです。

GETメソッド

GETメソッドを以下のコマンドで実行してみましょう。

curl http://localhost:3000/comments

コマンドを実行すると、commentsのデータを取得できます。

[
  { 
    "id": 1, 
    "body": "some comment", 
    "postId": 1 
  }
]

POSTメソッド

次にPOSTメソッドを使って、データを作成してみましょう。
新しくcommentsを追加したいと思いますので、以下のようにコマンドを実行してください。

curl -XPOST http://localhost:3000/comments -d '{ "id": 2, "body": "new comment", "postId": 2 }' -H "Content-Type: application/json"

※Windowsのコマンドプロンプトでcurlを使用する場合、シングルクォーテーションは文字の括りとして認識してくれないので、Windowsの場合は以下のようにコマンドを打ちます。
この後に出てくるコマンドについても、Windowsの場合は、{}の中のダブルクォテーションの前に¥をつけるようにしてください。

curl -XPOST http://localhost:3000/comments -d "{ ¥"id¥": 2, ¥"body¥": ¥"new comment¥", ¥"postId¥": 2 }" -H "Content-Type: application/json"

データが追加されているかどうかは、db.jsonをエディターで開いて確認するかcurlコマンドでGETしてみましょう。

PUTメソッド

PUTメソッドを使って、データの更新をやってみます。

curl -XPOST http://localhost:3000/comments/2/ -d '{ "body": "update comment", "postId": 2 }' -H "Content-Type: application/json"

こちらもPOSTと同じくdb.jsonファイルを開くかGETを使って更新されているか確認してみましょう。

DELETEメソッド

最後にDELETEメソッドを使って、新しく追加したデータを削除してみます。

curl -XDELETE http://localhost:3000/comments/2

まとめ

今回は、簡単にモックAPIが作成できるjson-serverについて、インストールの手順や基本的な使い方について説明しました。

WEB開発において、フロントエンドを担当している方知っておくと便利なツールになると思いますので、ぜひ使ってみてください。

json-serverをDockerで使うための手順を下の記事でまとめています。Dockerでjson-serverを使いたいと思っている方は確認してみてください。

下記の記事ではjson-serverを使うにあたって、知っておいて損はない設定について紹介しています。