nextjs-todo-tutorial/todo-app-curriculum.md

# TODOアプリ開発カリキュラム (Next.js + TypeScript)

## 概要

このカリキュラムは、JavaScript/TypeScript初学者がNext.js 15 (App Router)を使って実践的なTODOアプリを開発できるようになることを目的としています。

## 学習目標

- React/Next.jsの基本的な概念を理解する
- TypeScriptの型システムに慣れる
- 状態管理の基本を学ぶ
- CRUDアプリケーションの実装パターンを習得する
- モダンなWeb開発のベストプラクティスを身につける

## 前提知識

- HTML/CSSの基礎知識
- JavaScriptの基本文法（変数、関数、配列、オブジェクト）
- コマンドラインの基本操作

## 学習ステップ

### Phase 1: 基礎理解 (2-3時間)

#### Step 1.1: プロジェクト構造の理解

- `src/app/`ディレクトリの役割
- `page.tsx`と`layout.tsx`の違い
- TypeScriptファイル（.ts/.tsx）の意味

#### Step 1.2: 最初のコンポーネント作成

- Hello Worldコンポーネントの作成
- JSXの基本文法
- 型定義の初歩（stringやnumberの使い方）

### Phase 2: TODOアプリの骨組み作成 (3-4時間)

#### Step 2.1: UIコンポーネントの作成

- TODOリストの表示部分
- TODO入力フォーム
- Tailwind CSSによるスタイリング

#### Step 2.2: 状態管理の導入

- `useState`フックの使い方
- TODOアイテムの型定義

```typescript
type Todo = {
  id: number;
  text: string;
  completed: boolean;
};
```

### Phase 3: 機能実装 (4-5時間)

#### Step 3.1: TODO追加機能

- フォーム送信処理
- 新しいTODOの作成
- リストへの反映

#### Step 3.2: TODO完了機能

- チェックボックスの実装
- 完了状態の切り替え
- 条件付きスタイリング

#### Step 3.3: TODO削除機能

- 削除ボタンの追加
- 配列からの要素削除
- 確認ダイアログ（オプション）

### Phase 4: 高度な機能 (3-4時間)

#### Step 4.1: TODO編集機能

- インライン編集の実装
- 保存とキャンセル処理

#### Step 4.2: フィルタリング機能

- All/Active/Completedの切り替え
- 条件付きレンダリング

#### Step 4.3: データの永続化

- Local Storageの活用
- `useEffect`フックの理解

### Phase 5: 仕上げとベストプラクティス (2-3時間)

#### Step 5.1: コンポーネントの分割

- 再利用可能なコンポーネント化
- propsの型定義

#### Step 5.2: エラーハンドリング

- 入力検証
- エラーメッセージの表示

#### Step 5.3: パフォーマンス最適化

- `useCallback`の基礎
- キー属性の重要性

## 各ステップの実装詳細

### Step 1.1 実装例

```typescript
// src/app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen p-8">
      <h1 className="text-3xl font-bold">私のTODOアプリ</h1>
    </main>
  );
}
```

### Step 2.2 実装例

```typescript
// TODOの状態管理
const [todos, setTodos] = useState<Todo[]>([]);
```

## つまずきやすいポイントと対策

### 1. TypeScriptのエラー

- 型定義が分からない → 最初はanyを使い、後から具体的な型に修正
- 型推論に頼る → VSCodeの補完機能を活用

### 2. 状態更新のイミュータビリティ

- 配列の直接変更はNG → スプレッド構文やfilter/mapを使用

```typescript
// NG
todos.push(newTodo);

// OK
setTodos([...todos, newTodo]);
```

### 3. イベントハンドラーの型

```typescript
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // 処理
};
```

## 評価基準

### 基本機能 (必須)

- [ ] TODOの追加ができる
- [ ] TODOの完了/未完了の切り替えができる
- [ ] TODOの削除ができる
- [ ] 適切な型定義がされている

### 追加機能 (推奨)

- [ ] TODOの編集ができる
- [ ] フィルタリング機能がある
- [ ] データが永続化される
- [ ] レスポンシブデザイン

### コード品質

- [ ] コンポーネントが適切に分割されている
- [ ] エラーハンドリングがされている
- [ ] コードが読みやすい

## 発展課題

1. **ドラッグ&ドロップ**での並び替え
2. **カテゴリー機能**の追加
3. **期限設定**機能
4. **Next.js API Routes**を使ったバックエンド実装
5. **認証機能**の追加（NextAuth.js）

## 推奨リソース

- [Next.js公式ドキュメント](https://nextjs.org/docs)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
- [React公式チュートリアル](https://react.dev/learn)
- [Tailwind CSS公式ドキュメント](https://tailwindcss.com/docs)

## サポート方法

1. **ペアプログラミング**: 詰まったらすぐに質問
2. **コードレビュー**: 各Phaseごとにレビュー
3. **デバッグセッション**: エラーの読み方を一緒に学習
4. **ベストプラクティス共有**: より良い書き方を随時提案

---

このカリキュラムは柔軟に調整可能です。学習者のペースに合わせて進めてください。