VSCodeでのGit実践ガイド - 効率的な開発ワークフロー

はじめに

Gitを使った開発をしていると、以下のような課題に直面することがよくあります：

• コンフリクト（競合）の解決が分からない
• コミット操作のミスから復旧できない
• ブランチ管理が複雑になって混乱する
• チーム開発でのワークフローが確立されていない

本記事では、VSCodeを使うエンジニア向けに、これらの実践的な問題を解決するGit運用方法を紹介します。コマンドライン操作とVSCodeのGUI機能を組み合わせて、効率的で安全な開発ワークフローを構築しましょう。

---

Git の基本概念とワークフロー

Git の3つの領域を理解する

Gitを効果的に使うには、まず3つの領域の概念を理解することが重要です：

1. ワーキングディレクトリ: 実際に作業している場所
2. ステージング領域: コミット準備中の変更を置く場所
3. リポジトリ: 確定した変更の履歴を保存する場所

基本的なワークフロー

# 1. 変更をステージングに追加
git add <ファイル名>
# または全ての変更を追加
git add .

# 2. 変更をコミット（履歴に保存）
git commit -m "コミットメッセージ"

# 3. リモートリポジトリに送信
git push origin <ブランチ名>

なぜこの手順が必要なのか？

• git add により、コミットしたい変更だけを選択できる
• git commit で変更を確定し、後から元に戻せるポイントを作る
• git push でチームメンバーと変更を共有する

---

VSCodeでのGit操作

VSCode標準のGit機能

VSCodeには強力なGit統合機能が標準で備わっています。

ソース管理ビューの使い方:

1. サイドバーのソース管理アイコンをクリック（Ctrl+Shift+G）
2. 変更されたファイルの一覧が表示される
3. ファイル名の右の + ボタンでステージング
4. コミットメッセージを入力して Ctrl+Enter でコミット

差分表示機能:

• 変更されたファイルをクリックすると、変更内容が並べて表示される
• 行単位での変更が色分けされて分かりやすい

おすすめ拡張機能

1. Git Graph

• インストール: mhutchie.git-graph
• 機能: コミット履歴を視覚的に表示
• 使い方: コマンドパレット（Ctrl+Shift+P）で "Git Graph" を検索

2. GitLens

• インストール: eamodio.gitlens
• 機能: 各行の変更者と変更日時を表示
• 便利な機能: ブレームビュー、コミット比較、リポジトリ統計

---

実践的なブランチ運用

基本的なブランチ操作

# 現在のブランチを確認
git branch

# 新しいブランチを作成して切り替え
git checkout -b feature/new-feature

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

# ブランチを削除
git branch -d feature/completed-feature

推奨ブランチ戦略

Git Flow を簡略化した構成:

• main: 本番環境にデプロイされる安定版
• develop: 開発版の統合ブランチ
• feature/xxx: 新機能開発用のブランチ
• hotfix/xxx: 緊急修正用のブランチ

実践的なワークフロー:

# 1. 最新のdevelopブランチを取得
git checkout develop
git pull origin develop

# 2. 新しいfeatureブランチを作成
git checkout -b feature/user-authentication

# 3. 作業完了後、developに戻る前に最新化
git checkout develop
git pull origin develop

# 4. featureブランチにdevelopの変更をマージ
git checkout feature/user-authentication
git merge develop

# 5. コンフリクトがなければpushしてプルリクエスト作成
git push origin feature/user-authentication

---

よくある問題と解決方法

1. コンフリクト（競合）の解決

コンフリクトが発生する場面:

• 同じファイルの同じ行を複数人が変更した場合
• マージやプルを実行したとき

VSCodeでの解決手順:

1. コンフリクトが発生したファイルをVSCodeで開く

2. コンフリクトマーカーが表示される：

   <<<<<<< HEAD
   あなたの変更
   =======
   他の人の変更
   >>>>>>> branch-name
   

3. VSCodeのインラインアクションを使用：

   • "Accept Current Change" - 自分の変更を採用
   • "Accept Incoming Change" - 相手の変更を採用
   • "Accept Both Changes" - 両方の変更を採用
   • "Compare Changes" - 詳細な比較

4. 手動で編集して最終的な内容を決定

5. ファイルを保存してコンフリクト解決完了

6. git add でステージング後、git commit で確定

2. コミットのミスを修正

直前のコミットメッセージを修正:

git commit --amend -m "正しいコミットメッセージ"

コミットを取り消し（変更は残す）:

git reset --soft HEAD~1

コミットを完全に取り消し:

git reset --hard HEAD~1

⚠️ 注意: --hard オプションは変更を完全に削除するため、使用前に確認が必要です。

3. 作業を一時退避（Stash）

使用場面:

• 作業途中でブランチを切り替えたい
• プルを実行したいが、未完了の変更がある

基本的な使い方:

# 変更を一時退避
git stash

# 退避した変更を復元
git stash pop

# 退避した変更の一覧を確認
git stash list

# 特定のstashを復元
git stash apply stash@{0}

VSCodeでの操作:

1. ソース管理ビューで ... メニューをクリック
2. "Stash" → "Stash (Include Untracked)" を選択
3. 復元時は "Stash" → "Pop Latest Stash" を選択

---

チーム開発でのベストプラクティス

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

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

feat: ユーザー認証機能を追加

- ログイン/ログアウト機能を実装
- JWT トークンによる認証を導入
- パスワードハッシュ化を実装

Closes #123

プレフィックスの使用:

• feat: 新機能
• fix: バグ修正
• docs: ドキュメント更新
• style: コードフォーマット
• refactor: リファクタリング
• test: テスト追加・修正

2. プルリクエスト（Pull Request）の作法

作成前のチェックリスト:

• 最新のdevelopブランチがマージされている
• コンフリクトが解決されている
• テストが通っている
• コードレビューに必要な情報を記載している

プルリクエストの説明テンプレート:

## 変更内容
- 何を変更したか

## 動作確認
- どのように動作確認したか

## 補足
- レビュー時の注意点など

3. リモートリポジトリとの同期

定期的な同期の重要性:

# 毎日の作業開始前に実行
git checkout develop
git pull origin develop

# featureブランチでの作業前
git checkout feature/my-feature
git merge develop  # または git rebase develop

---

高度なGit操作

1. リベース（Rebase）の活用

マージとリベースの違い:

• マージ: 履歴を保持したまま統合
• リベース: 履歴を一直線に整理して統合

インタラクティブリベース:

git rebase -i HEAD~3

複数のコミットを整理、統合、分割できます。

2. Cherry-pick

特定のコミットだけを別のブランチに適用:

git cherry-pick <コミットID>

使用場面:

• hotfixをdevelopブランチにも適用したい
• 特定の機能だけを別のブランチに持ってきたい

3. Git Hooks の活用

pre-commit フックの例:

#!/bin/sh
# .git/hooks/pre-commit

# ESLintチェック
npm run lint
if [ $? -ne 0 ]; then
  echo "ESLint failed. Please fix the issues."
  exit 1
fi

---

トラブルシューティング

よくあるエラーと解決方法

1. "Please commit your changes or stash them before you switch branches"

# 解決方法1: 変更をコミット
git add .
git commit -m "WIP: 作業中の変更"

# 解決方法2: 変更をstash
git stash

2. "Your branch is ahead of 'origin/main' by X commits"

# ローカルのコミットをリモートに送信
git push origin main

3. "fatal: refusing to merge unrelated histories"

# 関連性のない履歴を強制的にマージ
git pull origin main --allow-unrelated-histories

パフォーマンス改善

大きなリポジトリでの作業:

# 浅いクローン（履歴を限定）
git clone --depth 1 <リポジトリURL>

# 特定のブランチのみクローン
git clone -b develop --single-branch <リポジトリURL>

---

学習リソース

1. インタラクティブ学習

Learn Git Branching
https://learngitbranching.js.org/?locale=ja

• 視覚的にGitの概念を学べる優秀なツール
• ブランチ、マージ、リベースの動作を実際に体験できる
  

2. VSCode拡張機能

Git Graph
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

• コミット履歴を視覚的に表示
• ブランチの分岐・統合が一目で分かる
  
  

3. 設定ファイル

推奨される.gitignore例（Node.js）:

# 依存関係
node_modules/
npm-debug.log*

# 環境変数
.env
.env.local

# ビルド成果物
dist/
build/

# IDE設定
.vscode/settings.json
.idea/

# OS生成ファイル
.DS_Store
Thumbs.db

---

まとめ

VSCodeとGitを組み合わせた効率的な開発ワークフローのポイント：

1. 基本概念の理解: 3つの領域（ワーキング、ステージング、リポジトリ）を意識する
2. GUI操作の活用: VSCodeの標準Git機能と拡張機能を使いこなす
3. ブランチ戦略: チームに適したブランチ運用ルールを確立する
4. コンフリクト対応: 発生時の解決手順を習得する
5. ベストプラクティス: コミットメッセージやプルリクエストの品質を向上させる

最初は基本的な操作から始めて、徐々に高度な機能を取り入れていきましょう。Gitは習得に時間がかかりますが、マスターすればチーム開発の効率が飛躍的に向上します。

💡 次のステップ: 実際のプロジェクトでGit FlowやGitHub Flowなどの具体的なワークフローを導入し、チーム全体でのGit運用を標準化してみましょう。