| 項目 | 内容・理由 | 練習例 |
|---|---|---|
| 1. JSXと関数コンポーネントの基礎 | Reactの最小単位であり、全ての土台になる知識 | Counterコンポーネント、Buttonの作成 |
| 2. useState / useEffect | 状態管理と副作用処理の基本。ほぼ全コンポーネントで使う | Todoリスト、ログ出力、初期化処理の実装 |
| 3. Propsとコンポーネント分割 | UI部品の再利用性・拡張性向上。保守性にも直結 | TodoItem、FormFieldなどへの分割 |
| 4. React Router v6 | Next.jsを使わない場合、画面遷移に必須 | /login → /home 画面遷移のルーティング |
| 5. MUIの基本コンポーネント | 実務でのUI構築スピードに直結 | TextField, Button, Box, Grid などの活用 |
| 項目 | 内容・理由 | 練習例 |
|---|---|---|
| 6. useCallback / useMemo | レンダリング最適化。パフォーマンスに敏感な場面で重要 | deleteTaskのメモ化、件数のメモ化など |
| 7. アトミックデザインと構成ルール | 大規模プロジェクト・チーム開発での設計指針 | atoms/, molecules/, organisms/ フォルダ設計 |
| 8. フォーム管理（React Hook Form） | 実務頻出＆バリデーションを簡潔にできる | LoginForm, SearchForm の実装 |
| 9. Storybook導入（任意） | UIパーツを単体で確認・ドキュメント化できる | Button, FormField などの表示確認・テスト用 |
| 項目 | 内容・理由 | 練習例 |
|---|---|---|
| 10. Context API / Zustand | グローバル状態管理に必要。中〜大規模でよく使う | ログインユーザー情報 の全体管理 |
| 11. Figmaからの実装読み取り | デザイナーとの連携で必須スキル | マージン, カラー, フォントサイズ の確認 |
| 12. localStorageの連携 | 状態の永続化に便利。実務でかなり出る | Todoリスト の保存・復元 |
| 13. カスタムHooks（useXXX） | 責務の分離・再利用性を高めるための手法 | useAuth, useTimer, useLocalStorage の作成 |