nextjs-todo-tutorial/git-gitea-curriculum.md

# 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
```

**💡 コマンドの詳細説明：**

**git initとは？**

- 現在のディレクトリをGitリポジトリにします
- `.git`という隠しフォルダが作られ、そこに変更履歴が保存されます
- 一度だけ実行すればOK

**git statusとは？**

```bash
# 実行例
$ git status
On branch main

No commits yet  # まだコミットがない

Untracked files:  # Gitが追跡していないファイル
  (use "git add <file>..." to include in what will be committed)
        README.md
        index.html
```

**状態の読み方：**

- 赤色 = 変更されたがステージングされていない
- 緑色 = ステージングされた（コミット準備OK）
- Untracked = Gitがまだ追跡していない新しいファイル

VSCodeでの確認:

- 左サイドバーの「ソース管理」アイコンをクリック
- 変更ファイルが表示されることを確認

### Phase 2: 基本的なGitワークフロー (4-5時間)

#### Step 2.1: VSCodeでのステージングとコミット

##### コマンドライン方式

```bash
# ファイルの追加
git add .
git status

# コミット
git commit -m "初回コミット: プロジェクトのセットアップ"
```

**💡 コマンドの詳細説明：**

**git addとは？**

```bash
# 全てのファイルをステージングエリアに追加
git add .

# 特定のファイルだけ追加
git add README.md

# 特定の種類のファイルを追加
git add *.js
```

**ステージングエリアとは？**

- コミット前の「準備エリア」のようなもの
- ここに追加したファイルだけがコミットされる
- 間違えてaddした場合は`git reset`で取り消せる

**git commitとは？**

```bash
# 基本形
git commit -m "メッセージ"

# 詳細なメッセージを書きたい場合
git commit  # エディタが開く
```

**良いコミットメッセージの例：**

- ✅ `feat: TODO追加機能を実装`
- ✅ `fix: 空のTODOを追加できるバグを修正`
- ❌ `更新` （何を更新したか不明）
- ❌ `aaa` （意味がわからない）

##### VSCode GUI方式

1. ソース管理パネルを開く（Ctrl+Shift+G）
2. 変更ファイルの「+」をクリックしてステージング
3. メッセージ入力欄にコミットメッセージを入力
4. チェックマーク（✓）をクリックしてコミット

**実践課題**: TODOアプリの各機能実装ごとにコミット

#### Step 2.2: 履歴の確認

コマンドライン:

```bash
# コミット履歴を見る
git log
git log --oneline
git log --graph --oneline --all
```

**💡 コマンドの詳細説明：**

**git logの様々な表示方法：**

```bash
# 詳細表示（デフォルト）
$ git log
commit a1b2c3d4e5f6...  # コミットID（SHA-1ハッシュ）
Author: Your Name <email@example.com>
Date:   Mon Jan 15 10:30:00 2024 +0900

    feat: TODO追加機能を実装

# 1行表示（簡潔）
$ git log --oneline
a1b2c3d feat: TODO追加機能を実装
9876543 fix: バグ修正

# グラフ表示（ブランチが見える）
$ git log --graph --oneline
* a1b2c3d (HEAD -> main) feat: TODO追加機能を実装
* 9876543 fix: バグ修正
```

**便利なオプション：**

- `-n 5` - 最新の5件だけ表示
- `--since="2 weeks ago"` - 2週間以内のコミット
- `--author="Your Name"` - 特定の人のコミット
- `--grep="fix"` - メッセージに"fix"を含む

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
```

**💡 コマンドの詳細説明：**

**ブランチとは？**

- 開発の「枝分かれ」を作る機能
- mainブランチを安全に保ちながら、新機能を開発できる
- 失敗しても元に戻せる

**git branchの表示：**

```bash
$ git branch
* main              # *がついているのが現在のブランチ
  feature/todo-list
  feature/styling
```

**git checkoutの使い方：**

```bash
# 新しいブランチを作成して切り替え（一番よく使う）
git checkout -b feature/new-feature

# 既存のブランチに切り替え
git checkout main

# ブランチを作成だけ（切り替えない）
git branch feature/test
```

**ブランチ名のルール（例）：**

- `feature/機能名` - 新機能開発
- `fix/バグ名` - バグ修正
- `refactor/内容` - コード整理

VSCode:

- ステータスバー左下のブランチ名をクリック
- 「新しいブランチの作成」を選択

**実践課題**: TODO編集機能を別ブランチで開発

#### Step 3.2: ブランチのマージ

```bash
# mainブランチに戻る
git checkout main

# featureブランチをマージ
git merge feature/add-todo-edit
```

**💡 コマンドの詳細説明：**

**マージとは？**

- 別ブランチの変更を現在のブランチに統合すること
- 枝分かれした開発を一つにまとめる

**マージの流れ：**

```bash
# 1. 現在のブランチを確認
git branch
  feature/add-todo-edit
* main

# 2. マージ実行
git merge feature/add-todo-edit
Updating a1b2c3d..e5f6g7h
Fast-forward  # 早送りマージ（コンフリクトなし）
 src/app/page.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

# 3. マージ後の確認
git log --oneline --graph -5
```

**Fast-forwardマージとは？**

- コンフリクトがないシンプルなマージ
- mainブランチがただ「進む」だけ

**マージ後のブランチ削除：**

```bash
# 不要になったブランチを削除
git branch -d 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`でパス確認

**💡 具体的な例と解決法：**

```bash
# パスの確認方法
$ pwd
/mnt/c/Users/...  # ❌ Windows側（遅い）
/home/username/...  # ✅ WSL側（速い）

# ホームディレクトリに移動
cd ~

# Windows側からWSL側にファイルをコピー
cp -r /mnt/c/Users/yourname/projects/todo-app ~/projects/
```

**VSCodeでの確認方法：**

- 左下に`WSL: Ubuntu`と表示されているか確認
- ターミナルで`pwd`を実行してパスを確認

### 2. 改行コードの不一致

- **問題**: WindowsのCRLFとLinuxのLFの混在
- **対策**: `.gitattributes`で統一、VSCodeの設定で`LF`に固定

**💡 詳細な解決方法：**

**エラーの例：**

```bash
$ git add .
$ git status
warning: LF will be replaced by CRLF in src/app/page.tsx.
The file will have its original line endings in your working directory
```

**解決手順：**

1. **Gitの設定を変更**

```bash
# WSL側で実行
git config --global core.autocrlf input
```

2. **`.gitattributes`ファイルを作成**

```bash
echo "* text=auto eol=lf" > .gitattributes
git add .gitattributes
git commit -m "fix: 改行コードをLFに統一"
```

3. **既存ファイルの改行コードを修正**

```bash
# 全ファイルの改行コードをリセット
git rm --cached -r .
git reset --hard
```

4. **VSCodeの設定を変更**

```json
// .vscode/settings.json
{
  "files.eol": "\n"  // LFに固定
}
```

### 3. VSCodeが重い

- **問題**: Windows側のファイルをWSL経由で編集
- **対策**: プロジェクトは必ずWSL側に配置

### 4. 認証エラー

- **問題**: HTTPSでのpush時に認証失敗
- **対策**: SSH接続の使用、または認証トークンの設定

**💡 詳細な解決方法：**

**エラーの例：**

```bash
$ git push origin main
Username for 'https://gitea.example.com': yourname
Password for 'https://yourname@gitea.example.com': 
remote: Invalid username or password.
fatal: Authentication failed
```

**解決方法1：SSHに切り替える（推奨）**

```bash
# 1. 現在のリモートURLを確認
git remote -v

# 2. HTTPSからSSHに変更
git remote set-url origin git@gitea.example.com:username/todo-app.git

# 3. SSH鍵が設定されているか確認
ssh -T git@gitea.example.com
```

**解決方法2：アクセストークンを使う**

1. Giteaでアクセストークンを生成
   - 設定 → アプリケーション → アクセストークンを生成

2. 認証情報を保存

```bash
# 認証情報ヘルパーを設定
git config --global credential.helper store

# 次回のpush時にユーザー名とトークンを入力
# パスワードの代わりにアクセストークンを使用
```

### 5. ファイルが表示されない/消えた

**💡 よくあるシナリオと解決法：**

**ケース1：.gitignoreに追加されている**

```bash
# .gitignoreの内容を確認
cat .gitignore

# 特定のファイルがgitに追跡されているか確認
git ls-files | grep "filename"

# .gitignoreされているファイルを強制的に追加
git add -f filename
```

**ケース2：間違えて削除した**

```bash
# 削除したファイルを復元
git checkout HEAD -- filename

# または、特定のコミットから復元
git checkout abc123 -- filename
```

### 6. コミットメッセージを間違えた

**💡 修正方法：**

```bash
# 直前のコミットメッセージを修正
git commit --amend -m "新しいメッセージ"

# エディタで編集
git commit --amend

# 注意：すでにpushした場合は強制pushが必要（推奨しない）
# git push --force-with-lease origin main
```

## 実践演習

### 演習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キーで保存
```

### 悪い例

```
更新
修正
変更
```

### 💡 コミットメッセージのフォーマット

**基本形：**

```
<タイプ>: <概要>

<詳細説明（オプション）>
```

**タイプの種類：**

- `feat`: 新機能
- `fix`: バグ修正
- `docs`: ドキュメント
- `style`: コードの意味に影響しない変更
- `refactor`: コードの改善
- `test`: テスト追加・修正
- `chore`: ビルドプロセスや補助ツールの変更

**例：**

```bash
git commit -m "feat: TODOのフィルタリング機能を追加"
git commit -m "fix: 空のTODOを追加できるバグを修正"
git commit -m "docs: READMEにインストール手順を追加"
```

## VSCode ショートカット集

| 操作 | ショートカット |
|------|----------------|
| ソース管理パネル | Ctrl+Shift+G |
| コマンドパレット | Ctrl+Shift+P |
| ターミナル開く | Ctrl+` |
| ファイル検索 | Ctrl+P |
| 全体検索 | Ctrl+Shift+F |

## トラブルシューティング

### WSL環境でgitコマンドが遅い

```bash
# WSL2の設定確認
wsl --list --verbose

# ファイルシステムのパフォーマンス向上
cd ~/projects  # Windows側ではなくWSL側で作業
```

**💡 詳細な解決方法：**

**原因：** Windows側のファイルをWSL経由でアクセスすると遅い

```bash
# ❌ 遅いパス（Windows側）
cd /mnt/c/Users/yourname/projects/

# ✅ 速いパス（WSL側）
cd ~/projects/

# パフォーマンス比較
time git status  # 実行時間を計測
```

**他の改善策：**

1. Windows Defenderの除外フォルダにWSLを追加
2. `.gitconfig`に以下を追加：

   ```
   [core]
       preloadindex = true
       fscache = true
   ```

### VSCodeがWSLに接続できない

1. WSL拡張機能の再インストール
2. WSLの再起動: `wsl --shutdown`
3. VSCodeの再起動

**💡 詳細な解決手順：**

**ステップ1：拡張機能の確認**

```bash
# VSCodeで拡張機能を確認
# Ctrl+Shift+X で拡張機能パネルを開く
# "WSL" を検索してインストール済みか確認
```

**ステップ2：WSLの再起動**

```powershell
# PowerShellで実行（管理者権限）
wsl --shutdown

# 再度WSLを起動
wsl
```

**ステップ3：コマンドラインからVSCodeを起動**

```bash
# WSL内から実行
cd ~/projects/todo-app
code .
```

**それでも動かない場合：**

```bash
# WSL内でVSCode Serverを手動インストール
wget -O- https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64 | tar -xz
```

## 発展学習

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)

### 🎥 日本語の動画教材

- [【Git入門】Gitの基本からGitHubの使い方まで完全解説](https://www.youtube.com/watch?v=LDOR5HfI_sQ)
- [【2024年版】VSCodeでGitを使う方法](https://www.youtube.com/watch?v=vMZ0C06soxA)
- [WSL2環境での開発環境構築](https://www.youtube.com/watch?v=CULr6fEUvAo)
- [Gitコマンド入門 - サルでもわかるGit入門](https://backlog.com/ja/git-tutorial/)

### 📖 日本語の参考記事・書籍

- [サルでもわかるGit入門](https://backlog.com/ja/git-tutorial/) - バックログの無料チュートリアル
- [Gitのしくみを図解で理解する](https://qiita.com/rana_kualu/items/4d2d75c6813c05034765)
- [いまさら聞けないGit入門](https://www.slideshare.net/matsukaz/git-28304397)
- 書籍:「Gitが、おもしろいほどわかる本」（MdN）
- 書籍:「エンジニアのためのGitの教科書」（翔泳社）

### 🛠️ 実践的な学習リソース

- [GitHub Skills](https://skills.github.com/) - GitHubのインタラクティブコース
- [Git Cheat Sheet (日本語)](https://training.github.com/downloads/ja/github-git-cheat-sheet/) - コマンド一覧
- [Gitea Demo](https://try.gitea.io/) - Giteaを試せるデモサイト

### 💻 WSL関連リソース

- [Microsoft WSL公式ドキュメント](https://learn.microsoft.com/ja-jp/windows/wsl/)
- [WSL2で作るWindows開発環境](https://zenn.dev/ryuu/articles/wsl2-dev-setup)
- [Windows Terminalの使い方](https://forest.watch.impress.co.jp/docs/serial/yajiuma/1265263.html)

## 📦 よくあるGitシナリオ集

### シナリオ1：変更を元に戻したい

```bash
# まだコミットしていない変更を全て取り消す
git checkout -- .

# 特定のファイルだけ元に戻す
git checkout -- src/app/page.tsx

# ステージングした変更を取り消す
git reset HEAD filename
```

### シナリオ2：コミット履歴をきれいにしたい

```bash
# 直前のコミットと統合（コミットをまとめる）
git reset --soft HEAD~1
git commit -m "整理されたメッセージ"

# 注意：すでにpushした場合は他の人に影響するため避ける
```

### シナリオ3：作業中に別の作業が必要になった

```bash
# 現在の作業を一時保存
git stash save "途中のTODO編集機能"

# 別のブランチで緊急作業
git checkout -b hotfix/urgent-bug
# ... 作業 ...
git commit -m "fix: 緊急バグ修正"

# 元のブランチに戻って作業再開
git checkout feature/todo-edit
git stash pop
```

## 👨‍🏫 学習のアドバイス

### Git初心者が陥りやすい罠

1. **いきなりmainブランチで作業**
   - 必ずブランチを作成してから作業
   - mainブランチは「完成品」を置く場所

2. **コミットメッセージが適当**
   - 「あとで見る自分」のために丁寧に書く
   - 「何を」「なぜ」変更したかを記載

3. **pushしてからミスに気づく**
   - push前に`git log`で確認
   - `git diff origin/main`で差分を確認

### 効率的な学習方法

1. **コマンドとGUIを両方使う**
   - 基本はVSCodeのGUIでOK
   - 複雑な操作はコマンドを学ぶ

2. **小さなコミットを心がける**
   - 1機能1コミット
   - 後から振り返りやすい

3. **エラーを恐れない**
   - Gitは「元に戻す」が得意
   - 大抵のミスは修復可能

### 次のステップ

1. **ブランチ戦略を学ぶ**
   - Git Flow
   - GitHub Flow
   - GitLab Flow

2. **チーム開発のルール**
   - コードレビュー
   - コミットメッセージ規約
   - ブランチ保護

3. **自動化を学ぶ**
   - Git Hooks
   - CI/CDパイプライン

## まとめ

WSL+VSCode環境でのGit/Gitea学習は、Windows環境でLinuxライクな開発を可能にします。VSCodeの強力なGit統合機能を活用しながら、コマンドラインでの操作も習得することで、柔軟な開発スタイルを身につけることができます。

**大切なのは：**

- 🔄 失敗を恐れず、何度も試す
- 📝 学んだことをメモする
- 🤝 わからないことは質問する
- 🎯 小さな目標から始める

---

このカリキュラムは、TODOアプリ開発カリキュラムと連携して使用することを想定しています。