Next.js入門５ Todoアプリ（タスク一覧）

記事一覧

1. Next.js × Docker 最速環境構築
2. Next.js入門１ ページ追加
3. Next.js入門２ コンポーネント
4. Next.js入門３ 無記名関数 & イベントハンドラー
5. Next.js入門４ Hooks
6. Next.js入門５ Todoアプリ（タスク一覧）
7. Next.js入門６ Todoアプリ（タスク追加）
8. Next.js入門７ Todoアプリ（タスク詳細）
9. Next.js入門８ Todoアプリ（タスク編集, 削除）

タスク一覧

http://localhost:3000/taskでアクセスできるタスク一覧ページを作る

型を定義

1. task.tsを作成

.
├── next-app
│   └── types
│       └── task.ts # ここに作成
├── docker-compose.yml
└── Dockerfile

2. task.tsを記述

// exportをつけることで他ファイルから使用できるようにする
// type 型の名前 = {
export type Task = {
  title: string;
  content: string;
};

コンポーネントを作成

1. table.tsxを作成

.
├── next-app
│   └── components
│       └── table.tsx # ここに作成
├── docker-compose.yml
└── Dockerfile

2. table.tsxを記述

// Task型をインポート
import { Task } from "@/types/task";

// 引数の型を定義
type Props = {
  // タスクを配列形式で受け取る
  tasks: Task[];
};

// Tableコンポーネントを定義
export function Table({ tasks }: Props) {
  return (
    <table className="w-full [&_td]:p-2 [&_td]:border">
      <thead>
        <tr>
          <td>タイトル</td>
          <td className="w-2/3">内容</td>
        </tr>
      </thead>
      <tbody>
        {/* 渡されたtasksを回してテーブルを列を作成する */}
        {tasks.map((task, index) => (
          <tr key={index}>
            <td>{task.title}</td>
            <td>{task.content}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

ページを作成

1. task/page.tsxを作成

.
├── next-app
│   └── app
│       └── task
│           └── page.tsx # ここに作成
├── docker-compose.yml
└── Dockerfile

2. task/page.tsxを記述

"use client";

import { useState } from "react";
// Tableコンポーネントのインポート
import { Table } from "@/components/table";
// Task型のインポート
import { Task } from "@/types/task";

function Page() {
  // useState<型>で型を定義できる
  const [tasks, setTasks] = useState<Task[]>([
    { title: "タスク1", content: "タスク1の内容" },
    { title: "タスク2", content: "タスク2の内容" },
    { title: "タスク3", content: "タスク3の内容" },
  ]);

  return (
    <div className="flex flex-col gap-8 items-center p-16">
      <h1 className="text-4xl font-bold">タスク一覧</h1>

      {/* Tableコンポーネントにtasksを渡す */}
      <Table tasks={tasks}></Table>
    </div>
  );
}

export default Page;

http://localhost:3000/taskにアクセスして以下のような画面が出ればOK