開発効率UP：たった数行のコマンドで API を作れる json-server の基本操作ガイド（GET・POST・PUT・DELETE）

## はじめに
`json-server` は、手軽に REST API を構築できるツールで、バックエンドを作らずに API をエミュレートできます。

:::note info
**本記事では、`json-server` を使ってデータの取得、追加、更新、削除の基本操作を解説します。**
:::

フロントエンドの開発や API のテストに便利なため、ぜひ活用してください。  

## 書こうと思ったきっかけ  
API の開発やテストでは、本番環境のデータを使わずに検証したい場面があります。

:::note warn
***そのようなときに `json-server` を使えば、簡単にモック API を作成できます。***
:::

実際に `json-server` を使う機会が増えたため、基本的な使い方をまとめてみました。

## `json-server` を使った API 操作ガイド一覧

`json-server`（Node.js）を使えば、わずか 3 分でモックサーバー（Mock Server）を構築できます。**詳しい手順は、前回の記事で紹介しているので、ぜひ参考にしてください。**

https://qiita.com/free-honda/items/b36b94f1b7e76194d667

### **GET: ユーザー一覧を取得**
```sh
curl http://localhost:3000/users
```
➡ `db.json` の `users` データを取得。

**どう動くのか？**
このリクエストは、`json-server` によって以下のように処理されます：

1. `json-server` は `db.json` を読み込み、`users` というリソースがあるか確認。
2. `users` があれば、`JSON` 形式で全データを返す。
3. レスポンスは通常以下のようになる：

```json
[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]
```

**コマンドでの表示例**

![Screenshot 2025-02-12 at 18.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/f85d475d-fa53-40ed-a10f-9d616359b7a9.png)

### POST: 新しいユーザーを追加
```sh
curl -X POST -H "Content-Type: application/json" -d '{"id":3,"name":"Charlie"}' http://localhost:3000/users
```
➡ `db.json` に `{"id":3, "name":"Charlie"}` を追加。

**どう動くのか？**

1. `-X POST` で **POST メソッド** を指定。
2. `-H "Content-Type: application/json"` でリクエストヘッダーを設定し、JSON データを送ることを明示。
3. `-d '{"id":3,"name":"Charlie"}'` で送信データを指定。
4. `json-server` は `db.json` を更新し、以下のようなレスポンスを返す：

```json
{
  "id": 3,
  "name": "Charlie"
}
```

5. その後、GET すると以下のようにデータが増えているはず：

```json
[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" },
  { "id": 3, "name": "Charlie" }
]
```

**確認方法**
```sh
curl http://localhost:3000/users/3
```
➡ `id:3` のデータが取得できるか確認。

**コマンドでの表示例**

![Screenshot 2025-02-12 at 18.53.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/2b5de8d3-2c75-48f5-be5d-a071ac8a6656.png)

**ID を自動生成する方法**

`json-server` には ID 自動生成機能があるため、`id` を省略しても OK：
```sh
curl -X POST -H "Content-Type: application/json" -d '{"name":"David"}' http://localhost:3000/users
```
➡ すると、ID が自動で付与される。

### PUT: ユーザー情報を更新
```sh
curl -X PUT -H "Content-Type: application/json" -d '{"id":1,"name":"Alice Updated"}' http://localhost:3000/users/1
```
➡ `id:1` のユーザー名を "Alice Updated" に変更。

**どう動くのか？**
1. `PUT` メソッドを指定し、特定の ID (`/users/1`) に対してリクエストを送信。
2. `json-server` は `db.json` の `id:1` のデータを探し、新しいデータで上書き。
3. レスポンスとして、更新後のデータを返す：

```json
{
  "id": 1,
  "name": "Alice Updated"
}
```

**GET で変更を確認**

```sh
curl http://localhost:3000/users/1
```
➡ `{"id":1, "name":"Alice Updated"}` が返ってくれば成功。

**コマンドでの表示例**

![Screenshot 2025-02-12 at 18.57.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/d990e10c-b652-49e8-816d-220c7b8b4f76.png)


**部分更新 (PATCH) も可能**
```sh
curl -X PATCH -H "Content-Type: application/json" -d '{"name":"Alice Pro"}' http://localhost:3000/users/1
```
➡ `name` だけ変更し、`id` はそのまま。

### DELETE: ユーザーを削除
```sh
curl -X DELETE http://localhost:3000/users/2
```
➡ `id:2` のユーザー (`Bob`) を削除。

**どう動くのか？**

1. `DELETE` メソッドを指定し、`/users/2` にリクエストを送る。
2. `json-server` は `id:2` のデータを `db.json` から削除。
3. レスポンスとして `{}`（空オブジェクト）を返す。

**GET で削除確認**

```sh
curl http://localhost:3000/users
```
➡ `id:2` が消えていれば成功。

**コマンドでの表示例**

![Screenshot 2025-02-12 at 18.58.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/b5dcbf05-da12-4194-ac22-108a2c535287.png)

## まとめ
**GET:** `curl http://localhost:3000/users` → ユーザー一覧取得  
**POST:** `curl -X POST -d '{"name":"Charlie"}'` → 新しいユーザーを追加  
**PUT:** `curl -X PUT -d '{"id":1, "name":"Alice Updated"}'` → `id:1` のユーザーを更新  
**PATCH:** `curl -X PATCH -d '{"name":"Alice Pro"}'` → `id:1` の一部データを更新  
**DELETE:** `curl -X DELETE http://localhost:3000/users/2` → `id:2` を削除  

これで `json-server` を使って簡単に API のテストができます！