はじめに

API を利用する際、POST リクエストで JSON データを送信する場面は多くあります。

しかし、実際に試してみると、期待通りにデータが挿入されずに困ることがあります。

本記事では、そうした問題を防ぐために、json-server を使って POST（データの追加）と GET（データの取得）の流れを説明します。

書こうと思ったきっかけ

実際に POST で JSON データを送信した際に、データが挿入されない事象に遭遇しました。

原因を調べ、適切な方法でデータを送信することで解決したため、同じ問題に直面している方の参考になればと思い、この記事を書くことにしました。

json-server を使った POST・GET の流れ

1. json-server をセットアップ

まず、json-server をインストールして起動します。

npm install -g json-server
json-server --watch db.json --port 1323

これで http://localhost:1323/ に API が動作します。

2. `db.json` を作成

初期データとして、以下の db.json を作成します。

{
  "users": []
}

初めはデータが空の状態です。

ブラウザでの表示例

3. POST でデータを追加

以下のコマンドで、ユーザー Alice のデータを追加します。

curl -X POST "http://localhost:1323/users" \
  -H "Content-Type: application/json" \
  -d '{"name": "Alice", "email": "alice@example.com"}'

このリクエストを実行すると、db.json に Alice のデータが追加され、json-server が自動的に id を付与します。

これにより、新しいユーザーがデータベースに登録されます。

4. GET でデータを取得

追加されたデータを確認するため、以下のコマンドで取得します。

curl -X GET "http://localhost:1323/users"

レスポンス（GET の結果）:

[
  {
    "id": cd24,
    "name": "Alice",
    "email": "alice@example.com"
  }
]

このレスポンスを確認することで、Alice のデータが users エンドポイントに追加されたことがわかります。id は json-server によって自動的に生成されます。

データが期待通り追加されたことを確かめるため、ブラウザでhttp://localhost:1323/users にアクセスすることもできます。

ブラウザでの表示例

5. POST → GET の流れをもう一度試す

次に、Bob のデータを追加してみます。

curl -X POST "http://localhost:1323/users" \
  -H "Content-Type: application/json" \
  -d '{"name": "Bob", "email": "bob@example.com"}'

再度 GET で確認。

curl -X GET "http://localhost:1323/users"

レスポンス（GET の結果）:

[
  {
    "id": "cd24",
    "name": "Alice",
    "email": "alice@example.com"
  },
  {
    "id": "98be",
    "name": "Bob",
    "email": "bob@example.com"
  }
]

Alice に加えて Bob のデータが追加されていることが確認できます。

ブラウザでの表示例

まとめ

POST でデータを追加
GET でデータを確認
追加 → 確認を繰り返し、API の動作を試す

これで、モック API を使ってデータの追加・取得の流れを簡単に試せます！

実際のアプリ開発では、これらの API をフロントエンドと連携させて、ユーザー登録やデータ取得の機能を実装することができます。

他にも、PUT を使ったデータ更新や、DELETE を使ったデータ削除の API を追加すると、CRUD（Create, Read, Update, Delete）の流れを試せるようになります。

興味があれば、ぜひ試してみてください！