ReactでAxiosのPUT・DELETEリクエストを完全ガイド！初心者でもわかるAPI通信の基本
生徒
「Reactでサーバーにある情報を変更したり削除したりすることはできますか。Axiosを使うと便利だと聞きました。」
先生
「はい、Axiosを使えばPUTリクエストで情報を更新し、DELETEリクエストで情報を消すことができます。」
生徒
「GETやPOSTはわかりましたが、PUTとDELETEはまだイメージが湧きません。」
先生
「PUTは『上書き』、DELETEは『取り消し』のような役割です。具体的に例を見ながら覚えていきましょう。」
1. PUTリクエストとDELETEリクエストの基本
PUTリクエストは、すでに存在しているデータを「新しい内容で更新する」ための通信方法です。 たとえば、ユーザー登録後にプロフィールの名前や自己紹介文を変更したい場合に使われます。 イメージとしては、サーバーに対して 「このIDのデータを、今から送る内容で丸ごと上書きしてください」 とお願いする感覚に近いです。
一方、DELETEリクエストは「もう不要になったデータを削除する」ために使います。 投稿を取り消す、登録情報を削除する、カートの商品を消すといった操作が代表例です。 サーバーに対して 「このデータはもう使わないので消してください」 と伝える役割を持っています。
import axios from "axios";
// データを更新するPUTリクエスト
axios.put("https://example.com/api/items/1", {
name: "新しい名前"
});
// データを削除するDELETEリクエスト
axios.delete("https://example.com/api/items/1");
2. AxiosでPUTリクエストを送る書き方
Reactでは、Axiosを使うことでPUTリクエストをシンプルに書けます。 PUTは「すでに存在するデータを更新する通信」なので、 入力フォームと組み合わせることで、ユーザーが変更した内容をそのままサーバーに反映できます。 まずは「入力 → 更新ボタン → サーバーに送信」という基本の流れを押さえることが大切です。
下の例では、テキストボックスに入力したタイトルを、 ボタンを押したタイミングでサーバーへ送っています。 初心者の方は、「ボタンを押すと関数が呼ばれ、その中でPUT通信が行われている」 という点だけ意識すれば十分です。
import React, { useState } from "react";
import axios from "axios";
function App() {
const [title, setTitle] = useState("");
const [result, setResult] = useState("");
const handleUpdate = async () => {
try {
const res = await axios.put(
"https://jsonplaceholder.typicode.com/posts/1",
{ title: title }
);
setResult("更新成功: " + JSON.stringify(res.data));
} catch (e) {
setResult("更新エラーが発生しました");
}
};
return (
<div>
<input
type="text"
placeholder="新しいタイトルを入力"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<button onClick={handleUpdate}>更新</button>
<div>{result}</div>
</div>
);
}
export default App;
3. AxiosでDELETEリクエストを送る書き方
DELETEリクエストは、サーバーに保存されているデータを「削除してください」とお願いする通信です。 更新処理と比べると仕組みはとてもシンプルで、基本的には「どのデータを消すか」をURLで指定するだけです。 たとえば、記事一覧や商品一覧で削除ボタンを押したときに、その1件だけを消したい場合によく使われます。
初心者の方は、「削除ボタンを押す → 削除用の関数が呼ばれる → AxiosでDELETE通信が送られる」 という流れをイメージできれば十分です。 DELETEでは送信するデータがないことも多く、URL指定が特に重要なポイントになります。
import React, { useState } from "react";
import axios from "axios";
function DeleteExample() {
const [message, setMessage] = useState("");
const handleDelete = async () => {
try {
await axios.delete("https://jsonplaceholder.typicode.com/posts/1");
setMessage("削除成功しました");
} catch (e) {
setMessage("削除エラーが発生しました");
}
};
return (
<div>
<button onClick={handleDelete}>削除</button>
<div>{message}</div>
</div>
);
}
export default DeleteExample;
4. エラーハンドリングと安心感
PUTやDELETEリクエストもエラーが起きることがあります。通信が切れた場合やサーバーが応答しない場合です。そのため「更新できませんでした」「削除できませんでした」といった案内を出すことが重要です。
また、削除は取り消しができないこともあるので、本当に実行してよいかを確認するダイアログを表示すると親切です。
5. 実務でよくある工夫
更新処理では部分的な修正を行いたい場合があります。そのときはPATCHという方法もありますが、初心者はまずPUTで全体を置き換える仕組みから覚えると良いです。
削除では、物理的に完全に消すのではなく「削除フラグ」を付けて非表示にするだけの実装もあります。これはデータを安全に残しつつ、画面からは見えなくするための工夫です。
6. 認証が必要なPUT・DELETEリクエスト
会員情報の更新や削除は、誰でも自由にできては困ります。そのため認証トークンをヘッダーに含めて送ることが一般的です。
import axios from "axios";
async function updateProfile(token) {
const res = await axios.put(
"https://example.com/api/profile/1",
{ name: "新しい名前" },
{ headers: { Authorization: `Bearer ${token}` } }
);
return res.data;
}
async function deleteProfile(token) {
const res = await axios.delete("https://example.com/api/profile/1", {
headers: { Authorization: `Bearer ${token}` }
});
return res.data;
}
7. よくあるつまずきと対処方法
PUTやDELETEを試したときに反応がない場合、URLが間違っている可能性があります。末尾の数字やスラッシュの有無に注意しましょう。
また、サーバーによってはPUTやDELETEを許可していないこともあります。その場合は、サーバーの仕様を確認する必要があります。初心者のうちは「本当にこのAPIがPUTやDELETEを受け付けるのか」を最初に確認する習慣を持ちましょう。
まとめ
今回の記事では、ReactとAxiosを組み合わせて、データの更新を行うPUTリクエストと、データの削除を行うDELETEリクエストの実装方法について詳しく解説してきました。これまで学習してきたGET（取得）やPOST（作成）に加えて、この2つの手法をマスターすることで、モダンなWebアプリケーションに欠かせない「CRUD操作（Create, Read, Update, Delete）」のすべてが完結することになります。
Webアプリ開発において、ユーザーが自分の情報を編集したり、不要な投稿を削除したりできる機能は必須です。Axiosは非常に直感的なライブラリであるため、メソッド名を .put() や .delete() に変えるだけで、やりたいことをシンプルに記述できるのが最大の魅力ですね。特にPUTリクエストでは、どのデータを更新するかを指定する「ID」と「新しいデータ」の2つが必要になるという点を忘れないようにしましょう。
実践的な実装のポイント：PUTとDELETEを使いこなす
実際の開発現場では、ただ通信を送るだけでなく、ユーザー体験（UX）を考慮した実装が求められます。例えば、削除ボタンを押した瞬間にデータが消えてしまうと、誤操作によるトラブルを招きかねません。そのため、JavaScriptの window.confirm() などを使って「本当に削除しますか？」といった確認ダイアログを挟むのが一般的です。
また、API通信は常に成功するとは限りません。ネットワークの不調やサーバー側のエラーなど、予期せぬ事態に備えて try...catch 構文を用いたエラーハンドリングを徹底しましょう。ユーザーに対して「更新に失敗しました。もう一度お試しください」といったフィードバックを返すだけで、アプリの信頼性は格段に向上します。
Reactでの高度なデータ管理とAxiosの応用
さらに一歩進んだ実装として、TypeScript（TSX）を使用した型安全な通信や、Next.jsでのAPIルート活用などが挙げられます。型定義をしっかり行うことで、「どんなデータを送るべきか」が明確になり、開発効率が上がるとともにバグを未然に防ぐことができます。
以下に、より実践的な「ユーザー情報更新コンポーネント」のサンプルコードを紹介します。ここでは、複数の入力項目がある場合にどのようにPUTリクエストを構成するか、具体的な形を見てみましょう。
import React, { useState, useEffect } from "react";
import axios from "axios";
const UserProfileEditor = () => {
const [user, setUser] = useState({ name: "", email: "" });
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState("");
// 初期データの取得（GET）
useEffect(() => {
const fetchUser = async () => {
const res = await axios.get("https://jsonplaceholder.typicode.com/users/1");
setUser({ name: res.data.name, email: res.data.email });
};
fetchUser();
}, []);
// データの更新処理（PUT）
const handleSave = async () => {
setLoading(true);
setStatus("保存中...");
try {
const response = await axios.put(
"https://jsonplaceholder.typicode.com/users/1",
user
);
console.log("更新データ:", response.data);
setStatus("プロフィールを更新しました！");
} catch (error) {
setStatus("エラー：更新に失敗しました。");
} finally {
setLoading(false);
}
};
return (
<div className="p-4 border rounded shadow-sm">
<h3 className="mb-3">プロフィール編集</h3>
<div className="mb-3">
<label className="form-label">名前</label>
<input
type="text"
className="form-control"
value={user.name}
onChange={(e) => setUser({ ...user, name: e.target.value })}
/>
</div>
<div className="mb-3">
<label className="form-label">メールアドレス</label>
<input
type="email"
className="form-control"
value={user.email}
onChange={(e) => setUser({ ...user, email: e.target.value })}
/>
</div>
<button
className="btn btn-primary"
onClick={handleSave}
disabled={loading}
>
{loading ? "送信中..." : "保存する"}
</button>
{status && <p className="mt-3 text-muted">{status}</p>}
</div>
);
};
export default UserProfileEditor;
API設計とセキュリティの重要性
PUTやDELETEを扱う際に避けて通れないのがセキュリティの問題です。記事内でも触れましたが、誰でも自由にデータを消せたら大変なことになります。実際のプロジェクトでは、APIリクエストのヘッダーに「JWT（JSON Web Token）」などの認証トークンを付与し、サーバー側で「その操作を行う権限があるか」をチェックします。
また、Next.jsなどを使っている場合は、フロントエンドから直接外部APIを叩くのではなく、API Routes（サーバーサイド）を経由させることで、よりセキュアな通信を実現することも可能です。プログラムを書く際は、ただ動くだけでなく「安全に動くか」という視点も常に持つようにしましょう。
生徒
「先生、PUTとDELETEの実装、思っていたよりもずっとシンプルで驚きました！特に axios.put や axios.delete と書くだけでいいのが分かりやすいですね。」
先生
「そうですね。メソッド名がそのまま動詞になっているので、コードを読んだだけで何をしているか直感的に理解できるのがAxiosの良いところです。実際に動かしてみて、何か気づいたことはありますか？」
生徒
「はい！PUTリクエストを送る時に、どのデータを更新するかを指定する『URLのID部分』を忘れると、サーバーが困ってしまうんだなと気づきました。あと、削除機能を作る時は confirm() を入れたほうがいいという話も、確かに自分が使う側の立場だったら絶対欲しいなと思いました。」
先生
「素晴らしい視点です！エンジニアとして、プログラムが正しく動くことはもちろんですが、使う人がいかに安心して操作できるかを考えるのは非常に大切です。エラーが起きた時の catch 処理もしっかり書けていましたね。」
生徒
「ありがとうございます！次は、更新する時に全部を上書きするPUTじゃなくて、一部だけ変えるPATCHについても調べてみたいです。あと、認証トークンをヘッダーに乗せるやり方も、もっと練習して自分のポートフォリオに取り入れたいと思います！」
先生
「その意気です。PATCHはPUTと似ていますが、効率的な通信によく使われます。認証についても、Axiosの『インターセプター』という機能を使うと、すべてのリクエストに自動でトークンを付与できて便利ですよ。一歩ずつ、モダンな開発手法を身につけていきましょう！」
この記事を読んだ人からの質問
