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


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

フロントエンド開発をおこなっていると、

「まだバックエンドができていないけれども単体テストをおこないたい」

というケースがしばしばあります。

そんなときに便利なのがnode.jsのライブラリである 『JSON Server』 です。

今回はJSON Serverの使い方を解説していきます。

目次
  1. JSON Serverとは?
  2. JSON Serverの使い方
  3. JSON Serverのインストール
  4. モックデータの作成
  5. JSON Serverの起動
  6. curlコマンドで確認
  7. データの追加、更新、削除
  8. ルーティングの指定
  9. まとめ

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

Webサイト担当者としてのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

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

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


関連記事

りもた
この記事を書いた人
りもた
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp