① index依存 → idベースに修正（最重要🔥）

❌ 修正前（バグの原因）

// indexで操作していた（配列依存）
const toggleTask = (index: number) => {
  const newTasks = [...tasks];

  // indexで直接アクセス（危険）
  newTasks[index].done = !newTasks[index].done;

  setTasks(newTasks);
};

👉 問題点

・削除するとindexがズレる
・違うタスクに影響する

✅ 修正後（正解）

// idベースで管理
const toggleTask = (id: number) => {
  setTasks((prev) =>
    prev.map((task) =>
      task.id === id
        ? { ...task, done: !task.done } // 対象だけ更新
        : task
    )
  );
};

👉 学び

配列操作は「index」ではなく「id」で管理する

② 削除バグ（復活問題）の修正

❌ 修正前（よくある原因）

// LocalStorageとDBが混在
useEffect(() => {
  const savedTasks = localStorage.getItem("tasks");
  if (savedTasks) {
    setTasks(JSON.parse(savedTasks));
  }
}, []);

👉 問題

・DBで削除 → LocalStorageで復活

✅ 修正後

// DBを正として管理
useEffect(() => {
  fetchTasks();
}, []);