23e-matsumoto/nextjs-todo-tutorial
1
0
Fork 0
forked from semi-23e/nextjs-todo-tutorial
Code Pull Requests Activity
Files
a6ff1b3ff53532614111f8d61277cf33f3bc79c6
nextjs-todo-tutorial/git-gitea-curriculum.md

11 KiB
Raw Blame History

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環境の確認

# 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側）

# 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環境でのプロジェクト作成

# WSLのホームディレクトリで作業
cd ~

# プロジェクトディレクトリ作成
mkdir -p projects/todo-app
cd projects/todo-app

# VSCodeで開く（WSL環境として）
code .

重要: VSCodeの左下に「WSL: Ubuntu」と表示されていることを確認

Step 1.3: 最初のリポジトリ作成

# リポジトリ初期化
git init

# 状態確認
git status

VSCodeでの確認:

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

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

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

コマンドライン方式
# ファイルの追加
git add .
git status

# コミット
git commit -m "初回コミット: プロジェクトのセットアップ"
VSCode GUI方式
  1. ソース管理パネルを開く（Ctrl+Shift+G）
  2. 変更ファイルの「+」をクリックしてステージング
  3. メッセージ入力欄にコミットメッセージを入力
  4. チェックマーク（✓）をクリックしてコミット

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

Step 2.2: 履歴の確認

コマンドライン:

# コミット履歴を見る
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: ブランチの基本

コマンドライン:

# ブランチ一覧
git branch

# 新しいブランチ作成と切り替え
git checkout -b feature/add-todo-edit

VSCode:

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

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

Step 3.2: ブランチのマージ

# 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環境）

# SSH鍵の生成
ssh-keygen -t ed25519 -C "your-email@example.com"

# 公開鍵の確認
cat ~/.ssh/id_ed25519.pub

# GiteaのSSH鍵設定に登録

Step 4.3: リポジトリの接続

# 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: プッシュとプル

# 初回プッシュ
git push -u origin main

# 以降のプッシュ
git push

# 最新の変更を取得
git pull

Phase 5: VSCodeとGiteaの連携 (4-5時間)

Step 5.1: 認証情報の管理

# 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: 改行コードの管理

# .gitattributes ファイルの作成
echo "* text=auto eol=lf" > .gitattributes

Step 6.2: パーミッションの問題

# 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の活用

# 依存関係
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:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.eol": "\n",
  "git.autofetch": true
}

Step 7.3: 便利なGitエイリアス

# よく使うコマンドのエイリアス設定
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コマンドが遅い

# 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のカスタマイズ

推奨リソース

まとめ

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

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

View Git Blame Copy Permalink