【Tool】json-server のインストールと使い方

json-server を使ってみたいんだけど、どうすれば良いのかな？

今回は、JSON ファイルを簡単に REST API に変換してくれる Node.js ライブラリ json-server について、インストール方法や使い方 をご紹介します。

json-server とは？
json-server のインストールと使い方
まとめ
公式サイト

json-server とは？

json-server とは、JSON ファイルを GET / POST / PUT / DELETE などの REST API に簡単に構築できる Node.js ライブラリ のことで、バックエンドの実装がまだ完了していない場合 でも、本番用 API の代わり となる モック（疑似的な）API サーバー として、フロントエンド開発に活用する ことができます。

※ Node.js/npm のインストール がまだの場合は、下記より Node.js/npm のインストール を行なってください。

json-server のインストールと使い方

json-server のインストール

// グローバルインストールする場合
npm install -g json-server

// ローカルにインストールする場合
npm install json-server

JSON ファイルの作成

db.json で JSON ファイル を作成

{
  "users": [
    { "id": 1, "name": "Taro Yamada", "email": "taro@example.com", "age": 25 },
    { "id": 2, "name": "Hanako Suzuki", "email": "hanako@example.com", "age": 30 }
  ]
}

json-server の起動

// グローバルインストールする場合 
// ※ファイル名： db.json 
// ※ポート番号を指定する場合 --port ポート番号
// ※遅延させたい場合 --delay 1000（ミリ秒単位）
json-server --watch db.json --port 3300 --delay 1000

// ローカルにインストールする場合
npx json-server --watch db.json

エンドポイント ※users

HTTPメソッド	エンドポイント	内容	説明	URL例
GET	`/users`	一覧取得	すべてのユーザーを取得	`http://localhost:3300/users`
GET	`/users/:id`	1件取得	指定したIDのユーザーを取得	`http://localhost:3300/users/1`
POST	`/users`	新規作成	ユーザーを追加（idは自動採番）	`http://localhost:3300/users`
PUT	`/users/:id`	全体更新	指定IDのデータをすべて上書き	`http://localhost:3300/users/1`
PATCH	`/users/:id`	部分更新	指定IDの一部項目のみ更新	`http://localhost:3300/users/1`
DELETE	`/users/:id`	削除	指定IDのユーザーを削除	`http://localhost:3300/users/1`

検索・並び替え・制限 ※users

機能	URL例	説明
条件検索	`http://localhost:3300/users?age=25`	age が 25 のユーザー
複数条件検索	`http://localhost:3300/users?name=Taro&age=25`	複数条件で検索
並び替え（昇順）	`http://localhost:3300/users?_sort=age&_order=asc`	age の昇順
並び替え（降順）	`http://localhost:3300/users?_sort=age&_order=desc`	age の降順
件数制限	`http://localhost:3300/users?_limit=1`	1件だけ取得

まとめ

json-server の インストール方法や使い方 について、いかがでしたでしょうか？

json-server は、JSON ファイルから REST API を簡単に構築できるツール です。
バックエンドの実装がまだ完了していない場合 でも、開発用のモック（疑似的な）API サーバー として、活用する ことができます。

ぜひ json-server をインストールして、効率的で快適なフロントエンド開発を進めていきましょう。