課題（割り勘アプリ）
React フロントエンド開発入門の最後の課題として、割り勘アプリをつくってみましょう。
レベル0: 基本の割り勘
TODO (やることリスト)
- レベル0 がどのような実装になっているか確認する
- 分かったことをメモ帳やコードコメント (例:
// コメント/* コメント */{/* コメント */}など) にメモする
レベル1: 端数処理
TODO (やることリスト)
- usePayments カスタムフックに端数処理を追加する
- PaymentDisplay コンポーネントの remarks プロパティに端数を表示する
- 最初の参加者が端数を精算する
レベル2: メンバー管理
TODO (やることリスト)
- usePeople カスタムフックに参加者の追加削除を実装する
- 参加者セクションで参加者の追加削除が動作するように実装する
レベル3: 自由課題
レベル2までで基本的な割り勘アプリが完成しました。ここからは自分でテーマを決めて機能を追加してみましょう。
以下はアイデアの例です。これらから選んでも良いですし、自分で考えた機能を実装しても構いません。
ヒント
React のフックライブラリーを探索して、どのフックが活用できるかみてみましょう
機能の拡張
- 費目別精算
- 割合指定・税込税抜切り替え
データの永続化・共有
- localStorageでデータを保存・複数の精算を管理
- データのエクスポート/インポート(JSON、CSV)
- 精算内容をURLやQRコードで共有
UI/UXの改善
- レスポンシブデザイン・ダークモード対応
- アニメーション効果・ローディング表示
コード品質・技術的挑戦
- カスタムフックの作成・コンポーネント分割
- 状態管理ライブラリの導入(Context API, Zustand等)
- 関心ごとの適切なファイルの分割