forked from semi-23e/nextjs-todo-tutorial
claude code用設定追加, 指導用メモ追加
This commit is contained in:
463
git-gitea-curriculum.md
Normal file
463
git-gitea-curriculum.md
Normal 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アプリ開発カリキュラムと連携して使用することを想定しています。
|
||||
Reference in New Issue
Block a user