forked from semi-23e/nextjs-todo-tutorial
claude code用設定追加, 指導用メモ追加
This commit is contained in:
208
todo-app-curriculum.md
Normal file
208
todo-app-curriculum.md
Normal file
@@ -0,0 +1,208 @@
|
||||
# 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. **ベストプラクティス共有**: より良い書き方を随時提案
|
||||
|
||||
---
|
||||
|
||||
このカリキュラムは柔軟に調整可能です。学習者のペースに合わせて進めてください。
|
||||
Reference in New Issue
Block a user