はじめに
React学習の最初のアウトプットとして、シンプルな学習記録アプリを作成しました。
入力フォームから学習内容と時間を登録し、一覧で管理できるようにしています。
機能
-
学習記録の一覧表示 / 追加 / 削除
- 入力フォームから「学習内容」と「学習時間」を登録
- 登録した内容をリスト表示
- 不要な記録は削除可能
-
学習時間の累計表示
- 登録された学習時間を自動で合計
- 合計時間をリアルタイムで表示
実装のポイント
今回の実装では、Reactの基本的な機能を中心に構築しました。
useState
- フォームの入力値（title, time）の管理
- 学習記録の配列管理
- エラーフラグの管理
- 合計時間の保持
useEffect
- 学習記録が更新されたタイミングで合計時間を再計算
- stateの変更をトリガーに副作用を実行する流れを理解
component分割
- InputField：入力フォームの共通化
- Button：ボタンの再利用
- StudyRecordPreview：入力内容のプレビュー表示
👉 UIパーツを分割することで、コードの見通しと再利用性が向上しました。
所感
今回の開発を通して、以下の理解が深まりました。
- useStateでの状態管理の基本
- useEffectによる副作用の扱い方
- フォーム入力の共通ハンドラ設計
- コンポーネント分割の重要性
特に「stateをどう設計するか」で実装の難易度が大きく変わると実感しました。
最後に
Reactの基本的な実装を通して、UIの状態管理やコンポーネント設計の考え方が少しずつ理解できてきました。
シンプルなアプリでも、設計次第でコードの分かりやすさが大きく変わる点がとても面白かったです。