■ 概要

学習ログとタスク情報をもとに、学習状況を一画面で把握できるダッシュボード機能を実装した。

■ 実装の目的

• 学習の進捗を可視化する
• 数値で現状を把握できるようにする
• モチベーション維持につなげる

■ 実装ロジック（重要）

① 全体の学習時間（overallMinutes）

// studyLogsの全てのminutesを合計する
const overallMinutes = studyLogs.reduce((sum, log) => {

  // sum: これまでの合計値
  // log: 現在の学習ログ1件

  return sum + log.minutes;
  // 今の合計 + 今回のログの時間

}, 0);
// 初期値は0（まだ何も足していない状態）

🔍 ロジック解説

① 配列を1つずつ取り出す
② minutesを足していく
③ 最終的に合計になる

👉 reduce = 「合計を作る機械」

② 今日の学習時間（todayMinutes）

// 今日の日付を取得（YYYY-MM-DD形式）
const today = new Date().toISOString().split("T")[0];

// 今日のログだけを抽出して合計
const todayMinutes = studyLogs

  // 今日の日付と一致するログだけ取得
  .filter((log) => log.date.startsWith(today))
 

  // 抽出したログのminutesを合計
  .reduce((sum, log) => {
    return sum + log.minutes;
  }, 0);