🎯 目的

タスクごとに学習時間を記録し、

合計時間を可視化できるようにする。

✅ 実装内容

① 学習ログのデータ設計

// 学習ログ型
type StudyLog = {
  taskId: number; // タスクID（indexではなくIDで管理）
  minutes: number; // 学習時間
  date: string; // 日付
};

② stateで管理

// 学習ログ一覧
const [studyLogs, setStudyLogs] = useState<StudyLog[]>([]);

③ 学習ログ追加処理

// 学習ログ追加関数
const addStudyLog = (taskId: number, minutes: number) => {

  const newLog = {
    taskId: taskId,
    minutes: minutes,
    date: new Date().toISOString()
  };

  // 既存ログに追加
  setStudyLogs((prev) => [...prev, newLog]);
};

④ 保存処理と統合（UX改善）

// 保存処理
const handleSave = () => {

  // タスク更新
  updateTask(index, {
    ...task,
    text: editTask
  });

  // 学習ログ追加（分が入力されている場合のみ）
  if (minutes) {
    addStudyLog(task.id, Number(minutes));
  }

  // 入力リセット
  setMinutes("");

  // 編集終了
  setIsEditing(false);
};

⑤ 合計時間の計算

// 該当タスクのログを取得
const filteredLogs = studyLogs.filter(
  (log) => log.taskId === task.id
);

// 合計時間を計算
const totalMinutes = filteredLogs.reduce(
  (sum, log) => sum + log.minutes,
  0
);