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

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

このリポジトリは、プログラミング初学者の皆さんが**実践的なWebアプリケーション開発スキル**を身につけるための学習教材です。TODOアプリという身近な題材を通じて、最新のWeb開発技術とチーム開発の基礎を学びます。

### 🚀 学べる技術スキル

#### 1. **モダンなWeb開発技術**

- **Next.js 15** - 最新のReactフレームワーク
- **TypeScript** - 型安全なJavaScript
- **Tailwind CSS v4** - 効率的なスタイリング
- **React 19** - 最新のUIライブラリ

#### 2. **実践的な開発スキル**

- バージョン管理（Git）
- チーム開発（Gitea）
- コードレビュー
- 問題解決能力

### 📊 学習時間の目安

- **TODOアプリ開発**: 15-20時間
- **Git/Gitea学習**: 18-25時間
- **合計**: 約30-45時間（1日2-3時間×2-3週間）

## 🗺️ 学習の進め方

### 推奨学習ルート

```mermaid
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時間）

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

1. **WSL2のセットアップ**（Windows環境の場合）
   - Ubuntuをインストール
   - ターミナルの基本操作を覚える

2. **VSCodeのインストール**
   - WSL拡張機能を追加
   - 推奨拡張機能をインストール

3. **プロジェクトの起動確認**

   ```bash
   # 開発サーバーを起動
   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のエラー対処法

```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でよくある失敗

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

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

## 💡 学習のコツ

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

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

### 2. こまめにコミット

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

### 3. 実際に手を動かす

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

## 🎓 学習のゴール

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

### 技術スキル

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

### ソフトスキル

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

## 🚀 次のステップ

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

1. **機能の拡張**
   - カテゴリー機能
   - 期限設定
   - 優先度管理

2. **新しい技術の導入**
   - データベース連携
   - 認証機能
   - API開発

3. **実践プロジェクト**
   - オリジナルアプリの開発
   - オープンソースへの貢献
   - チーム開発への参加

## 📞 困ったときは

### よくある質問（FAQ）

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

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

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

### サポート方法

1. **自己解決を試みる**（15分）
   - エラーメッセージを読む
   - 公式ドキュメントを確認
   - Google/Stack Overflowで検索

2. **質問の準備**
   - 何をしようとしたか
   - どんなエラーが出たか
   - 何を試したか

3. **質問する**
   - 具体的に説明する
   - コードやエラーを共有
   - 解決後は共有する

## 📂 プロジェクト構成

```
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! 🎉**