React + TypeScript Learning Dashboard

このプロジェクトは、React と TypeScript を体系的に学ぶためのインタラクティブな学習ダッシュボードです。最新の JavaScript/TypeScript の基礎から、React の応用、State 管理、Next.js への発展まで、フェーズごとに進めることができます。

🚀 主な機能

• 体系的な学習パス: Phase 1 から Phase 7 までの段階的なカリキュラム。
• インタラクティブなデモ: 各トピックに対する実際の動作サンプル。
• コード例の表示: prism-react-renderer を使用したシンタックスハイライト付きのソースコード表示。
• モダンな UI: Tailwind CSS 4 を使用したクリーンで使いやすいダッシュボード。

🛠️ 技術スタック

• Core: React 19, TypeScript
• Build Tool: Vite 8
• Styling: Tailwind CSS 4
• Routing: React Router DOM 7
• State Management: Zustand
• Icons: Lucide React
• Component Utilities: clsx, tailwind-merge

📂 プロジェクト構成

src/
├── components/     # 共通コンポーネント（Layout, Sidebar, etc.）
├── features/       # 各フェーズ（Phase 1-7, Extra, Final Project）の実装
├── store/          # Zustand を使用したグローバル状態管理
├── router/         # React Router の設定
└── assets/         # 画像や静的ファイル

📚 学習ロードマップ

1. Phase 1: Modern JS basics - JavaScript の最新機能 (ES6+)。
2. Phase 2: TypeScript basics - 型システム、Union型、ジェネリクス。
3. Phase 3: React Fundamentals - JSX、Props、State (useState)。
4. Phase 4: React + TypeScript - Hooksの型定義、イベントハンドラ、ComponentProps。
5. Phase 5: Side Effects & Custom Hooks - useEffect とロジックの再利用。
6. Phase 6: Ecosystem - Tailwind CSS, Zustand, React Router。
7. Phase 7: Backend Integration - API 連携, BaaS (Supabase), Docker。
8. Phase 8: Advanced Performance - useMemo, useCallback, React.memo による最適化。
9. Phase 9: Robust Forms - React Hook Form と Zod による宣言的フォーム管理。
10. Phase 10: Automated Testing - Vitest と React Testing Library によるテストの基本。
11. Phase 11: Error Handling & Resilience - Error Boundary とコンポーネント設計パターン。
12. Extra: Next.js - Server Components と App Router。
13. Final Project - 全ての技術を統合したフルスタックプロジェクト。

⚙️ セットアップ

インストール

npm install

開発サーバーの起動

npm run dev

ビルド

npm run build

---

Happy Coding! 🚀