■P225

src/components/CreateTaskForm.jsx
────────────────
import { Plus } from "lucide-react";
import { useRef } from "react";

export function CreateTaskForm({ onSubmit }) {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!inputRef.current) {
      return;
    }

    // input の値を取得
    const inputValue = inputRef.current?.value.trim();
    if (!inputValue) {
      return;
    }

    // タスクを作成
    onSubmit(inputValue);

    // 入力値をリセット
    inputRef.current.value = "";
  };

  return (
    <form className="flex gap-0.5" onSubmit={handleSubmit}>
      <input
        ref={inputRef}
        type="text"
        placeholder="新しいタスクを入力してください"
        className="grow rounded-s border border-gray-300 p-2 bg-white"
      />
      <button
        type="submit"
        className="rounded-e bg-blue-600 p-2 transition-colors hover:bg-blue-800 disabled:cursor-not-allowed disabled:bg-gray-400"
        aria-label={"タスクを作成する"}
      >
        <Plus className="text-white" />
      </button>
    </form>
  );
}
────────────────


■P226

src/components/TaskList.jsx
────────────────
import { useState } from "react";
import { CreateTaskForm } from "./CreateTaskForm";
import { TaskItem } from "./TaskItem";

export function TaskList() {
  // タスク一覧の状態を管理
  const [taskList, setTaskList] = useState([]);

  // 新しいタスクを追加
  const createTask = (title) => {
    setTaskList((prevTaskList) => {
      // 新しいタスクオブジェクトを生成
      const newTask = {
        id: Date.now(), // 現在の時刻を ID として使用
        title,
        status: "notStarted", // 初期状態は「未着手」
      };
      // 既存のタスク一覧に新しいタスクを追加
      return [...prevTaskList, newTask];
    });
  };

  return (
    <div className="relative">
      <div className="sticky top-0 flex flex-col items-end gap-2 bg-slate-100 px-10 py-5">
        <div className="w-full">
          <CreateTaskForm onSubmit={createTask} />
        </div>
      </div>
      <div className="space-y-3 px-10 pb-10">
        {taskList.length === 0 ? (
          <p className="text-center text-sm">タスクがありません</p>
        ) : (
          taskList.map((task) => <TaskItem key={task.id} task={task} />)
        )}
      </div>
    </div>
  );
}
────────────────

