https://github.com/b13o/weekly-study-log

📊 Manage a week's learning log with a graph.
https://github.com/b13o/weekly-study-log

reacharts react typescript usecallback usememo

Last synced: 20 days ago
JSON representation

📊 Manage a week's learning log with a graph.

• Host: GitHub
• URL: https://github.com/b13o/weekly-study-log
• Owner: b13o
• Created: 2025-01-06T06:54:54.000Z (20 days ago)
• Default Branch: main
• Last Pushed: 2025-01-06T06:56:45.000Z (20 days ago)
• Last Synced: 2025-01-06T07:33:48.519Z (20 days ago)
• Topics: reacharts, react, typescript, usecallback, usememo
• Homepage:
• Size: 0 Bytes
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# 学習記録アプリ

## 概要

このプロジェクトでは、1 週間の学習時間を管理・可視化するアプリを構築します。

作業時間をグラフで可視化し、カテゴリー別や全体での合計作業時間を算出します。

## 学習目標

useMemo と useCallback を使用したパフォーマンス最適化について学習します。

また、React.memo との組み合わせによる、不要な再計算・再レンダリングをなくす実装を確認してください。

### 推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

- useMemo による計算処理の最適化

- useCallback と React.memo の組み合わせ

- Recharts を用いたグラフ表示

- Vite を用いた React 環境構築

- TypeScript による型チェック

- Tailwind CSS を用いたスタイリング

- GitHub Pages へのデプロイ

---

## 🎯 お題

- 「ユーザーストーリー」を全て満たすアプリを構築してください。

- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。

- スタイルは、あなた自身で独自にカスタマイズすることが可能です。

### 必須機能

1. **学習ログの記録**：

   - 曜日、カテゴリー、作業時間、メモを入力し記録する

   - モチベーション（3 段階の自己評価）を設定する

2. **学習データの可視化**：

   - 日別の学習時間をグラフ表示する

   - カテゴリー別の合計時間を表示する

   - 全体の合計時間を表示する

   - 自己評価の総計を表示する

3. **データ管理**：

   - 学習ログの一覧表示

   - 不要なログの削除

## ユーザーストーリー

- [ ] ユーザーがサイトにアクセスすると、新しい学習ログを入力できるフォームが表示されている

- [ ] 学習カテゴリーを、ドロップダウンリストから選択できる

- [ ] 曜日を選択し、学習時間（分）とメモを入力できる

- [ ] モチベーションレベルを 3 段階（ネガティブ、普通、ポジティブ）で設定できる

- [ ] 必要な情報を入力し、「追加」ボタンをクリックすると、学習ログが一覧で表示される

- [ ] 学習ログは削除できる

- [ ] 日別の学習時間がグラフで視覚的に表示される

- [ ] カテゴリー別の合計時間が表示される

- [ ] 週間の総学習時間が表示される

- [ ] 自己評価の総計が表示される

- [ ] アプリケーションがデプロイされており、誰でもアクセス可能である。