【初心者向け】JSON Serverの使い方を解説

JSON Serverとは？

JSON Serverとは、APIのモックを手軽に作成できるnode.jsのライブラリです。フロントエンドの単体テストをおこなえる、仮のAPIを手軽に作成できます。

JSON Serverの使い方

では、実際にその使い方を解説していきます。

JSON Serverのインストール

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

グローバルの場合

npm install -g json-server

ローカルの場合

npm install –save-dev json-server

モックデータの作成

次に、任意の名称でモックデータを作成します。今回は公式ドキュメントに沿って、db.jsonというファイルを作成しました。

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を起動します。以下のコマンドを実行してください。

json-server –watch 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...

curlコマンドで確認

では、実際にデータにアクセスしてみましょう。以下のコマンドでdb.jsonにアクセスします。

curl -X GET http://localhost:3000/posts/1

以下のようなデータが帰ってくると成功です。

{ "id": 1, "title": "json-server", "author": "typicode" }

データの追加、更新、削除

GETによってデータを取得する以外にも、POSTでデータの追加、PUTでデータの更新、DELETEでデータの削除が可能です。

POST

curl -X POST http://localhost:3000/posts/ -d ‘id=2&title=json-server2&author=typicode2’

すると、db.jsonが以下のように変更されます。

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

また、idは省略すると自動的に割り振られます。

PUT

curl -X http://localhost:3000/posts/2 -d ‘id=3&title=json-server3&author=typicode3’

db.jsonは以下のように変更されます。

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

DELETE

curl -X DELETE http://localhost:3000/posts/3

db.jsonは以下のように変更されます。

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

ルーティングの指定

JSON Serverでは別ファイルにルーティングを設定することができます。今回はroutes.jsonというファイルを作成します。例えば、

• ”/api/posts”にアクセスした時に”posts”
• ”/api/comments”にアクセスした時に”comments”
• ”/api/profile”にアクセスした時に”profile”

のデータを返したいときは以下のようにします。

route.json

{
   " / api / posts"：" posts",
   " / api / comments "：" comments",
   " / api / profile"：" profile",
}

ルーティングを指定するときは、--routesオプションでルーティングを設定したファイルを指定してJSON サーバーを起動します。

json-server db.json –routes routes.json

まとめ

今回はJSON Serverの基本的な使い方を解説しました。

これ以外にも機能があるので、より詳しく知りたい方はぜひ公式ドキュメントをご覧ください。