1. 本日行ったこと

本日は、StudyTracker アプリのコードの可読性および保守性を向上させるため、

メインページに記述していた処理をコンポーネントに分割した。

Reactでは、UIを小さな部品（コンポーネント）として分割することで、

コードの可読性や再利用性が向上する。

また、タスクの編集機能（Update）も実装し、

タスクの CRUD（Create / Read / Update / Delete）機能を完成させた。

2. コンポーネント構成

今回のコンポーネント構造は以下の通り。

page.tsx
 ├ TaskForm
 └ TaskList
     └ TaskItem

各コンポーネントの役割は以下。

TaskForm   ：タスク入力フォーム
TaskList   ：タスク一覧表示
TaskItem   ：タスク1行表示（編集・削除）

役割ごとにコンポーネントを分割することで、コードの責務を明確にした。

3. TaskForm（タスク入力フォーム）

TaskForm はタスクを入力し追加するためのコンポーネント。

// propsの型定義
type Props = {
  task: string; // 入力中のタスク
  setTask: (task: string) => void; // タスク入力値を更新する関数
  addTask: () => void; // タスク追加関数
};

export default function TaskForm({ task, setTask, addTask }: Props) {

  return (

    // タスク入力エリア
    <div className="flex gap-2 mb-6">

      {/* タスク入力フォーム */}
      <input
        type="text"
        value={task}
        // 入力値をstateと同期

        onChange={(e) => setTask(e.target.value)}
        // 入力された値をtask stateに保存

        placeholder="タスクを入力"

        className="border rounded px-3 py-2 w-full"
      />

      {/* タスク追加ボタン */}
      <button onClick={addTask}>
        追加
      </button>

    </div>

  );

}