React Remixを使ってTODOアプリを作ってみる(4):アクション処理タスクの追加・削除・編集機能の実装

2025年1月7日

この記事では、React RemixのActionを活用してTODOアプリにデータの追加、削除、編集機能を実装する方法を解説します。これにより、サーバーとクライアント間のデータ送受信が効率化されます。

1. Actionの基礎

Actionは、HTTPリクエスト（POST、PUT、DELETEなど）を処理し、データの操作をサーバー側で行う仕組みです。フォーム送信を処理する際に特に便利です。

基本的なActionの使用例

app/routes/tasks.tsxにActionを追加します。

import { json, redirect } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";

type Task = {
  id: string;
  title: string;
};

let tasks: Task[] = [
  { id: "1", title: "タスク1" },
  { id: "2", title: "タスク2" },
];

export const loader = async () => {
  return json(tasks);
};

export const action = async ({ request }: { request: Request }) => {
  const formData = await request.formData();
  const title = formData.get("title") as string;

  if (title) {
    const newTask = { id: String(tasks.length + 1), title };
    tasks.push(newTask);
  }
  return redirect("/tasks");
};

export default function Tasks() {
  const tasks = useLoaderData<Task[]>();
  return (
    <main>
      <h1>タスク一覧</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>

      <Form method="post">
        <input type="text" name="title" placeholder="新しいタスク" required />
        <button type="submit">追加</button>
      </Form>
    </main>
  );
}

結果

新しいタスクを入力し「追加」をクリックすると、タスクがリストに追加されます。

2. タスクの削除

次に、タスクの削除機能を実装します。

削除機能のAction

action関数に削除ロジックを追加します。

export const action = async ({ request }: { request: Request }) => {
  const formData = await request.formData();
  const id = formData.get("id") as string;

  if (id) {
    tasks = tasks.filter((task) => task.id !== id);
  }
  return redirect("/tasks");
};

タスクリストに削除ボタンを追加します。

<ul>
  {tasks.map((task) => (
    <li key={task.id}>
      {task.title}
      <Form method="post">
        <input type="hidden" name="id" value={task.id} />
        <button type="submit">削除</button>
      </Form>
    </li>
  ))}
</ul>

結果

タスクの「削除」ボタンをクリックすると、該当タスクがリストから削除されます。

3. タスクの編集

最後に、タスクの編集機能を実装します。

編集フォームの追加

action関数に編集ロジックを追加します。

export const action = async ({ request }: { request: Request }) => {
  const formData = await request.formData();
  const id = formData.get("id") as string;
  const title = formData.get("title") as string;

  if (id && title) {
    tasks = tasks.map((task) => (task.id === id ? { ...task, title } : task));
  }
  return redirect("/tasks");
};

タスクリストに編集フォームを追加します。

<ul>
  {tasks.map((task) => (
    <li key={task.id}>
      <Form method="post">
        <input type="hidden" name="id" value={task.id} />
        <input type="text" name="title" defaultValue={task.title} required />
        <button type="submit">更新</button>
      </Form>
    </li>
  ))}
</ul>

結果

タスクの「更新」ボタンをクリックすると、タスクのタイトルが編集されます。

まとめ

この記事では、React RemixのAction機能を活用して、TODOアプリにタスクの追加、削除、編集機能を実装しました。これにより、アプリがよりインタラクティブになり、サーバーサイドとクライアントサイドの連携を深めることができます。次回の記事では、アプリのデプロイとパフォーマンス最適化について解説します。