ino/nextjs-todo-tutorial
1
0
Fork 0
forked from semi-23e/nextjs-todo-tutorial
Code Pull Requests Activity

claude code用設定追加, 指導用メモ追加

Browse Source
This commit is contained in:
Yuta Sakurai
2025-06-30 15:50:59 +09:00
parent 57b0fb4c16
commit 11be49d7a8
3 changed files with 808 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
CLAUDE.md Normal file
View File

@@ -0,0 +1,137 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## プロジェクト概要
Next.js 15 App Routerを使用したTODOアプリケーション開発用のTypeScriptプロジェクトです。初学者向けの教育用プロジェクトとして設計されています。
## 開発コマンド
```bash
# 開発サーバー起動 (Turbopack使用)
npm run dev
# プロダクションビルド
npm run build
# プロダクションサーバー起動
npm run start
# コード品質チェック
npm run lint
```
注意: package.jsonではnpmを使用していますが、pnpm/yarnでも動作します。
## アーキテクチャ
### ディレクトリ構造
```
my-app/
├── src/
│ └── app/ # App Router
│ ├── layout.tsx # ルートレイアウト
│ ├── page.tsx # ホームページ
│ └── globals.css # グローバルスタイル
├── public/ # 静的アセット
├── .next/ # ビルド出力（gitignore）
└── node_modules/ # 依存関係（gitignore）
```
### 技術スタック
- **Next.js 15.3.4** - App Router、Turbopack対応
- **React 19.0.0** - 最新の安定版
- **TypeScript 5.x** - 厳格モード有効
- **Tailwind CSS v4** - PostCSS経由、`@theme inline`構文
### 重要な設定
- TypeScriptパスエイリアス: `@/*` → `./src/*`
- Tailwind CSS: `tailwind.config.ts`でカスタマイズ可能
- フォント: GeistフォントをGeist Sans/Geist Monoとして最適化
- ESLint: Next.jsデフォルト設定（`next/core-web-vitals`）
## App Routerのパターン
### ページ作成
新しいページは`src/app/`配下にディレクトリとして作成:
```typescript
// src/app/todos/page.tsx
export default function TodosPage() {
return <div>TODOリスト</div>
}
```
### レイアウト
各ディレクトリに`layout.tsx`を配置して共通レイアウトを定義可能。
### メタデータ
```typescript
export const metadata = {
title: 'TODOアプリ',
description: 'Next.jsで作るTODOアプリケーション',
}
```
## Tailwind CSS v4の使用方法
### 基本的なスタイリング
```tsx
<div className="bg-white p-4 rounded-lg shadow-md">
<h1 className="text-2xl font-bold text-gray-800">タイトル</h1>
</div>
```
### ダークモード対応
```tsx
<div className="bg-white dark:bg-gray-800">
<p className="text-gray-900 dark:text-gray-100">テキスト</p>
</div>
```
### カスタムテーマ変数
`globals.css`で`@theme`を使用してカスタマイズ可能。
## 開発ガイドライン
### コンポーネント作成
1. 機能ごとにコンポーネントを分割
2. 型定義を明確に（interfaceまたはtype）
3. propsの型は必ず定義
### 状態管理
- 単純な状態: `useState`
- 複雑な状態: `useReducer`
- グローバル状態: Context APIまたは状態管理ライブラリ
### エラーハンドリング
- try-catchでエラーをキャッチ
- ユーザーフレンドリーなエラーメッセージ
- error.tsxでエラーバウンダリー実装可能
## 教育プロジェクトとしての指針
このプロジェクトは初学者向けTODOアプリ開発の教材として使用されます：
1. **段階的な実装**: 基本機能から高度な機能へ
2. **型安全性の重視**: TypeScriptの学習を促進
3. **モダンな開発手法**: App Router、Server Components
4. **実践的なGit運用**: ブランチ戦略、コミット規約
関連ドキュメント:
- `todo-app-curriculum.md` - TODOアプリ開発カリキュラム
- `git-gitea-curriculum.md` - Git/Gitea学習カリキュラム

463
git-gitea-curriculum.md Normal file
View File

@@ -0,0 +1,463 @@
# Git/Gitea 学習カリキュラム (WSL + VSCode環境)
## 概要
このカリキュラムは、WSL (Windows Subsystem for Linux) とVSCodeを使用する初学者が、Gitによるバージョン管理とGiteaを使ったチーム開発の基礎を身につけることを目的としています。TODOアプリ開発と並行して学習することで、実践的なスキルを習得できます。
## 学習目標
- WSL環境でのGit操作を習得する
- VSCodeのGit統合機能を活用できる
- バージョン管理の重要性を体感する
- Giteaでのリポジトリ管理ができる
- ブランチを使った開発フローを習得する
- チーム開発の基本的な流れを理解する
## 前提環境
- Windows 10/11
- WSL2 (Ubuntu推奨)
- Visual Studio Code
- WSL拡張機能インストール済み
## 学習ステップ
### Phase 0: 環境構築 (2-3時間)
#### Step 0.1: WSL環境の確認
```bash
# WSLで以下を実行
wsl --version
lsb_release -a
# Ubuntuのパッケージ更新
sudo apt update && sudo apt upgrade -y
```
#### Step 0.2: VSCode拡張機能のインストール
必須拡張機能:
- **WSL** - WSL環境との連携
- **GitLens** - Git履歴の可視化
- **Git Graph** - ブランチの視覚的表示
推奨拡張機能:
- **Git History** - ファイル単位の履歴確認
- **GitHub Pull Requests** - PR管理
#### Step 0.3: Git初期設定（WSL側）
```bash
# WSL環境でGitをインストール
sudo apt install git -y
# バージョン確認
git --version
# ユーザー設定
git config --global user.name "あなたの名前"
git config --global user.email "your-email@example.com"
# 改行コードの自動変換を無効化（重要！）
git config --global core.autocrlf input
# VSCodeをデフォルトエディタに設定
git config --global core.editor "code --wait"
```
### Phase 1: Git基礎 (3-4時間)
#### Step 1.1: Gitとは何か
- バージョン管理の必要性
- Gitの特徴と利点
- 集中型vs分散型バージョン管理
#### Step 1.2: WSL環境でのプロジェクト作成
```bash
# WSLのホームディレクトリで作業
cd ~
# プロジェクトディレクトリ作成
mkdir -p projects/todo-app
cd projects/todo-app
# VSCodeで開く（WSL環境として）
code .
```
**重要**: VSCodeの左下に「WSL: Ubuntu」と表示されていることを確認
#### Step 1.3: 最初のリポジトリ作成
```bash
# リポジトリ初期化
git init
# 状態確認
git status
```
VSCodeでの確認:
- 左サイドバーの「ソース管理」アイコンをクリック
- 変更ファイルが表示されることを確認
### Phase 2: 基本的なGitワークフロー (4-5時間)
#### Step 2.1: VSCodeでのステージングとコミット
##### コマンドライン方式
```bash
# ファイルの追加
git add .
git status
# コミット
git commit -m "初回コミット: プロジェクトのセットアップ"
```
##### VSCode GUI方式
1. ソース管理パネルを開く（Ctrl+Shift+G）
2. 変更ファイルの「+」をクリックしてステージング
3. メッセージ入力欄にコミットメッセージを入力
4. チェックマーク（✓）をクリックしてコミット
**実践課題**: TODOアプリの各機能実装ごとにコミット
#### Step 2.2: 履歴の確認
コマンドライン:
```bash
# コミット履歴を見る
git log
git log --oneline
git log --graph --oneline --all
```
VSCode:
- Git Graph拡張機能でビジュアル表示
- GitLensでインライン履歴表示
#### Step 2.3: 差分の確認
VSCodeの差分表示機能:
- ファイルをクリックして変更内容を確認
- ソース管理パネルで差分をプレビュー
- GitLensのインライン差分表示
### Phase 3: ブランチ操作 (3-4時間)
#### Step 3.1: ブランチの基本
コマンドライン:
```bash
# ブランチ一覧
git branch
# 新しいブランチ作成と切り替え
git checkout -b feature/add-todo-edit
```
VSCode:
- ステータスバー左下のブランチ名をクリック
- 「新しいブランチの作成」を選択
**実践課題**: TODO編集機能を別ブランチで開発
#### Step 3.2: ブランチのマージ
```bash
# mainブランチに戻る
git checkout main
# featureブランチをマージ
git merge feature/add-todo-edit
```
VSCodeでのマージ:
1. Git Graphで視覚的にブランチを確認
2. マージしたいブランチを右クリック
3. 「Merge into current branch」を選択
#### Step 3.3: コンフリクト解決
VSCodeのコンフリクト解決機能:
- 自動的にコンフリクトファイルをハイライト
- 「現在の変更を取り込む」「入力側の変更を取り込む」「両方の変更を取り込む」から選択
- 3-wayマージエディタの活用
### Phase 4: Gitea入門 (3-4時間)
#### Step 4.1: Giteaとは
- GitHubライクなセルフホスト型Gitサーバー
- 主な機能の紹介
- アカウント作成とログイン
#### Step 4.2: SSH鍵の設定（WSL環境）
```bash
# SSH鍵の生成
ssh-keygen -t ed25519 -C "your-email@example.com"
# 公開鍵の確認
cat ~/.ssh/id_ed25519.pub
# GiteaのSSH鍵設定に登録
```
#### Step 4.3: リポジトリの接続
```bash
# HTTPSの場合
git remote add origin https://gitea.example.com/username/todo-app.git
# SSHの場合（推奨）
git remote add origin git@gitea.example.com:username/todo-app.git
# 確認
git remote -v
```
#### Step 4.4: プッシュとプル
```bash
# 初回プッシュ
git push -u origin main
# 以降のプッシュ
git push
# 最新の変更を取得
git pull
```
### Phase 5: VSCodeとGiteaの連携 (4-5時間)
#### Step 5.1: 認証情報の管理
```bash
# WSL環境での認証情報ヘルパー設定
git config --global credential.helper store
```
#### Step 5.2: Issues機能
- Issueの作成方法
- ラベルとマイルストーンの活用
- タスク管理としての使い方
**実践課題**: TODOアプリの改善点をIssueとして登録
#### Step 5.3: プルリクエスト
1. フォークとクローン
2. ブランチでの作業
3. プルリクエストの作成
4. コードレビューの基本
VSCodeでのPR作成支援:
- GitHub Pull Requests拡張機能の活用
- レビューコメントの確認と対応
### Phase 6: WSL特有の注意点と実践 (3-4時間)
#### Step 6.1: 改行コードの管理
```bash
# .gitattributes ファイルの作成
echo "* text=auto eol=lf" > .gitattributes
```
#### Step 6.2: パーミッションの問題
```bash
# WSLでのファイルパーミッション確認
ls -la
# 実行権限の付与が必要な場合
chmod +x script.sh
```
#### Step 6.3: Windows側とWSL側の使い分け
- プロジェクトファイルは必ずWSL側に配置
- `/mnt/c/`経由のアクセスは避ける
- WSL側のパス例: `~/projects/todo-app`
### Phase 7: 実践的な使い方 (3-4時間)
#### Step 7.1: .gitignoreの活用
```gitignore
# 依存関係
node_modules/
# 環境変数
.env.local
# ビルド成果物
.next/
out/
# IDE設定
.vscode/*
!.vscode/settings.json
!.vscode/extensions.json
# OS関連
.DS_Store
Thumbs.db
```
#### Step 7.2: VSCode設定の共有
`.vscode/settings.json`:
```json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"files.eol": "\n",
"git.autofetch": true
}
```
#### Step 7.3: 便利なGitエイリアス
```bash
# よく使うコマンドのエイリアス設定
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.cm commit
git config --global alias.lg "log --graph --oneline --all"
```
## つまずきやすいポイントと対策
### 1. WSL環境でのパス問題
- **問題**: Windows側のパスとWSL側のパスの混同
- **対策**: 常にWSL側で作業、`pwd`でパス確認
### 2. 改行コードの不一致
- **問題**: WindowsのCRLFとLinuxのLFの混在
- **対策**: `.gitattributes`で統一、VSCodeの設定で`LF`に固定
### 3. VSCodeが重い
- **問題**: Windows側のファイルをWSL経由で編集
- **対策**: プロジェクトは必ずWSL側に配置
### 4. 認証エラー
- **問題**: HTTPSでのpush時に認証失敗
- **対策**: SSH接続の使用、または認証トークンの設定
## 実践演習
### 演習1: TODOアプリの履歴管理
1. WSL環境でプロジェクト作成
2. VSCodeで開発
3. Git Graphで履歴を可視化
### 演習2: ブランチ戦略の実践
1. VSCodeでブランチ作成
2. フィルター機能を実装
3. Git Graphでマージを確認
### 演習3: チーム開発シミュレーション
1. Giteaでリポジトリ共有
2. VSCodeでプルリクエスト作成
3. コードレビューの実践
## コミットメッセージの書き方
### 良い例
```
feat: TODO編集機能を追加
- インライン編集に対応
- Escキーでキャンセル可能
- Enterキーで保存
```
### 悪い例
```
更新
修正
変更
```
## VSCode ショートカット集
| 操作 | ショートカット |
|------|----------------|
| ソース管理パネル | Ctrl+Shift+G |
| コマンドパレット | Ctrl+Shift+P |
| ターミナル開く | Ctrl+` |
| ファイル検索 | Ctrl+P |
| 全体検索 | Ctrl+Shift+F |
## トラブルシューティング
### WSL環境でgitコマンドが遅い
```bash
# WSL2の設定確認
wsl --list --verbose
# ファイルシステムのパフォーマンス向上
cd ~/projects # Windows側ではなくWSL側で作業
```
### VSCodeがWSLに接続できない
1. WSL拡張機能の再インストール
2. WSLの再起動: `wsl --shutdown`
3. VSCodeの再起動
## 発展学習
1. **Git Flow**の理解と実践
2. **GitHub Actions/Gitea Actions**でのCI/CD
3. **Git Hooks**の活用（WSL環境での設定）
4. **Docker**との連携（WSL2環境）
5. **Windows Terminal**のカスタマイズ
## 推奨リソース
- [Pro Git Book（日本語）](https://git-scm.com/book/ja/v2)
- [Gitea公式ドキュメント](https://docs.gitea.io/)
- [VSCode公式ドキュメント - WSL](https://code.visualstudio.com/docs/remote/wsl)
- [Learn Git Branching（インタラクティブ学習）](https://learngitbranching.js.org/?locale=ja)
## まとめ
WSL+VSCode環境でのGit/Gitea学習は、Windows環境でLinuxライクな開発を可能にします。VSCodeの強力なGit統合機能を活用しながら、コマンドラインでの操作も習得することで、柔軟な開発スタイルを身につけることができます。
---
このカリキュラムは、TODOアプリ開発カリキュラムと連携して使用することを想定しています。

208
todo-app-curriculum.md Normal file
View 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. **ベストプラクティス共有**: より良い書き方を随時提案
---
このカリキュラムは柔軟に調整可能です。学習者のペースに合わせて進めてください。