VSCodeでGitを使いこなす完全ガイド｜GUI操作とCLIコマンドを徹底比較

Others
スポンサーリンク
スポンサーリンク
  1. はじめに
    1. 本記事の対象読者
    2. 前提知識
  2. VSCodeで使用する組み込みGit機能とは
    1. VSCodeのGit機能の特徴
  3. Git運用の基本：ブランチ戦略
    1. ブランチの種類と役割
    2. 運用フローの全体像
  4. VSCodeのGit設定と初期セットアップ
    1. ソース管理ビューの表示
    2. Git Graphビューの表示（推奨）
    3. ユーザー情報の設定
  5. ブランチ操作の基本
    1. ブランチ一覧の確認
    2. 既存ブランチへの切り替え
    3. 新しいブランチの作成
    4. リモートへのプッシュ
  6. 基本的なGit操作フロー
    1. ファイルの変更状態を確認
    2. ステージングとコミット
    3. コミットメッセージの書き方
    4. プル（リモートの変更を取得）
    5. プッシュ（ローカルの変更をリモートに送信）
  7. 日常的な運用フロー
    1. パターン1：通常の機能開発（feature/*）
    2. パターン2：本番環境の緊急バグ修正（hotfix/*）
    3. パターン3：並行して複数の機能を開発
  8. コンフリクト（競合）の解決
    1. コンフリクトが発生する状況
    2. CLIでのコンフリクト解決
    3. VSCodeでのコンフリクト解決
    4. コンフリクト解決のコツ
  9. よくある失敗とリカバリ
    1. 失敗1：間違ったブランチで作業してしまった
    2. 失敗2：プッシュできない（リモートが進んでいる）
    3. 失敗3：マージ後に問題が発覚
    4. 失敗4：コミットメッセージを間違えた
    5. 失敗5：特定のファイルを元に戻したい
  10. 便利なGit操作
    1. 操作1：コミット履歴の確認
    2. 操作2：変更内容の差分確認
    3. 操作3：スタッシュ（変更の一時退避）
    4. 操作4：特定のコミットを別ブランチに適用（Cherry-pick）
    5. 操作5：ブランチの削除
    6. 操作6：特定のコミットに戻る
  11. 便利なショートカットと設定
    1. よく使うショートカット
    2. カスタムショートカットの設定
    3. 推奨拡張機能
    4. VSCode設定の最適化
  12. まとめ
    1. 本記事で学んだこと
    2. Git運用のベストプラクティス
    3. 次のステップ
  13. 関連記事
  14. 参考リンク

はじめに

VSCodeでアプリケーション開発をしている方の多くが、Gitによるバージョン管理を導入しています。しかし、「CLIコマンドならわかるけど、VSCodeのGUI操作がよくわからない」「どのメニューから操作すればいいのか迷う」といった悩みを抱えている方も多いのではないでしょうか。

本記事では、VSCodeの組み込みGit機能を使った具体的な操作手順を、CLIコマンドと対比させながら詳しく解説します。ブランチ戦略の基本から、日常的な運用フロー、よくある失敗とリカバリ方法まで、実務で必要な知識を網羅的にカバーします。

本記事の対象読者

  • VSCodeでGitを使いたいが、GUI操作に不慣れな方
  • CLIコマンドは理解しているが、IDE上での操作方法がわからない方
  • Gitの基本は知っているが、実務での運用方法に悩んでいる方
  • 複数ブランチを使った並行開発を始めたい方

前提知識

本記事では、以下の知識があることを前提としています。

  • Gitの基本概念（commit、branch、merge）を理解している
  • VSCodeの基本操作ができる
  • リモートリポジトリ（GitHub、GitLabなど）が設定済み

VSCodeで使用する組み込みGit機能とは

VSCodeには標準でGit機能が組み込まれており、GUI操作でGitのほぼすべての機能を使用できます。さらに、拡張機能「GitLens」を追加することで、より強力な機能を利用可能です。

VSCodeのGit機能の特徴

  • 視覚的な操作：ファイルの変更状態がサイドバーで一目瞭然
  • 統合環境：コード編集とバージョン管理を同じ画面で実行
  • コマンドパレット：すべてのGit操作をキーボードから実行可能
  • インラインdiff：エディタ内で直接変更箇所を確認
  • 統合ターミナル：必要に応じてCLIコマンドも併用可能

ただし、CLIに比べて以下の点に注意が必要です。

  • 一部の高度な機能はCLIの方が使いやすい場合がある
  • GitLensなど拡張機能を入れるとさらに便利だが、学習コストがある
  • エラーメッセージがわかりにくいことがある

Git運用の基本：ブランチ戦略

実務でGitを使う際は、適切なブランチ戦略が重要です。本記事では、最も一般的な「GitFlow」をベースに解説します。

ブランチの種類と役割

main (master)
├── 本番環境にデプロイされる安定版
├── タグ付けしてバージョン管理
└── 直接コミットは原則禁止

develop
├── 開発の中心となるブランチ
├── 機能開発が統合される場所
└── mainにマージする前の検証用

feature/*
├── 新機能開発用の短期ブランチ
├── developから分岐
└── 完成後はdevelopにマージして削除

hotfix/*
├── 本番環境の緊急バグ修正用
├── mainから直接分岐
└── mainとdevelopの両方にマージ

運用フローの全体像

develop → feature/new-function → develop → main

# 緊急修正フロー
main → hotfix/critical-bug → main + develop

本番稼働中のシステムに対して、新規プロジェクト（大規模改修）を並行して進める場合は、feature/*ブランチを長期的に運用する形になります。

VSCodeのGit設定と初期セットアップ

ソース管理ビューの表示

VSCodeでGit操作を行うには、左サイドバーの「ソース管理」ビューを使用します。

VSCode操作手順：

  1. 左サイドバーのソース管理アイコンをクリック（またはキーボード：Ctrl+Shift+G / Cmd+Shift+G）
  2. プロジェクトがGitリポジトリとして認識されていることを確認
  3. ブランチ名が左下のステータスバーに表示される

Git Graphビューの表示（推奨）

Git Graphはブランチの履歴を視覚的に確認できる拡張機能です。

拡張機能のインストール：

  1. 左サイドバーの拡張機能アイコンをクリック（Ctrl+Shift+X / Cmd+Shift+X）
  2. 「Git Graph」を検索
  3. 「インストール」をクリック

使い方：

  • ソース管理ビューの「...」メニュー → 「View Git Graph」
  • またはコマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）→「Git: View Git Graph」

ユーザー情報の設定

初回のみ、Gitのユーザー情報を設定する必要があります。

CLIコマンド：

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

VSCode操作手順：

  1. 統合ターミナルを開く（Ctrl+Shift+@ / Cmd+Shift+@）
  2. 上記のCLIコマンドを実行

または設定ファイルから：

  1. Ctrl+, / Cmd+,で設定を開く
  2. 検索欄に「git.」と入力
  3. 「Git: Default Clone Directory」などGit関連設定を確認

ブランチ操作の基本

ブランチ一覧の確認

現在のリポジトリにどんなブランチがあるか確認します。

CLIコマンド：

# ローカルブランチ一覧
git branch

# 出力例：
#   main
# * develop  ← *が現在のブランチ
#   feature/login

# リモートブランチも含めて表示
git branch -a

# 出力例：
# * develop
#   main
#   remotes/origin/develop
#   remotes/origin/main
#   remotes/origin/feature/login

VSCode操作手順：

  1. 左下のステータスバーのブランチ名をクリック
  2. ブランチ一覧がコマンドパレットに表示される
    • ローカルブランチとリモートブランチが一覧表示
    • 現在のブランチは先頭に表示される

またはコマンドパレット：

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Checkout to...」と入力
  3. ブランチ一覧が表示される

Git Graphを使う場合：

  • Git Graphビューを開く
  • すべてのブランチがグラフで視覚的に表示される

既存ブランチへの切り替え

別のブランチに切り替える操作です。

CLIコマンド：

# ブランチ切り替え
git checkout develop

# または（Git 2.23以降）
git switch develop

VSCode操作手順：

  1. 左下のステータスバーのブランチ名をクリック
  2. 切り替えたいブランチを選択

またはコマンドパレット：

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Checkout to...」
  3. ブランチを選択

注意点：

  • 未コミットの変更がある場合、切り替え前にコミットまたはスタッシュが必要
  • ファイルに変更がある状態で切り替えると警告が表示される

新しいブランチの作成

CLIコマンド：

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

# または（Git 2.23以降）
git switch -c feature/new-function

# ブランチ作成のみ（切り替えない）
git branch feature/new-function

VSCode操作手順：

方法1：ステータスバーから

  1. 左下のブランチ名をクリック
  2. 「+ 新しいブランチの作成...」を選択
  3. ブランチ名を入力：feature/new-function
  4. Enterキーで作成と同時に切り替え

方法2：コマンドパレットから

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Create Branch...」
  3. ブランチ名を入力

方法3：特定のブランチから作成

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Create Branch From...」
  3. ブランチ名を入力
  4. 基準となるブランチを選択（例：develop）

リモートへのプッシュ

新しいブランチをリモートリポジトリに送信します。

CLIコマンド：

# 初回プッシュ（追跡ブランチを設定）
git push -u origin feature/new-function

# 2回目以降
git push

VSCode操作手順：

  1. ソース管理ビューの「...」メニュー → 「プッシュ」

初回プッシュ時は以下のメッセージが表示される場合があります：

このブランチにはアップストリームブランチがありません。
  1. 「OK」をクリック
  2. リモートブランチ名を確認して「OK」

または：

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Push」
  3. 初回は「Git: Publish Branch」を選択

初回プッシュ後は「プッシュ」で簡単にプッシュできます。

基本的なGit操作フロー

ファイルの変更状態を確認

CLIコマンド：

git status

VSCode操作手順：

エディタ内での表示：

  • 緑のバー：追加された行
  • 青のバー：変更された行
  • 赤い三角：削除された行

ソース管理ビューでの表示：

  1. 左サイドバーの「ソース管理」をクリック
  2. 変更ファイル一覧が表示される
    • M：Modified（変更）
    • U：Untracked（未追跡、新規作成）
    • D：Deleted（削除）
    • A：Added（追加）
    • C：Conflict（競合）

ファイルエクスプローラーでの表示：

  • 緑：新規作成ファイル
  • オレンジ：変更されたファイル

ステージングとコミット

CLIコマンド：

# ファイルをステージング
git add src/main/java/com/example/Service.java

# すべてのファイルをステージング
git add .

# コミット
git commit -m "feat: ログイン機能を追加"

VSCode操作手順：

  1. ソース管理ビューを開く（Ctrl+Shift+G / Cmd+Shift+G）
  2. 変更セクションに未ステージのファイル一覧が表示される
  3. ステージングする方法：
    • 個別ファイル：ファイル右側の「+」アイコンをクリック
    • すべてのファイル：「変更」セクションの「+」アイコンをクリック
  4. ステージされている変更セクションにファイルが移動
  5. 上部のメッセージ入力欄にコミットメッセージを入力
  6. 「✓」（コミット）ボタンをクリック

ショートカット：

  • ファイル上でCtrl+Enter / Cmd+Enterでステージング
  • メッセージ入力後にCtrl+Enter / Cmd+Enterでコミット

コミットと同時にプッシュ：

  1. 「✓」ボタンの右側の「▼」をクリック
  2. 「コミットしてプッシュ」を選択

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

実務では統一されたフォーマットを使うと管理しやすくなります。

type: 変更内容を端的に

詳細な説明（必要に応じて）

typeの例：

  • feat：新機能追加
  • fix：バグ修正
  • docs：ドキュメント変更
  • style：コードスタイル修正（フォーマット、セミコロンなど）
  • refactor：リファクタリング
  • test：テスト追加・修正
  • chore：ビルドツール、設定ファイルなどの変更

例：

feat: ユーザー登録機能を追加
fix: ログインエラーを修正
docs: READMEのセットアップ手順を更新

プル（リモートの変更を取得）

CLIコマンド：

git pull origin develop

VSCode操作手順：

  1. ソース管理ビューの「...」メニュー → 「プル」
  2. 自動的にリモートから最新の変更を取得してマージ

またはステータスバー：

  • 左下のステータスバーの↻アイコン（同期）をクリック
  • プルとプッシュを同時に実行

コマンドパレット：

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Pull」

リモートの状態を確認してからプル：

  1. 「...」メニュー → 「フェッチ」
  2. Git Graphで履歴を確認
  3. 問題なければ「プル」

プッシュ（ローカルの変更をリモートに送信）

CLIコマンド：

git push origin develop

VSCode操作手順：

  1. ソース管理ビューの「...」メニュー → 「プッシュ」

またはステータスバー：

  • 左下の↑アイコンの数字をクリック（プッシュ待ちのコミット数が表示される）

コマンドパレット：

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Push」

または：

コミット時に「コミットしてプッシュ」を選択すれば一度に実行可能

日常的な運用フロー

パターン1：通常の機能開発（feature/*）

大規模改修やプロジェクトで、developブランチから長期的にfeatureブランチを運用するケースを想定します。

ステップ1：featureブランチの作成

CLIコマンド：

# developブランチに切り替え
git checkout develop

# 最新状態に更新
git pull origin develop

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

# リモートにプッシュ
git push -u origin feature/major-update

VSCode操作手順：

  1. developに切り替え

    • 左下のブランチ名をクリック → 「develop」を選択

  2. 最新化

    • ソース管理ビューの「...」→「プル」

  3. featureブランチ作成

    • 左下のブランチ名をクリック
    • 「+ 新しいブランチの作成...」
    • ブランチ名：feature/major-update
    • Enterで作成と切り替え

  4. リモートへプッシュ

    • ソース管理ビューの「...」→「プッシュ」
    • 初回は「OK」をクリックして上流ブランチを設定

ステップ2：featureブランチで開発作業

CLIコマンド：

# featureブランチで作業
git checkout feature/major-update

# ファイルを編集...

# コミット＆プッシュ
git add .
git commit -m "feat: 新機能Aの実装"
git push origin feature/major-update

VSCode操作手順：

  1. featureブランチにいることを確認

    • 左下のブランチ名を確認

  2. 開発作業を実施

    • コード編集、ファイル追加など

  3. コミット＆プッシュ

    • ソース管理ビューを開く
    • 変更ファイルをステージング（「+」アイコン）
    • コミットメッセージ入力：feat: 新機能Aの実装
    • 「✓」の右の「▼」→「コミットしてプッシュ」

ステップ3：定期的にdevelopの変更を取り込む

長期的なfeatureブランチでは、週1回程度developの変更をマージして同期を保ちます。

CLIコマンド：

# featureブランチにいることを確認
git checkout feature/major-update

# developの最新を取り込む
git merge develop

# コンフリクトがあれば解決（後述）

# プッシュ
git push origin feature/major-update

VSCode操作手順：

  1. featureブランチで作業中の変更をコミット

    • 未コミットの変更があれば先にコミット

  2. developの変更を取り込む

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Merge Branch...」と入力
    • 「develop」を選択

  3. コンフリクトが発生した場合

    • 後述の「コンフリクト解決」を参照

  4. プッシュ

    • ソース管理ビューの「...」→「プッシュ」

ステップ4：本番リリース時にdevelopとmainにマージ

プロジェクトが完成し、本番環境にリリースする際の手順です。

CLIコマンド：

# developにマージ
git checkout develop
git pull origin develop
git merge feature/major-update
git push origin develop

# mainにマージ
git checkout main
git pull origin main
git merge develop
git push origin main

# タグ付け（任意）
git tag -a v2.0.0 -m "バージョン2.0.0リリース"
git push origin v2.0.0

VSCode操作手順：

  1. developにマージ

    • 左下のブランチ名をクリック → 「develop」
    • 「...」→「プル」
    • Ctrl+Shift+P / Cmd+Shift+P → 「Git: Merge Branch...」
    • 「feature/major-update」を選択
    • 「...」→「プッシュ」

  2. mainにマージ

    • 左下のブランチ名をクリック → 「main」
    • 「...」→「プル」
    • Ctrl+Shift+P / Cmd+Shift+P → 「Git: Merge Branch...」
    • 「develop」を選択
    • 「...」→「プッシュ」

  3. タグ付け（任意）

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Create Tag...」
    • タグ名：v2.0.0
    • メッセージ：バージョン2.0.0リリース
    • 「...」→「プッシュ」→「プッシュ (タグを含む)」

パターン2：本番環境の緊急バグ修正（hotfix/*）

本番運用中に緊急のバグが見つかった場合は、mainブランチから直接hotfixブランチを作成します。

ステップ1：hotfixブランチの作成

CLIコマンド：

# mainブランチに切り替え
git checkout main
git pull origin main

# hotfixブランチを作成
git checkout -b hotfix/critical-bug

# リモートにプッシュ
git push -u origin hotfix/critical-bug

VSCode操作手順：

  1. mainに切り替えて最新化

    • 左下のブランチ名をクリック → 「main」
    • 「...」→「プル」

  2. hotfixブランチ作成

    • 左下のブランチ名をクリック
    • 「+ 新しいブランチの作成...」
    • ブランチ名：hotfix/critical-bug
    • Enterで作成と切り替え

  3. リモートへプッシュ

    • ソース管理ビューの「...」→「プッシュ」

ステップ2：バグ修正とコミット

CLIコマンド：

# バグ修正作業...

# コミット＆プッシュ
git add .
git commit -m "fix: 本番環境の〇〇エラーを修正"
git push origin hotfix/critical-bug

VSCode操作手順：

  1. バグ修正作業を実施
  2. ソース管理ビューでステージング
  3. コミットメッセージ：fix: 本番環境の〇〇エラーを修正
  4. 「コミットしてプッシュ」

ステップ3：mainとdevelopの両方にマージ

hotfixはmainとdevelopの両方に反映する必要があります。

CLIコマンド：

# mainにマージ
git checkout main
git merge hotfix/critical-bug
git push origin main

# タグ付け
git tag -a v1.0.1 -m "緊急修正v1.0.1"
git push origin v1.0.1

# developにもマージ
git checkout develop
git merge hotfix/critical-bug
git push origin develop

# hotfixブランチを削除
git branch -d hotfix/critical-bug
git push origin --delete hotfix/critical-bug

VSCode操作手順：

  1. mainにマージ

    • 左下のブランチ名 → 「main」
    • Ctrl+Shift+P / Cmd+Shift+P → 「Git: Merge Branch...」
    • 「hotfix/critical-bug」を選択
    • 「...」→「プッシュ」

  2. タグ付け

    • Ctrl+Shift+P / Cmd+Shift+P → 「Git: Create Tag...」
    • タグ名：v1.0.1、メッセージ：緊急修正v1.0.1
    • 「...」→「プッシュ」→「プッシュ (タグを含む)」

  3. developにマージ

    • 左下のブランチ名 → 「develop」
    • Ctrl+Shift+P / Cmd+Shift+P → 「Git: Merge Branch...」
    • 「hotfix/critical-bug」を選択
    • 「...」→「プッシュ」

  4. hotfixブランチ削除

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Delete Branch...」
    • 「hotfix/critical-bug」を選択
    • リモートブランチも削除する場合は統合ターミナルで：
      git push origin --delete hotfix/critical-bug

パターン3：並行して複数の機能を開発

通常のdevelop運用と並行して、長期featureブランチでプロジェクト対応を進める場合です。

障害対応（developでの作業）

CLIコマンド：

# developに切り替え
git checkout develop
git pull origin develop

# 修正作業...

# コミット＆プッシュ
git add .
git commit -m "fix: ○○の不具合修正"
git push origin develop

# mainへマージ
git checkout main
git pull origin main
git merge develop
git push origin main

# featureブランチにも反映
git checkout feature/major-update
git merge develop
git push origin feature/major-update

VSCode操作手順：

  1. developで修正

    • 左下のブランチ名 → 「develop」
    • 「...」→「プル」
    • 修正作業
    • コミット＆プッシュ

  2. mainへマージ

    • 左下のブランチ名 → 「main」
    • 「...」→「プル」
    • Ctrl+Shift+P / Cmd+Shift+P → 「Git: Merge Branch...」→「develop」
    • 「...」→「プッシュ」

  3. featureへ反映

    • 左下のブランチ名 → 「feature/major-update」
    • Ctrl+Shift+P / Cmd+Shift+P → 「Git: Merge Branch...」→「develop」
    • コンフリクトがあれば解決
    • 「...」→「プッシュ」

この手順により、障害対応がfeatureブランチにも確実に反映されます。

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

複数のブランチで同じファイルの同じ箇所を編集すると、マージ時にコンフリクトが発生します。

コンフリクトが発生する状況

develop:  System.out.println("Hello");
feature:  System.out.println("こんにちは");

↓ developをfeatureにマージすると...

コンフリクト発生！

CLIでのコンフリクト解決

CLIコマンド：

# マージを実行
git merge develop

# コンフリクトが発生
# Auto-merging src/main/java/Service.java
# CONFLICT (content): Merge conflict in src/main/java/Service.java

# ファイルを開いて手動で編集
# <<<<<<< HEAD
# System.out.println("こんにちは");
# =======
# System.out.println("Hello");
# >>>>>>> develop

# 正しい内容に修正
System.out.println("こんにちは");  # または適切な内容

# ステージング＆コミット
git add src/main/java/Service.java
git commit -m "merge: developの変更を取り込み"

VSCodeでのコンフリクト解決

VSCode操作手順：

  1. コンフリクト発生時

    • マージを実行するとソース管理ビューに「マージの変更」セクションが表示される
    • コンフリクトしているファイルには「C」マークが表示される

  2. コンフリクトファイルを開く

    • ファイルをクリックして開く
    • エディタ内にコンフリクトマーカーが表示される

  3. マーカーの意味

   <<<<<<< HEAD (Current Change)
   System.out.println("こんにちは");
   =======
   System.out.println("Hello");
   >>>>>>> develop (Incoming Change)
  • <<<<<<< HEAD：現在のブランチの内容
  • =======：区切り
  • >>>>>>> develop：マージ元ブランチの内容

  1. 解決方法を選択

    VSCodeはコンフリクト箇所の上部に以下のボタンを表示：

    • Accept Current Change：現在のブランチの変更を採用
    • Accept Incoming Change：マージ元ブランチの変更を採用
    • Accept Both Changes：両方の変更を採用
    • Compare Changes：差分を詳細に確認

    適切なボタンをクリック

  2. 手動編集

    • 必要に応じてコンフリクトマーカーを削除して手動で編集
    • 例：両方を組み合わせた内容にする

  3. ステージングとコミット

    • すべてのコンフリクトを解決
    • ソース管理ビューで「+」アイコンをクリックしてステージング
    • コミットメッセージ：merge: developの変更を取り込み
    • コミット

コンフリクト解決のコツ

  • 小まめにマージ：週1回程度developをfeatureにマージすると、コンフリクトが小規模で済む
  • コミット粒度を小さく：機能単位でコミットすることで、問題箇所の特定が容易
  • コミュニケーション：チームで同じファイルを編集する場合は事前に調整

よくある失敗とリカバリ

失敗1：間違ったブランチで作業してしまった

mainブランチにいるつもりがdevelopで作業していた、というミスです。

まだコミットしていない場合

CLIコマンド：

# 変更を一時退避
git stash

# 正しいブランチに切り替え
git checkout feature/correct-branch

# 変更を復元
git stash pop

VSCode操作手順：

  1. 変更を退避

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Stash」と入力
    • 「Stash (Include Untracked)」を選択

  2. 正しいブランチに切り替え

    • 左下のブランチ名をクリック
    • 正しいブランチを選択

  3. 変更を復元

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Apply Latest Stash」

すでにコミットしてしまった場合

CLIコマンド：

# コミットハッシュを確認
git log --oneline
# 例：abc1234 feat: 新機能追加

# 正しいブランチに切り替え
git checkout feature/correct-branch

# コミットをコピー
git cherry-pick abc1234

# 間違ったブランチに戻る
git checkout wrong-branch

# 最後のコミットを取り消し（ローカルのみ）
git reset --hard HEAD~1

# リモートにプッシュ済みの場合
git revert abc1234
git push origin wrong-branch

VSCode操作手順：

  1. コミット履歴を確認

    • Git Graphを開く
    • またはソース管理ビューの「...」→「コミット」→「表示」
    • コミットハッシュをコピー（右クリック→「コミットIDのコピー」）

  2. 正しいブランチに切り替え

    • 左下のブランチ名 → 正しいブランチ

  3. コミットをコピー（Cherry-pick）

    • 統合ターミナルで：
      git cherry-pick abc1234

  4. 間違ったブランチのコミットを削除

    • 左下のブランチ名 → 間違ったブランチ
    • ローカルのみの場合（統合ターミナル）：
      git reset --hard HEAD~1
    • リモートにプッシュ済みの場合（統合ターミナル）：
      git revert abc1234
git push origin wrong-branch

失敗2：プッシュできない（リモートが進んでいる）

他の人がリモートにプッシュした後、自分がプッシュしようとするとエラーになります。

! [rejected] develop -> develop (fetch first)
error: failed to push some refs to 'origin'

CLIコマンド：

# リモートの変更を取得してマージ
git pull origin develop

# コンフリクトがあれば解決

# 再度プッシュ
git push origin develop

VSCode操作手順：

  1. プルを実行

    • ソース管理ビューの「...」→「プル」
    • 自動的にリモートの変更がマージされる

  2. コンフリクトがあれば解決

    • 前述のコンフリクト解決手順を実施

  3. プッシュ

    • 「...」→「プッシュ」

または：

  • 左下の同期アイコン（↻）をクリック
  • プルとプッシュを同時に実行

失敗3：マージ後に問題が発覚

マージは実行したが、テストで問題が見つかった場合です。

CLIコマンド：

# 直前のマージを取り消し
git reset --hard ORIG_HEAD

VSCode操作手順：

統合ターミナルで：

git reset --hard ORIG_HEAD

注意：

  • リモートにプッシュ済みの場合はresetではなくrevertを使用
  • reset --hardは変更を完全に削除するため慎重に実行

失敗4：コミットメッセージを間違えた

CLIコマンド：

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

# プッシュ済みの場合は強制プッシュ（注意！）
git push -f origin feature/branch

VSCode操作手順：

プッシュ前の場合：

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Commit Staged (Amend)」
  3. 正しいメッセージを入力
  4. コミット

プッシュ済みの場合：

統合ターミナルで強制プッシュ（チームメンバーに影響するため注意）：

git commit --amend -m "fix: 正しいコミットメッセージ"
git push -f origin feature/branch

失敗5：特定のファイルを元に戻したい

コミット前にファイルを元の状態に戻したい場合です。

CLIコマンド：

# 特定ファイルを元に戻す
git checkout -- src/main/java/Service.java

# すべてのファイルを元に戻す
git checkout -- .

VSCode操作手順：

方法1：ソース管理ビューから

  1. ソース管理ビューを開く
  2. 元に戻したいファイルを右クリック
  3. 「変更を破棄」を選択

方法2：エディタから

  1. ファイルを開く
  2. エディタ上部の「変更の破棄」ボタンをクリック

方法3：すべてのファイルを元に戻す

  1. ソース管理ビューの「変更」セクションを右クリック
  2. 「すべての変更を破棄」を選択

便利なGit操作

操作1：コミット履歴の確認

CLIコマンド：

# 簡易表示
git log --oneline

# グラフ表示
git log --graph --oneline --all

# 出力例：
# * abc1234 (HEAD -> develop) feat: 機能追加
# * def5678 (origin/develop) fix: バグ修正
# * ghi9012 (main) chore: 初期設定

VSCode操作手順：

方法1：Git Graph拡張機能

  1. ソース管理ビューの「...」→「View Git Graph」
  2. すべてのブランチがグラフで視覚的に表示される
  3. コミットをクリックすると詳細が表示される
  4. 右クリックで様々な操作が可能

方法2：VSCode組み込み機能

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: View History」
  3. コミット一覧が表示される

方法3：特定のファイルの履歴

  1. ファイルを右クリック
  2. 「タイムラインを表示」を選択
  3. 右サイドバーにファイルの変更履歴が表示される

操作2：変更内容の差分確認

CLIコマンド：

# まだステージングしていない変更
git diff

# ステージング済みの変更
git diff --staged

# ブランチ間の差分
git diff develop..main

VSCode操作手順：

方法1：未ステージの変更を確認

  1. ソース管理ビューで変更ファイルをクリック
  2. 左右比較エディタが開く
    • 左：元のファイル
    • 右：変更後のファイル

方法2：ステージ済みの変更

  1. 「ステージされている変更」のファイルをクリック
  2. 差分が表示される

方法3：ブランチ間の差分

  1. Ctrl+Shift+P / Cmd+Shift+P
  2. 「Git: Compare...」
  3. 比較元と比較先のブランチを選択
  4. 差分が表示される

方法4：インライン表示

  • エディタ左端の色付きバーをクリック
  • 変更箇所の詳細が表示される

操作3：スタッシュ（変更の一時退避）

作業中の変更を一時的に退避して、後で復元する機能です。

CLIコマンド：

# 変更を一時保存
git stash

# スタッシュ一覧
git stash list
# stash@{0}: WIP on develop: abc1234 feat: 機能追加
# stash@{1}: WIP on feature: def5678 fix: バグ修正

# 変更を復元（最新のスタッシュ）
git stash pop

# 特定のスタッシュを復元
git stash apply stash@{1}

# スタッシュを削除
git stash drop stash@{0}

# すべてのスタッシュを削除
git stash clear

VSCode操作手順：

方法1：コマンドパレット

  1. 変更を退避

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Stash」
    • 「Stash (Include Untracked)」を選択

  2. スタッシュ一覧を表示

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Show All Stashes」

  3. 変更を復元

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Apply Latest Stash」
    • または「Git: Apply Stash...」で特定のスタッシュを選択

  4. スタッシュを削除

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Drop Stash...」
    • 削除するスタッシュを選択

方法2：ソース管理ビューから

  1. ソース管理ビューの「...」
  2. 「スタッシュ」関連のメニューから操作

使用例：

急な障害対応が入り、feature開発を中断してdevelopで修正する場合に便利です。

feature開発中
↓ スタッシュで退避
↓ developに切り替えて障害対応
↓ 完了後、featureに戻る
↓ スタッシュを復元して開発再開

操作4：特定のコミットを別ブランチに適用（Cherry-pick）

CLIコマンド：

# コミットハッシュを確認
git log --oneline

# 別ブランチに切り替え
git checkout target-branch

# 特定のコミットを適用
git cherry-pick abc1234

VSCode操作手順：

  1. Git Graphを開く
  2. コピーしたいコミットを右クリック
  3. 「Copy Commit Hash」を選択
  4. 適用先のブランチに切り替え
  5. 統合ターミナルで：
    git cherry-pick abc1234

操作5：ブランチの削除

CLIコマンド：

# ローカルブランチを削除
git branch -d feature/old-feature

# まだマージしていないブランチを強制削除
git branch -D feature/old-feature

# リモートブランチを削除
git push origin --delete feature/old-feature

VSCode操作手順：

  1. ローカルブランチ削除

    • Ctrl+Shift+P / Cmd+Shift+P
    • 「Git: Delete Branch...」
    • 削除するブランチを選択

  2. リモートブランチも削除

    • 統合ターミナルで：
      git push origin --delete feature/old-feature

  3. 削除できない場合

    • まだマージしていないブランチは警告が出る
    • 強制削除する場合は統合ターミナルで：
      git branch -D feature/old-feature

操作6：特定のコミットに戻る

CLIコマンド：

# コミット履歴を確認
git log --oneline

# 特定のコミットに戻る（変更は保持）
git reset --soft abc1234

# 特定のコミットに戻る（変更も破棄）
git reset --hard abc1234

VSCode操作手順：

  1. Git Graphでコミット履歴を表示
  2. 戻りたいコミットを右クリック
  3. 「Reset current branch to this commit」を選択
  4. リセットモードを選択：
    • Soft：変更はステージング状態で保持
    • Mixed：変更は未ステージで保持
    • Hard：変更を完全に破棄

または統合ターミナル：

git reset --hard abc1234

便利なショートカットと設定

よく使うショートカット

Windows / Mac の順に記載します。

  • ソース管理ビューを開く：Ctrl+Shift+G / Cmd+Shift+G
  • コマンドパレット：Ctrl+Shift+P / Cmd+Shift+P
  • 統合ターミナルを開く：Ctrl+Shift+@ / Cmd+Shift+@
  • クイックオープン：Ctrl+P / Cmd+P
  • 設定を開く：Ctrl+, / Cmd+,

カスタムショートカットの設定

  1. Ctrl+K Ctrl+S / Cmd+K Cmd+Sでキーボードショートカット設定を開く
  2. 検索欄に「git」と入力
  3. 設定したいコマンドの右側の「+」アイコンをクリック
  4. キーを入力（例：Ctrl+Shift+C）
  5. Enterで確定

推奨拡張機能

Git Graph

  • ブランチの視覚的な表示
  • コミット履歴を簡単に確認

GitLens

  • コード内のGit情報を詳細に表示
  • 誰がいつどこを変更したかが一目瞭然
  • コミット履歴の詳細表示

Git History

  • ファイルやブランチの履歴を表示
  • 差分比較が簡単

VSCode設定の最適化

settings.jsonに以下を追加すると便利です：

{
  // Gitの自動フェッチを有効化
  "git.autofetch": true,
  
  // コミット前に自動でステージング
  "git.enableSmartCommit": true,
  
  // プッシュ時に自動でタグもプッシュ
  "git.followTagsWhenSync": true,
  
  // 未保存のファイルをコミット時に自動保存
  "git.enableCommitSigning": false,
  
  // インラインdiffの表示
  "diffEditor.renderSideBySide": true
}

設定の開き方：

  1. Ctrl+, / Cmd+,
  2. 右上の「{}」アイコンをクリック
  3. settings.jsonが開く

まとめ

本記事で学んだこと

  • VSCodeの組み込みGit機能の基本操作
  • ブランチ戦略（GitFlow）の実践的な運用
  • CLIコマンドとGUI操作の対応関係
  • よくある失敗パターンとリカバリ方法
  • 便利なGit操作とショートカット設定

Git運用のベストプラクティス

  1. 小まめなコミット：機能単位で細かくコミット
  2. わかりやすいコミットメッセージ：統一フォーマットを使用
  3. 定期的な同期：週1回はfeatureにdevelopをマージ
  4. プッシュ前の確認：差分を確認してから実行
  5. コンフリクトは早期解決：放置すると複雑化

次のステップ

本記事で基本的なGit操作は理解できたはずです。さらにスキルアップするには：

  • GitHubやGitLabのPull Request機能を使ったコードレビュー
  • Git Hooksを使った自動化（コミット前のテスト実行など）
  • Rebaseを使った履歴の整理
  • Submoduleを使った外部ライブラリ管理

VSCodeのGit操作に慣れてきたら、CLIコマンドも併用すると、より柔軟な運用が可能になります。

関連記事

【保存版】Git実務ガイド｜ブランチ戦略から失敗時のリカバリまで完全網羅
はじめにGitは強力なバージョン管理ツールですが、使い方を間違えると大変なことになります。この記事では、実務で使えるブランチ戦略から、よくある失敗とそのリカバリ方法まで、完全網羅します。対象読者：Gitの基本は分かるが、実務での使い方に不安...
caymezon.com
2026.01.12
EclipseでGitを使いこなす完全ガイド｜GUI操作とCLIコマンドを徹底比較
はじめにEclipseでJavaアプリケーション開発をしている方の多くが、Gitによるバージョン管理を導入しています。しかし、「CLIコマンドならわかるけど、EclipseのGUI操作がよくわからない」「どのメニューから操作すればいいのか迷...
caymezon.com
2026.02.02

参考リンク

実務でGitを使いこなして、効率的な開発を進めていきましょう。

スポンサーリンク

コメント