POST/PUT/DELETEリクエスト
このレッスンで分かること
- POST / PUT / PATCH / DELETE で CRUD を表現
methodheadersbodyをfetchの 2 番目の引数で指定- JSON 送信は
body: JSON.stringify(...)+Content-Type: application/json- DELETE は通常ボディなし、URL でリソース ID を指定
POST/PUT/DELETEリクエスト とは
fetchでデータの作成・更新・削除リクエストを送る方法を学ぼう。本レッスンでは、POST/PUT/DELETEリクエスト の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
POST/PUT/DELETEリクエスト
fetchでデータの作成・更新・削除を行う方法を学びましょう。
POSTリクエスト
JavaScript
const response = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "太郎", age: 25 })
});PUT / DELETE
JavaScript
// PUT: データの更新
await fetch("/api/users/123", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "太郎（更新）" })
});
// DELETE: データの削除
await fetch("/api/users/123", { method: "DELETE" });この問題では、HTTPメソッドに応じたリクエスト設定オブジェクトを構築する関数を実装しましょう。
実務で遭遇するパターン
中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。
- ユーザー作成 ─
fetch("/api/users", { method: "POST", body: JSON.stringify(user) }) - 部分更新 ─
PATCH /api/users/123で email だけ変更 - 削除 ─
DELETE /api/users/123 - マルチパート アップロード ─
body: formDataでContent-Type自動付与
コードレビューで指摘されがちなポイント
PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。
Content-Type忘れ ─ JSON POST 時の定番ミスbodyを JSON.stringify し忘れ ─ オブジェクトを直接渡すと[object Object]PUTとPATCHの混同 ─ 全更新か部分更新かresponse.okチェック忘れ ─ 4xx / 5xx でも成功と誤判定
パフォーマンス考慮事項
- Keep-Alive ─ ブラウザが自動でコネクション再利用
- バルクオペレーション ─ 1 件ずつ POST より 1 回の POST で配列を送るほうが速い
Promise.allで並列削除 ─ 独立した削除を同時実行fetchキャンセル ─AbortControllerで長時間リクエストを中断
ここまでの要点
CRUD は POST / PUT / PATCH / DELETE、JSON ボディは Content-Type 付き、response.ok チェック、バルク化で性能改善。
よくある質問
Q. PUT と PATCH はどう使い分けますか？
A. PUT はリソース全体を置き換え、PATCH は部分更新です。例えばユーザー情報全体を送るなら PUT、メールアドレスだけ変えるなら PATCH が REST の慣習に沿います。冪等性は PUT が保証、PATCH は実装次第になります。
Q. 冪等性とは何ですか？
A. 同じリクエストを何度送っても結果が変わらない性質です。GET / PUT / DELETE は冪等、POST は通常冪等ではありません。ネットワークエラーで再送される可能性がある API では、冪等な操作にしておくと安全です。idempotency-key ヘッダで明示する手法もあります。
Q. DELETE のリクエストにボディを入れて良い？
A. HTTP 仕様上は許されていますが、扱わないライブラリやプロキシも多いため避けるのが無難です。複雑な削除条件はクエリパラメータか、POST /resource/delete のようなアクションエンドポイントを使うとトラブルを避けられます。
次のレッスン
次は エラーハンドリングとAPI設計 で、fetchでデータの作成・更新・削除リクエストを送る方法を学ぼう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- POST/PUT/DELETEリクエスト の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. POST/PUT/DELETEリクエスト とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
buildRequestConfig("post", {"name":"太郎"}, {}) → {"body":"{\"name\":\"太郎\"}","headers":{"Content-Type":"application/json"},"method":"POST"}
buildRequestConfig("get", null, {"Authorization":"Bearer token"}) → {"headers":{"Authorization":"Bearer token","Content-Type":"application/json"},"method":"GET"}
buildRequestConfig("delete", null, {}) → {"body":null,"headers":{"Content-Type":"application/json"},"method":"DELETE"}