KentaroKumode/nextjs-todo-tutorial

Fork 0

forked from semi-23e/nextjs-todo-tutorial

Files

Yuta Sakurai c017844b9d ドキュメント更新

2025-07-08 16:11:22 +09:00

24 KiB

Raw Permalink 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

💡 コマンドの詳細説明：

git initとは？

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

git statusとは？

# 実行例
$ 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でのステージングとコミット

コマンドライン方式

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

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

💡 コマンドの詳細説明：

git addとは？

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

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

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

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

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

git commitとは？

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

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

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

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

VSCode GUI方式

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

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

Step 2.2: 履歴の確認

コマンドライン:

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

💡 コマンドの詳細説明：

git logの様々な表示方法：

# 詳細表示（デフォルト）
$ 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: ブランチの基本

コマンドライン:

# ブランチ一覧
git branch

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

💡 コマンドの詳細説明：

ブランチとは？

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

git branchの表示：

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

git checkoutの使い方：

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

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

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

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

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

VSCode:

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

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

Step 3.2: ブランチのマージ

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

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

💡 コマンドの詳細説明：

マージとは？

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

マージの流れ：

# 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ブランチがただ「進む」だけ

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

# 不要になったブランチを削除
git branch -d feature/add-todo-edit

VSCodeでのマージ:

Git Graphで視覚的にブランチを確認
マージしたいブランチを右クリック
「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: プルリクエスト

フォークとクローン
ブランチでの作業
プルリクエストの作成
コードレビューの基本

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でパス確認

💡 具体的な例と解決法：

# パスの確認方法
$ 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に固定

💡 詳細な解決方法：

エラーの例：

$ 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

解決手順：

Gitの設定を変更

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

.gitattributesファイルを作成

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

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

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

VSCodeの設定を変更

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

3. VSCodeが重い

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

4. 認証エラー

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

💡 詳細な解決方法：

エラーの例：

$ 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に切り替える（推奨）

# 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：アクセストークンを使う

Giteaでアクセストークンを生成
- 設定 → アプリケーション → アクセストークンを生成
認証情報を保存

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

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

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

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

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

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

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

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

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

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

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

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

💡 修正方法：

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

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

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

実践演習

演習1: TODOアプリの履歴管理

WSL環境でプロジェクト作成
VSCodeで開発
Git Graphで履歴を可視化

演習2: ブランチ戦略の実践

VSCodeでブランチ作成
フィルター機能を実装
Git Graphでマージを確認

演習3: チーム開発シミュレーション

Giteaでリポジトリ共有
VSCodeでプルリクエスト作成
コードレビューの実践

コミットメッセージの書き方

良い例

feat: TODO編集機能を追加

- インライン編集に対応
- Escキーでキャンセル可能
- Enterキーで保存

悪い例

更新
修正
変更

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

基本形：

<タイプ>: <概要>

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

タイプの種類：

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

例：

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コマンドが遅い

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

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

💡 詳細な解決方法：

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

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

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

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

他の改善策：

Windows Defenderの除外フォルダにWSLを追加

.gitconfigに以下を追加：

[core]
    preloadindex = true
    fscache = true

VSCodeがWSLに接続できない

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

💡 詳細な解決手順：

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

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

ステップ2：WSLの再起動

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

# 再度WSLを起動
wsl

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

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

それでも動かない場合：

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

発展学習

Git Flowの理解と実践
GitHub Actions/Gitea ActionsでのCI/CD
Git Hooksの活用（WSL環境での設定）
Dockerとの連携（WSL2環境）
Windows Terminalのカスタマイズ

推奨リソース

📚 公式ドキュメント

🎥 日本語の動画教材

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

サルでもわかるGit入門 - バックログの無料チュートリアル
Gitのしくみを図解で理解する
いまさら聞けないGit入門
書籍:「Gitが、おもしろいほどわかる本」（MdN）
書籍:「エンジニアのためのGitの教科書」（翔泳社）

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

GitHub Skills - GitHubのインタラクティブコース
Git Cheat Sheet (日本語) - コマンド一覧
Gitea Demo - Giteaを試せるデモサイト

💻 WSL関連リソース

📦 よくあるGitシナリオ集

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

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

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

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

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

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

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

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

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

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

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

👨‍🏫 学習のアドバイス

Git初心者が陥りやすい罠

いきなりmainブランチで作業
- 必ずブランチを作成してから作業
- mainブランチは「完成品」を置く場所
コミットメッセージが適当
- 「あとで見る自分」のために丁寧に書く
- 「何を」「なぜ」変更したかを記載
pushしてからミスに気づく
- push前にgit logで確認
- git diff origin/mainで差分を確認

効率的な学習方法

コマンドとGUIを両方使う
- 基本はVSCodeのGUIでOK
- 複雑な操作はコマンドを学ぶ
小さなコミットを心がける
- 1機能1コミット
- 後から振り返りやすい
エラーを恐れない
- Gitは「元に戻す」が得意
- 大抵のミスは修復可能

次のステップ

ブランチ戦略を学ぶ
- Git Flow
- GitHub Flow
- GitLab Flow
チーム開発のルール
- コードレビュー
- コミットメッセージ規約
- ブランチ保護
自動化を学ぶ
- Git Hooks
- CI/CDパイプライン

まとめ

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

大切なのは：

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

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

24 KiB Raw Permalink Blame History Unescape Escape

Git/Gitea 学習カリキュラム (WSL + VSCode環境)

概要

学習目標

前提環境

学習ステップ

Phase 0: 環境構築 (2-3時間)

Step 0.1: WSL環境の確認

Step 0.2: VSCode拡張機能のインストール

Step 0.3: Git初期設定（WSL側）

Phase 1: Git基礎 (3-4時間)

Step 1.1: Gitとは何か

Step 1.2: WSL環境でのプロジェクト作成

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

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

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

コマンドライン方式

VSCode GUI方式

Step 2.2: 履歴の確認

Step 2.3: 差分の確認

Phase 3: ブランチ操作 (3-4時間)

Step 3.1: ブランチの基本

Step 3.2: ブランチのマージ

Step 3.3: コンフリクト解決

Phase 4: Gitea入門 (3-4時間)

Step 4.1: Giteaとは

Step 4.2: SSH鍵の設定（WSL環境）

Step 4.3: リポジトリの接続

Step 4.4: プッシュとプル

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

Step 5.1: 認証情報の管理

Step 5.2: Issues機能

Step 5.3: プルリクエスト

Phase 6: WSL特有の注意点と実践 (3-4時間)

Step 6.1: 改行コードの管理

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

Step 6.3: Windows側とWSL側の使い分け

Phase 7: 実践的な使い方 (3-4時間)

Step 7.1: .gitignoreの活用

Step 7.2: VSCode設定の共有

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

つまずきやすいポイントと対策

1. WSL環境でのパス問題

2. 改行コードの不一致

3. VSCodeが重い

4. 認証エラー

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

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

実践演習

演習1: TODOアプリの履歴管理

演習2: ブランチ戦略の実践

演習3: チーム開発シミュレーション

コミットメッセージの書き方

良い例

悪い例

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

VSCode ショートカット集

トラブルシューティング

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

VSCodeがWSLに接続できない

発展学習

推奨リソース

📚 公式ドキュメント

🎥 日本語の動画教材

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

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

💻 WSL関連リソース

📦 よくあるGitシナリオ集

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

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

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

👨‍🏫 学習のアドバイス

Git初心者が陥りやすい罠

効率的な学習方法

次のステップ

まとめ

24 KiB

Raw Permalink Blame History