fetchを使ったAPI通信（Next.js）その⑤

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の実装は終わりです。一般的なアプリに必要な基本的な機能を実装しました。

複雑に見えますが、書き方を覚えて使ってみることで、理解が深まるので是非練習してみてください。