graph LR
    A[環境構築] --> B[Git基礎]
    B --> C[TODOアプリ Phase1-2]
    C --> D[Git実践]
    D --> E[TODOアプリ Phase3-5]
    E --> F[Gitea連携]
    F --> G[チーム開発体験]

Step 1: 環境を整える（2-3時間）

まずは開発環境を準備しましょう：

WSL2のセットアップ（Windows環境の場合）
- Ubuntuをインストール
- ターミナルの基本操作を覚える
VSCodeのインストール
- WSL拡張機能を追加
- 推奨拡張機能をインストール

プロジェクトの起動確認

# 開発サーバーを起動
npm run dev

# ブラウザで http://localhost:3000 を開く

Step 2: 2つのカリキュラムを並行して進める

📱 TODOアプリ開発カリキュラム

Phase 1: 基礎理解（2-3時間）

Next.jsプロジェクトの構造を理解
最初のコンポーネントを作成
TypeScriptの基本を学ぶ

Phase 2: UIの作成（3-4時間）

TODOリストの見た目を作る
入力フォームを追加
Tailwind CSSでデザイン

Phase 3: 機能実装（4-5時間）

✅ TODO追加機能
✅ 完了/未完了の切り替え
✅ TODO削除機能

Phase 4: 高度な機能（3-4時間）

✏️ 編集機能
🔍 フィルター機能
💾 データの保存

Phase 5: 仕上げ（2-3時間）

コンポーネントの整理
エラー処理
パフォーマンス改善

🔀 Git/Gitea学習カリキュラム

Phase 1: Git基礎（3-4時間）

バージョン管理の概念
基本コマンド（add, commit, push）
VSCodeでのGit操作

Phase 2: 実践的な使い方（4-5時間）

ブランチの作成と切り替え
コンフリクトの解決
履歴の確認方法

Phase 3: Gitea入門（3-4時間）

リポジトリの作成
SSH鍵の設定
プッシュとプル

Phase 4: チーム開発体験（4-5時間）

Issue管理
プルリクエスト
コードレビュー

⚠️ 初心者がつまずきやすいポイント

1. TypeScriptのエラー対処法

// よくあるエラー例
const [todos, setTodos] = useState([]);  // ❌ 型が不明

// 解決方法
type Todo = {
  id: number;
  text: string;
  completed: boolean;
};
const [todos, setTodos] = useState<Todo[]>([]);  // ✅ 型を明示

2. WSL環境の注意点

ファイルの場所: 必ず~/projects/以下で作業（Windows側のC:\は避ける）
改行コード: LFに統一（CRLFは使わない）
パスの書き方: /home/username/projects/ のようにLinux形式で

3. Gitでよくある失敗

# コミット前に必ず状態確認
git status

# 間違えてコミットした場合
git reset --soft HEAD~1  # 直前のコミットを取り消し

💡 学習のコツ

1. エラーは成長のチャンス

エラーメッセージをよく読む
検索して解決方法を探す
質問する前に自分で試す

2. こまめにコミット

小さな機能ごとに保存
分かりやすいメッセージを書く
失敗を恐れない（いつでも戻せる）

3. 実際に手を動かす

コピペではなく自分で入力
動作を確認しながら進める
カスタマイズに挑戦する

🎓 学習のゴール

このプロジェクトを完了すると、以下のスキルが身につきます：

技術スキル

✅ React/Next.jsでWebアプリが作れる
✅ TypeScriptで型安全なコードが書ける
✅ Gitでバージョン管理ができる
✅ チーム開発の基本がわかる

ソフトスキル

✅ エラーを自力で解決できる
✅ ドキュメントを読んで理解できる
✅ 計画的に開発を進められる
✅ 他人のコードを読める

🚀 次のステップ

このプロジェクトを完了したら、以下に挑戦してみましょう：

機能の拡張
- カテゴリー機能
- 期限設定
- 優先度管理
新しい技術の導入
- データベース連携
- 認証機能
- API開発
実践プロジェクト
- オリジナルアプリの開発
- オープンソースへの貢献
- チーム開発への参加

📞 困ったときは

よくある質問（FAQ）

Q: npm run devでエラーが出る A: node_modulesを削除してnpm installを実行してください

Q: TypeScriptの型エラーが解決できない A: 一時的にany型を使い、後で正しい型に修正しましょう

Q: Gitでプッシュできない A: リモートの最新を取得(git pull)してから再度プッシュ

サポート方法

自己解決を試みる（15分）
- エラーメッセージを読む
- 公式ドキュメントを確認
- Google/Stack Overflowで検索
質問の準備
- 何をしようとしたか
- どんなエラーが出たか
- 何を試したか
質問する
- 具体的に説明する
- コードやエラーを共有
- 解決後は共有する

📂 プロジェクト構成

nextjs-todo-tutorial/
├── src/app/           # アプリケーションコード
├── public/            # 静的ファイル
├── package.json       # 依存関係
├── tsconfig.json      # TypeScript設定
├── tailwind.config.ts # Tailwind設定
├── CLAUDE.md          # AI支援用ドキュメント
├── todo-app-curriculum.md    # TODOアプリカリキュラム詳細
└── git-gitea-curriculum.md   # Git/Giteaカリキュラム詳細

📝 最後に

プログラミング学習は山登りのようなものです。一歩一歩進めば、必ず頂上にたどり着けます。エラーや困難は成長のチャンス。楽しみながら、自分のペースで学習を進めてください。

Happy Coding! 🎉

README.md Unescape Escape

🎯 TODOアプリで学ぶ Next.js & Git/Gitea 実践開発

📚 このプロジェクトについて

🚀 学べる技術スキル

1. モダンなWeb開発技術

2. 実践的な開発スキル

📊 学習時間の目安

🗺️ 学習の進め方

推奨学習ルート