はじめに
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）の流れを試せるようになります。
興味があれば、ぜひ試してみてください！