#3-4 子ども向け学習アプリ：学習ログとタイマー機能

作業内容

• 学習ログ用テーブルを追加
• • StudySession：学習時間を計測（進行中＝endedAtなし、終了時にdurationSec確定）
  • StudyEvent：学習イベントを記録（カード表示 / 発音 / クイズ回答など）
• ダッシュボードにKPIを定義し、API経由で実データを集計
• • 今日 / 今月 / 全体のセッション数・学習時間
  • 今日 / 全期間のユニーク単語数
• UTCで保存したDBをJST基準で切り分ける処理を実装

📌デザインはまだです。

• 学習時間を制御するタイマー機能を追加
• • ユーザーごとの制限時間を保存する TimeLimitSetting テーブルを作成（デフォルト20分）
  • React Context（TimerProvider）で状態を管理（idle / running / paused）
  • requestAnimationFrame を用いて残り時間を正確にカウントダウン

今回触った技術

• Prisma（スキーマ追加・マイグレーション）
• Next.js API Routes（集計API）
• date-fns / date-fns-tz（UTC ↔ JST変換）
• React Context（タイマー状態管理）
• requestAnimationFrame（時間計測・一時停止／再開対応）

悩んだこと

• 学習ログをどこまで細かく保存すべきか（セッション単位だけか、単語ごとイベントも必要か）
• UTCで保持した時間をJST基準でどう正しく集計するか
• タイマーの計測方式（残り時間を直接減算するか、累積経過時間で計算するか）
• 子供向けなので自動開始よりも「勉強開始ボタン」を押して開始する設計が適切かどうか

学んだこと・気づき

• Prismaは migrate 前に format と validate を挟むことで、スキーマ不整合を早期に検出できる
• date-fns-tz を利用してUTC ↔ JST変換を扱うことで、日付境界を安全に処理できる
• StudyEvent を細かく残すことで、学習傾向や単語習得頻度の分析に発展できる
• タイマーは performance.now() ベースの累積経過時間管理が最も正確で、停止・再開を繰り返してもズレが出ない
• React Contextを使うことでアプリ全体で学習タイマー状態を一元的に共有できる

次の目標

• 公開／下書き切替え機能をUIに追加する
• Firebase Storageで画像アップロードし、Wordモデルと紐付ける