React Remixを使ってTODOアプリを作ってみる(2):ルーティングとコンポーネント設計

2025年1月7日

React Remixを使ったTODOアプリケーションを作成するための次のステップとして、ルーティングとコンポーネント設計について解説します。この記事では、アプリの基本的なページ構成とルート設計を行います。

1. ルーティングの基礎

React Remixのルーティングは、ファイルベースで構成されています。app/routesディレクトリ内にファイルを追加することで、URLパスに対応するルートを簡単に作成できます。

基本的なルートの作成

以下の手順でTODOアプリのホームページルートを作成します。

app/routes/index.tsxを作成します。

export default function Index() {
  return (
    <main>
      <h1>TODOアプリ</h1>
      <p>ここからタスク管理を始めましょう。</p>
    </main>
  );
}

ブラウザでhttp://localhost:3000を開くと、このページが表示されます。

2. ネストされたルート

TODOアプリでは、タスク一覧ページやタスク詳細ページなど、階層的なルートが必要です。以下の手順でネストされたルートを作成します。

タスク一覧ページ

app/routes/tasks.tsxを作成します。

export default function Tasks() {
  return (
    <main>
      <h1>タスク一覧</h1>
      <ul>
        <li>タスク1</li>
        <li>タスク2</li>
      </ul>
    </main>
  );
}

動的ルート: タスク詳細ページ

app/routes/tasks/$taskId.tsxを作成します。

import { useParams } from "@remix-run/react";

export default function TaskDetail() {
  const { taskId } = useParams();
  return (
    <main>
      <h1>タスク詳細</h1>
      <p>タスクID: {taskId}</p>
    </main>
  );
}

ブラウザでhttp://localhost:3000/tasks/1のようにアクセスすると、タスクID: 1と表示されます。

3. コンポーネント設計

コンポーネントを分割して再利用可能なUIを構築します。ここでは、タスク一覧を表示するためのコンポーネントを作成します。

TaskListコンポーネント

app/components/TaskList.tsxを作成します。

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

type TaskListProps = {
  tasks: Task[];
};

export default function TaskList({ tasks }: TaskListProps) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

使用例

app/routes/tasks.tsxでこのコンポーネントを使用します。

import TaskList from "../components/TaskList";

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

export default function Tasks() {
  return (
    <main>
      <h1>タスク一覧</h1>
      <TaskList tasks={tasks} />
    </main>
  );
}