VSCode Git Graph完全ガイド｜初心者向け履歴管理とブランチ操作

こんにちは、フロントエンドエンジニアのてりーです。
React + TypeScriptを5年以上使い続け、派遣 → フリーランス → メガベンチャーとキャリアを積んできました。
詳しいキャリアや学習ロードマップについてはこちらからどうぞ！

• てりーのこれまで
• フリーランスからメガベンチャーへ

👉 本記事ではVSCodeのプラグインである「Git Graph」を使ってGit操作を直感的に行なっていく方法を解説していきます

1. Git Graphとは

「Git Graph」は、VSCodeで使えるGit拡張機能で、履歴やブランチの状態を直感的に可視化できるツールです。
Git Graph公式サイト

ターミナルでgit logコマンドを打つ代わりに、視覚的に履歴を管理できるため、初心者にも扱いやすくなっています。

Git logの場合

Gitの履歴はgit logコマンドをターミナルで打つと見れます！

開発ブランチと本番ブランチなど複数のブランチがあると一目で開発の流れが追いにくいですよね。
その場合にGit HistoryやGit Graphを使うとグラフィカルに流れが把握できます。

Git Graphの場合

左端にあるGIt Flowをグラフィカルに表示してくれている箇所があるので、視覚的にブランチの流れが追いやすいです！
Git操作は間違えると修正するのに苦労するので、GUIを使って視覚的に全体像を把握する事をお勧めします！

Git運用に慣れていない方は、よくあるパターンとその対処法を事前に把握しておきましょう。
👉 Gitに慣れていない人がよくハマるパターンと対処法まとめ

2. Git Graphのインストール方法

ここからはGit Graphの導入方法や使い方を解説していきます。
導入方法は他の拡張機能と同じで簡単です！

Git Gpraphのインストール方法

1. VScodeの拡張機能から「git graph」で検索して、Git Graphの拡張機能を開く

2.インストールを押す

「インストール」ボタンをクリックします。完了後、VSCodeを再起動

Git Graphの開き方

サイドバーのソース管理を開いて、そこから画像のアイコンをクリックするとGit Graphが開かれます！

リポジトリーツリーを確認

Git Graphのトップページはリポジトリーツリーが表示されます。
ここでコミットやマージの履歴の流れが一目で確認できます。

インストールが完了したら、次はGitで細かい差分を効率的に管理する方法もチェックしてみましょう。
👉 Gitで差分を1行単位でcommitする方法

3. Git Graphの基本操作

 この章ではGit Graphの用途を「履歴確認」「ブランチ操作」の2つに絞って解説していきます！

① 履歴を確認する

誰がいつどのファイルを変更したのか、またその差分を確認する事が出来ます！
バグ調査やリファクタリング時の影響箇所を知る際に有効です。

 具体的な操作手順手順

1 Git Graphを開く

• VSCodeのサイドバーにある「Git Graph」のアイコンをクリック
• 画面にリポジトリのコミット履歴がグラフ形式で表示されます

2 履歴を確認する

• 左側には縦に並んだ「ブランチの線」や「コミットの点」が表示されます
• 各点（コミット）をクリックすると、その詳細（変更内容、コミットメッセージ、作業者名など）が右側パネルに表示されます

ファイルをクリックすると、そのcommitでのファイル単位の差分が見られます！
上部のバーからブランチごとの絞り込みも可能です！

② ブランチを切り替える

複数のブランチを切り替える作業は、Git Graphの最も便利な機能のひとつです。
特にチーム開発では、複数人が別々のブランチで作業することが一般的なので、効率的にブランチを管理することが求められます。

具体的な操作手順

1. ブランチ一覧を確認する

• Git Graphの画面に表示されている「ブランチ名」を確認します
• 各ブランチは色分けされているため、視覚的に判別しやすくなっています

2 ブランチを選択する

• 切り替えたいブランチを右クリック
• ポップアップメニューから「Checkout」ボタンを選択

他にもCreate Branchをクリックすれば、そのブランチを親として新しいブランチを作成出来ます！
Cherry Pickすればそのcommitの差分を手元のブランチに持ってこれます！
Revertすれば、そのcommitを打ち消すcommitが作成出来ます！

チームでGit運用を行う場合、プルリクエストの作成は重要なポイントです。
失敗しないためのチェックリストも確認しておきましょう。
👉 初心者がチーム開発で周りに迷惑かけない為のプルリクエストまでのチェックリスト

4. Git GraphとGit Historyの比較

この章ではVSCodeのGit操作のプラグインで他に人気である、Git Historyとの比較を行なっていきます！

Git Historyの導入方法や使い方などの詳しい情報はこちらの記事に記載してあります。
👉VSCode Git History完全ガイド：履歴確認を1クリックで！使い方と活用法

Git GraphとGit HistoryはどちらもVSCodeでGitの履歴を管理するための拡張機能ですが、それぞれ異なる強みがあります。
以下の表に個人的な特徴を整理し、結論をまとめます。

---

機能/特徴	Git Graph	Git History
UI	シンプルで直感的、情報が整理されている	情報量が多く、細かいデータまで確認可能
履歴確認	コミット履歴をツリー形式で視覚的に確認	ファイル単位・行単位で履歴を確認可能
差分確認	コミット単位での差分確認がメイン	「プロジェクト全体」「ワークスペース」「直前のコミット」と柔軟に比較可能
検索機能	Author、Date、Commitで検索しやすい	検索機能が強力で、大規模プロジェクト向き
操作性	Cherry-pick、Add Tag など直感的に操作可能	選択肢が多いため、慣れるまで使いにくい
用途	コミット履歴を一覧で確認したい時に便利	ファイルや行単位での詳細な履歴調査に便利

詳しい比較内容のメモはこちらにあるので、気になる方はぜひ！

Zenn

git history vs git graph

…

個人的な結論

日常的な履歴確認・軽い操作: Git Graph
詳細な履歴調査・柔軟な差分比較: Git History

5. Git Graphのカスタマイズ

Git Graphはデフォルト設定のままでも使いやすいですが、少しカスタマイズすることで、より自分の開発スタイルや好みに合った環境を整えることができます。
代表的なカスタマイズポイントを紹介します。

デフォルトブランチの設定

プロジェクトには複数のブランチが存在しますが、よく使うブランチ（例: main、develop）をデフォルトで表示するように設定できます。

• VSCodeの「設定」を開きます
• 検索バーに「Default Branch」と入力
• 表示されたフィールドにデフォルトで表示したいブランチ名（例: main）を入力
• Git Graphを再読み込みして反映

まとめ

Git Graphを使う事で、Git Flowを視覚的に把握する事が出来るので、ぜひ皆さんも活用してみて下さい！