Fetch APIでPUT・DELETEを実行する方法をやさしく解説！初心者でもできるReactのサーバー通信

1. PUTとDELETEの役割とは？

1. PUTとDELETEの役割とは？

PUT（プット）は「データの更新」、DELETE（デリート）は「データの削除」に使われるHTTPリクエストの種類です。

たとえば、プロフィールの情報を編集したり、不要な投稿を削除したりするときに利用されます。

PUTは「この情報で上書きしてください」、DELETEは「この情報を消してください」という指示をサーバーに送るようなイメージです。

2. PUTリクエストの基本的な書き方

2. PUTリクエストの基本的な書き方

まずはPUTリクエストから見てみましょう。以下の例では、投稿データのタイトルと内容を更新しています。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  const handleUpdate = () => {
    fetch("https://jsonplaceholder.typicode.com/posts/1", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: 1,
        title: "更新されたタイトル",
        body: "新しい内容です",
        userId: 1,
      }),
    })
      .then((res) => res.json())
      .then((data) => setMessage("更新成功！新しいタイトル：" + data.title))
      .catch((err) => setMessage("エラー：" + err));
  };

  return (
    <div>
      <h1>投稿を更新</h1>
      <button onClick={handleUpdate}>更新を実行</button>
      <p>{message}</p>
    </div>
  );
}

export default App;

3. PUTリクエストのポイント

3. PUTリクエストのポイント

PUTリクエストでは、method: "PUT"を指定し、headersとbodyの設定をしっかり行うことが重要です。

特にContent-Typeには"application/json"を必ず設定し、送信するデータはJSON.stringify()で文字列に変換して渡しましょう。

4. DELETEリクエストの基本的な書き方

4. DELETEリクエストの基本的な書き方

次に、DELETEリクエストの書き方を見てみましょう。データの削除は、対象のURLに対してDELETEメソッドを使うだけでOKです。

import React, { useState } from "react";

function App() {
  const [status, setStatus] = useState("");

  const handleDelete = () => {
    fetch("https://jsonplaceholder.typicode.com/posts/1", {
      method: "DELETE",
    })
      .then(() => setStatus("削除成功！"))
      .catch((err) => setStatus("削除エラー：" + err));
  };

  return (
    <div>
      <h1>投稿を削除</h1>
      <button onClick={handleDelete}>削除する</button>
      <p>{status}</p>
    </div>
  );
}

export default App;

5. DELETEリクエストの注意点

5. DELETEリクエストの注意点

DELETEリクエストでは、基本的にボディ（body）の送信は不要です。
対象となるデータのURLだけ指定して、method: "DELETE"を設定すれば削除できます。

ただし、サーバーによっては認証が必要な場合や、追加設定が必要なケースもあるので、APIの仕様は確認しておきましょう。

6. 実際のアプリでの使いどころ

6. 実際のアプリでの使いどころ

PUTやDELETEリクエストは、次のような場面でよく使われます。

• プロフィール情報の変更（PUT）
• 投稿の編集や更新（PUT）
• タスクやコメントの削除（DELETE）
• 管理画面からのデータ管理（PUT / DELETE）

これらを理解すると、Reactで本格的なWebアプリを作れるようになります。

7. PUT・DELETEでよくあるエラーと対処法

7. PUT・DELETEでよくあるエラーと対処法

初心者がつまずきやすいポイントをまとめました。

• methodが間違っている：PUTやDELETEを明示的に指定しないと動作しません。
• Content-Typeの指定ミス：PUTでは"application/json"を忘れないように。
• URLの指定ミス：/posts/1など、対象IDの指定が正しいか確認を。
• APIの仕様によりエラー：実際のサーバーでは認証（トークン）などが必要な場合もあります。

最初はテスト用のAPI（例：jsonplaceholder.typicode.com）を使って練習するのがオススメです。

まとめ

まとめ

Fetch APIを使ったPUT・DELETEリクエストは、Reactで本格的なサーバー通信をおこなう上で避けては通れない大切な仕組みです。今回紹介したように、PUTは既存データの更新に、DELETEはデータの削除に使われ、実際のWebアプリケーションではプロフィール変更や投稿の編集、タスク管理の削除など、あらゆる場面で活用されています。サーバーとの通信と聞くと難しそうに感じますが、基本的な決まりさえ覚えれば初心者でも十分に扱える技術です。

PUTでは"Content-Type": "application/json" を指定し、更新内容をJSON形式で送る必要があります。一方、DELETEは基本的に送る内容がなく、対象となるURLに対して削除指示を送るだけで動作します。とてもシンプルですが、しくみを理解すると「なぜこの書き方になるのか」が自然にわかるようになります。こうした基礎知識を身につけておくと、APIドキュメントを読むときにも役立ち、より応用的な書き方にも挑戦しやすくなります。

PUTとDELETEは、Reactで動的なアプリケーションを作る際の重要な構成要素です。ユーザーが情報を更新したり、不要なデータを削除したりといった操作は、Webアプリとして欠かせない機能です。現実的なアプリを作るには避けて通れず、今回学んだ内容はその土台となります。特に、初心者がつまずきやすいポイントを整理しながら練習すると理解が深まります。まずはサンプルコードを手元で動かし、成功と失敗を繰り返してみるのが良い方法です。

ここでは最後に、PUTとDELETEの理解を深めるために、両者をひとつのコンポーネントで動かす少し応用的なサンプルを紹介します。実際に更新と削除がどのような流れになるのかがわかりやすい構成になっています。

PUTとDELETEをまとめたサンプルコード

import React, { useState } from "react";

function SampleApp() {
  const [log, setLog] = useState("");

  const updateData = () => {
    fetch("https://jsonplaceholder.typicode.com/posts/1", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        id: 1,
        title: "統合サンプルの更新",
        body: "更新内容です",
        userId: 1,
      }),
    })
      .then((res) => res.json())
      .then((data) => setLog("更新成功：新しいタイトル → " + data.title))
      .catch((err) => setLog("更新エラー：" + err));
  };

  const deleteData = () => {
    fetch("https://jsonplaceholder.typicode.com/posts/1", {
      method: "DELETE",
    })
      .then(() => setLog("削除成功：データを削除しました"))
      .catch((err) => setLog("削除エラー：" + err));
  };

  return (
    <div>
      <h2>PUTとDELETEの統合サンプル</h2>
      <button onClick={updateData}>更新する</button>
      <button onClick={deleteData} style={{ marginLeft: "10px" }}>
        削除する
      </button>
      <p>{log}</p>
    </div>
  );
}

export default SampleApp;

こうした実践的なコードに触れることで、PUTとDELETEがどのように動作し、Reactがどのようにサーバーと通信するのかがより明確になります。最初は難しく見えても、書き方には決まったパターンがあり、それを覚えるだけで一気に応用範囲が広がります。とくに初心者のうちは「構造をそのまま真似する」ことから始め、慣れてきたら自分のアプリに合わせて内容を少しずつ書き換えていくと理解が深まりやすくなります。

PUTとDELETEを習得すると、データの作成（POST）・取得（GET）と合わせて、フロントエンドで扱う基本操作がすべてそろいます。Reactで作るアプリケーションは、これらの通信が滑らかに働くことで、ユーザーにとって使いやすく直感的なUIへと発展します。サーバー通信の基本を押さえておくことは、学習の次のステップにも大きな助けとなるでしょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

ReactでPUTリクエストとDELETEリクエストは何に使うのですか？

PUTリクエストはデータの更新、DELETEリクエストはデータの削除に使われます。プロフィール編集、投稿更新、タスク削除などReactアプリでよく使う基本的なサーバー通信です。