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アイテムの型定義

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 実装例

// 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 実装例

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

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

1. TypeScriptのエラー

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

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

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

// NG
todos.push(newTodo);

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

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

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公式ドキュメント
• TypeScript Handbook
• React公式チュートリアル
• Tailwind CSS公式ドキュメント

サポート方法

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

---

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