Next.js 14でTodoアプリを作る – 9.データ削除

投稿日：2024年03月18日

更新日：2024年03月18日

投稿者：HIROKI CHIYODA

データ削除

APIに接続してデータを新規作成します。
ファイルapi.tsに関数deleteTodoを作成します。

export async function deleteTodo(id: number) {
  const res = await fetch(
    `https://todo-app-d1-base.pages.dev/api/todos/${id}`,
    {
      method: "DELETE",
    }
  );
  if (!res.ok) {
    throw new Error("Failed to delete data");
  }
  return res.json<Todo[]>();
}

TodosTableコンポーネントに削除ボタンを追加

TodosTableコンポーネントに削除ボタンを追加します。
削除ボタンを配置する列を追加します。
まずは<thead>に<th>を追加します。

  <thead className="border-b-2 border-black/60">
    <tr>
      <th className="w-1/4 border-r-2 border-black/60">タイトル</th>
-     <th className="w-3/4 border-r-2 border-black/60">内容</th>
+     <th className="w-2/4 border-r-2 border-black/60">内容</th>
+     <th className="w-1/4">-</th>
    </tr>
  </thead>

また<tbody>に<td>を追加します。
削除ボタンが押された時にtodo.idが取得できるかコンソールで確認します。

  <tbody>
    {todos.map((todo) => (
      <tr className="border-b border-black" key={todo.id}>
        <td className="w-1/4 border-r-2 border-black/60">{todo.title}</td>
-       <td className="w-3/4 border-r-2 border-black/60">
+       <td className="w-2/4 border-r-2 border-black/60">
          {todo.content}
        </td>
+       <td className="w-1/4">
+         <button
+           className="bg-red-500 text-white text-sm rounded-lg p-1"
+           onClick={() => {
+             console.log(todo.id);
+           }}
+         >
+           削除
+         </button
+       </td>
      </tr>
    ))}
  </tbody>

todo.idが取得できるか確認できたら、deleteTodo関数を呼び出します。
deleteTodo関数にtodo.idを引数として渡します。
またtodo.idがundefinedないことをif文で確認します。
useRouterのインスタンスをrouterとして宣言します。
削除した後にページを更新するためにrouter.refresh()も追加します。

  <tbody>
    {todos.map((todo) => (
      <tr className="border-b border-black" key={todo.id}>
        <td className="w-1/4 border-r-2 border-black/60">{todo.title}</td>
        <td className="w-2/4 border-r-2 border-black/60">{todo.content}</td>
        <td className="w-1/4">
          <button
            className="bg-red-500 text-white text-sm rounded-lg p-1"
            onClick={() => {
-             console.log(todo.id);
+             if (todo.id !== undefined) {
+               deleteTodo(todo.id);
+             }
+             router.refresh();
            }}
          >
            削除
          </button>
        </td>
      </tr>
    ))}
  </tbody>