🌿

VS Code標準のGit機能を補完する「Git Graph」のススメ

に公開
Git
VS Code
初心者
生産性
gitgraph
tech

はじめに

VS Code標準のソース管理も便利ですが、複雑なブランチの分岐やマージ履歴を追うのは少し見づらく感じたことはありませんか？
結論から言うと、VS Code拡張機能「Git Graph」を入れると、履歴の俯瞰とグラフ起点のGit操作が劇的に快適になります。

本記事では、Git Graphがなぜ便利なのか、そしてすぐに実務で使えるおすすめの設定を紹介します。

VS Code標準機能との使い分け

Git GraphはGit CLIを完全に置き換えるものではありません。VS Code標準機能と以下のように使い分けるのがおすすめです。

  • VS Code標準（Source Control）: 日常の差分確認、ステージング、コミット（「今」の作業）
  • Git Graph: 履歴の把握、分岐の 理解、過去のコミット詳細の確認（「過去と全体」の作業）

Git Graphのここが便利（3つのエッセンス）

1. 履歴の圧倒的な見やすさ

どこでブランチが分岐し、どこにタグが付いているかが一目でわかります。
特に複数人で開発しているプロジェクトや、長寿命ブランチが存在する環境では、全体の流れを視覚的に捉えやすくなり、新メンバーのキャッチアップにも最適です。

2. レビューや調査が捗る

2つのコミット間の比較や、特定コミットの変更ファイル一覧をUI上でサクッと確認できます。
「この不具合はいつ混入したか」「このリリースに何が入ったか」を調べる際の導線が短くなり、作業効率が大きく上がります。

3. 「見ながら操作」で事故を防ぐ

reset や rebase、cherry-pick などの操作は、履歴を完全に理解していないと事故につながりやすいです。
Git Graphなら、対象のコミットやブランチの位置をグラフ上で確認しながら右クリックで安全に実行できます。

コピペで使えるおすすめ設定（settings.json）

インストールしてすぐに実務で使いやすい状態にするための設定例です。

設定ファイルの開き方

  1. Ctrl + Shift + P (Mac の場合は Cmd + Shift + P) を押してコマンドパレットを開きます。
  2. 「Preferences: Open User Settings (JSON)」と入力して選択すると、設定ファイルが開きます。

※ 直接ファイルを編集したい場合のパスは以下の通りです：

  • Windows: %APPDATA%\Code\User\settings.json
  • macOS: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

推奨設定例

以下の内容を settings.json に追記（既存の設定がある場合は中身をマージ）して活用してください。

{
  // --- 基本表示の設定 ---
  // 初期表示のコミット数（多すぎると重くなるため300前後が推奨）
  "git-graph.initialLoadCommits": 300,
  // リモートブランチ、タグ、スタッシュ、未コミット変更をすべて表示
  "git-graph.showRemoteBranches": true,
  "git-graph.showTags": true,
  "git-graph.showStashes": true,
  "git-graph.showUncommittedChanges": true,
  "git-graph.showUntrackedFiles": true,

  // --- ビューのカスタマイズ ---
  // 変更箇所の構造をツリー表示にして把握しやすくする
  "git-graph.commitDetailsView.fileView.type": "File Tree",
  // コミット詳細ビューを下部に固定（画面を広く使えます）
  "git-graph.commitDetailsView.location": "Docked to Bottom",
  // 視認性を重視したグラフスタイル
  "git-graph.graph.style": "rounded",

  // --- 日付表示の調整 ---
  // コミット日時（Commit Date）ではなく、実際の作業日時（Author Date）を表示
  "git-graph.date.type": "Author Date",
  // 日本人に馴染みのある ISO 形式で表示
  "git-graph.date.format": "ISO Date & Time",

  // --- 運用ルールに沿ったブランチの絞り込み ---
  // チームの開発フローに合わせてパターンを調整してください
  "git-graph.customBranchGlobPatterns": [
    { "name": "Feature Branches", "glob": "heads/feature/*" },
    { "name": "Release Branches", "glob": "heads/release/*" },
    { "name": "Hotfix Branches", "glob": "heads/hotfix/*" }
  ]
}

まとめ

コマンドライン（CLI）とGUI（Git Graph）を適材適所で使い分けることで、Gitの履歴確認や複雑な操作の心理的ハードルが下がります。
特に複数ブランチを運用しているチームには非常に効果的なので、ぜひ試してみてください。

Discussion