付録A VS Code で使う Git¶
概要¶
VS Code には Git 操作の GUI が標準で組み込まれています (拡張機能なし)。本書ではここまで CLI (コマンドライン) を中心に学んできましたが、日常的な操作の多くは VS Code の GUI でも実行できます。CLI と GUI を併用することで、それぞれの長所を活かせる場面があります。
この付録では、VS Code 標準の Git 機能のうち、特に使う頻度が高い操作を紹介します。GUI に切り替えても、内部で実行されているのは皆さんがすでに学んだ git add・git commit・git diff といったコマンドそのものです。
Source Control パネル¶
VS Code 左サイドバーの分岐アイコン (Source Control、Ctrl+Shift+G) をクリックすると、Source Control パネルが開きます。リポジトリ内のファイル変更が一覧表示され、ステージ状況ごとにグループ分けされています。
主なグループは次の 2 つです。
Changes — まだステージしていない変更 (
git statusの “Changes not staged for commit” に相当)Staged Changes —
git add済みの変更 (git statusの “Changes to be committed” に相当)
ファイルをステージ・コミット¶
Source Control パネルから、ステージとコミットの一連の流れを GUI で完結できます。マウスとキーボードを併用するのが速いでしょう。
操作手順:
Changes 横の
+ボタンでファイルを Staged Changes に移動 (=git add)上部のメッセージボックスにコミットメッセージを入力
Ctrl+Enterまたは ✓ アイコンでコミット (=git commit)
差分を見る¶
Source Control パネルでファイル名をクリックすると、エディタ領域にサイドバイサイド差分が開きます。左に旧版 (HEAD など)、右に現在の作業ツリーが並び、変更箇所が色分けされて表示されます。
CLI の git diff は端末の幅に縛られて読みづらくなりがちですが、VS Code の差分ビューは横並びで全体を見渡せるため、変更が多いファイルや行の長いコードでも内容を把握しやすいです。差分確認だけは GUI に切り替える、という使い方も実用的です。
.gitignore の編集支援¶
VS Code エディタで .gitignore を開いて編集すると、無視対象になっているファイルがエクスプローラ上で薄い色 (グレーアウト) に変わります。これにより、書いたパターンが意図通りに効いているかをファイルツリー上で視覚的に確認できます。
新しいパターンを追加したのに対象ファイルが薄くならない場合は、パターンの書き方が間違っている可能性があります。CLI で git check-ignore -v <ファイル> と組み合わせると、原因の特定がさらに早くなります。
CLI と GUI の使い分け¶
Tip
コミット作成・差分確認・解決: VS Code の GUI が速い
複雑な履歴操作・リモート設定・自動化: CLI が確実
慣れた頃には両方を場面で使い分けるようになります
拡張機能 (任意)¶
VS Code 標準の Git 機能でも十分実用的ですが、拡張機能を追加するとさらに便利になります。代表的なものを紹介します。
GitLens: コミット履歴・blame 表示が強化される (人気)
GitHub Pull Requests and Issues: 将来 PR を扱うときに便利
注釈
これらは本書のスコープ外ですが、慣れてきたら導入検討する価値があります。