forked from semi-23e/nextjs-todo-tutorial
Yuta Sakurai
791411e209
- デフォルトのNext.jsテンプレートからカリキュラム用ガイドに変更 - TODOアプリ開発とGit/Gitea学習の全体像を提示 - 初学者向けの学習手順、つまずきポイント、FAQ等を追加
263 lines
6.9 KiB
Markdown
263 lines
6.9 KiB
Markdown
# 🎯 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! 🎉**
|