課題（割り勘アプリ）
React フロントエンド開発入門の最後の課題として、割り勘アプリをつくってみましょう。
📊 レベル1:基本の割り勘(初級)
実装する機能
- 合計金額の入力フォーム
- 人数の入力フォーム
- 一人当たりの支払額を自動計算して表示
- 入力値のバリデーション(正の数値のみ)
- 計算結果を円単位で表示(小数点以下の処理)
学習ポイント
useStateによる状態管理- フォーム要素の制御(Controlled Components)
- 基本的なイベントハンドリング
- 条件付きレンダリング
👥 レベル2:メンバー管理(中級)
実装する機能
- 参加者名を追加・削除できる機能
- 各参加者の名前を一覧表示
- 参加者ごとの支払額を表示
- 端数調整(合計金額と一致しない場合の処理)
- 例:最初の人が多めに払う、など
学習ポイント
- 配列を使った状態管理
- リストレンダリング(
map、keyprops) - オブジェクト配列の操作
- 動的なフォーム要素の追加・削除
🏷️ レベル3:費目別精算(上級)
実装する機能
- 複数の費目(飲食代、交通費など)を登録
- 各費目ごとに以下を設定:
- 費目名
- 金額
- 対象メンバーの選択(チェックボックス)
- 費目の追加・編集・削除機能
- メンバーごとの合計支払額を集計
- 費目別の内訳表示
追加チャレンジ
- 支払った人と立て替えた金額の記録
- 誰が誰にいくら払うかの精算指示を生成
- 例:「A さんが B さんに 1,500 円払う」
学習ポイント
- 複雑な状態構造の設計
- ネストされたデータの管理
- フォームの複雑な制御
- 算出ロジックの実装
🎨 レベル4:自由課題(発展)
レベル3までで基本的な割り勘アプリが完成しました。ここからは自分でテーマを決めて機能を追加してみましょう。
以下はアイデアの例です。これらから選んでも良いですし、自分で考えた機能を実装しても構いません。
データの永続化・共有
- localStorageでデータを保存・複数の精算を管理
- データのエクスポート/インポート(JSON、CSV)
- 精算内容をURLやQRコードで共有
UI/UXの改善
- レスポンシブデザイン・ダークモード対応
- アニメーション効果・ローディング表示
- エラー表示の改善・トースト通知
機能の拡張
- 割合指定・税込税抜切り替え
- 立て替え精算(誰が誰に払うか)の計算
- 統計情報の表示(月別集計など)
コード品質・技術的挑戦
- カスタムフックの作成・コンポーネント分割
- テストコードの追加(Jest, React Testing Library)
- 状態管理ライブラリの導入(Context API, Zustand等)