Delete（データ削除）
app/components/DeleteDog.js
"use client";
export default function DeleteDog({ dogs, setDogs }) {
const deleteDog = async (id) => {
const response = await fetch(`http://localhost:3001/dogs/${id}`, {
method: "DELETE"
});
if (response.ok) {
setDogs(dogs.filter((dog) => dog.id !== id));
}
};
return (
<div>
<h2>🐕 犬を削除</h2>
{dogs.map((dog) => (
<button key={dog.id} onClick={() => deleteDog(dog.id)}>
{dog.name}（{dog.age}歳）削除
</button>
))}
</div>
);
}
コード解説
DeleteDog コンポーネントを定義
export default function DeleteDog({ dogs, setDogs }) {✅ DeleteDog という React コンポーネントを作成
✅ dogs（犬のリスト）と setDogs（犬のリストを更新する関数）を props として受け取る
propsの受け取り方ですが、今回は「分割代入」を使用して受け取っています。
分割代入ってなに？
💡 「オブジェクトや配列の中から、特定の値を簡単に取り出せる魔法の書き方」
💡 「データの中から必要な部分だけをサクッと使う方法」
propsも複数渡ってくるときはオブジェクトとして扱うので、{ dogs, setDogs }という受け取り方ができます。
deleteDog 関数を定義
const deleteDog = async (id) => {✅ id（削除したい犬の id）を受け取る関数を作成
✅ await を使って fetch でデータを削除するため、async をつける
fetch で DELETE リクエストを送る
const response = await fetch(`http://localhost:3001/dogs/${id}`, {
method: "DELETE"
});✅ fetch() を使って json-server の DELETE API を呼び出し
✅ http://localhost:3001/dogs/${id} に DELETE リクエストを送る
✅ id のワンちゃんをデータベース（db.json）から削除する
ここでresponseが受け取る値はjson-serverデフォルトのものですが、通常はバックエンドアプリ側で設定した戻り値となります。
if (response.ok) で削除成功かチェック
if (response.ok) {✅ サーバーが「削除成功！」と返したら true になる
✅ もし削除に失敗したら false になり、リストの更新をしない
setDogs() で削除したワンちゃんを画面から消す
setDogs(dogs.filter((dog) => dog.id !== id));✅ 削除した id 以外のワンちゃんだけ残す（削除したidのワンちゃんを削除）
✅ 新しい配列をsetDogsでdogsに設定
ここでは「filter（）」メソッドを使用しています。
filter() とは？
💡 リストの中から、特定の条件に合うものだけを選び出す魔法のメソッド
💡 あるものの中から不要なものを捨てて、必要なものだけを残した新しい配列を作成する
dogs.map((dog) => (...) で犬ごとにボタンを作る
{dogs.map((dog) => (✅ dogs のリストを map() で1匹ずつ取り出す
✅ ワンちゃんごとに「削除ボタン」を作成
ボタンにクリックイベント(deleteDog関数)設定
<button key={dog.id} onClick={() => deleteDog(dog.id)}>✅ ボタンを押すと、その犬の id を deleteDog() に渡す
✅ これで DELETE リクエストが実行され、ワンちゃんが削除される
起動
まずjsonサーバーを起動します。
npx json-server --watch db.json --port 3001次に別のターミナルを開いて開発サーバーを起動します。
npm run devこのような画面が表示され、犬の「追加(C)表示（R）更新（U）削除（D）」ができれば成功です。
まとめ
今回でAPI通信を使ったCRUDの実装は終わりです。一般的なアプリに必要な基本的な機能を実装しました。
複雑に見えますが、書き方を覚えて使ってみることで、理解が深まるので是非練習してみてください。
