学習記録アプリ
概要
このプロジェクトでは、1 週間の学習時間を管理・可視化するアプリを構築します。
作業時間をグラフで可視化し、カテゴリー別や全体での合計作業時間を算出します。
学習目標
useMemo と useCallback を使用したパフォーマンスの最適化について学習します。
不要な再計算・再レンダリングをなくす方法と、実際のユーザーケースを確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- useMemo による計算処理の最適化
- useCallback と React.memo の組み合わせ
- Recharts を用いたグラフ表示
- Vite を用いた React 環境構築
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- GitHub Pages へのデプロイ
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- 学習ログの記録：
- 曜日、カテゴリー、作業時間、メモを入力し記録する
- モチベーション（3 段階の自己評価）を設定する
- 学習データの可視化：
- 日別の学習時間をグラフ表示する
- カテゴリー別の合計時間を表示する
- 先週のカテゴリー別の合計時間を表示する
- 全体の合計時間を表示する
- 自己評価の総計を表示する
- データ管理：
- 学習ログの一覧表示
- 不要なログの削除
ユーザーストーリー
- ユーザーがサイトにアクセスすると、新しい学習ログを入力できるフォームが表示されている
- 学習カテゴリーを、ドロップダウンリストから選択できる
- 曜日を選択し、学習時間（分）とメモを入力できる
- モチベーションレベルを 3 段階（ネガティブ、普通、ポジティブ）で設定できる
- 必要な情報を入力し、「追加」ボタンをクリックすると、学習ログが一覧で表示される
- 学習ログは削除できる
- 日別の学習時間がグラフで視覚的に表示される
- カテゴリー別の合計時間が表示される
- 先週のカテゴリー別の合計時間も表示する
- 週間の総学習時間が表示される
- 自己評価の総計が表示される
- アプリケーションがデプロイされており、誰でもアクセス可能である。