Gitを使って開発するとき、GUIクライアントとして便利なのがSourceTreeです。
変更ファイルの確認やコミット、ブランチの切り替えなどを、マウス操作で簡単に行えます。
一方、VS Codeで開発していると、SourceTreeとVS Codeを行き来するのが少し面倒に感じることもあります。
そこで今回は、SourceTreeを使わず、VS Codeの標準Git機能とGitLensだけでGit管理する方法を整理してみます。
1. SourceTreeを使わなくてもGit管理はできる？
結論からいうと、普段の開発で行うGit操作の多くは、VS Codeだけで完結できます。
VS Codeには、Gitの機能が標準搭載されています。さらにGitLensという拡張機能を追加すると、コミット履歴や変更内容の確認などを、より詳しく行えるようになります。
それぞれの役割は次のとおりです。
| ツール | 主な役割 |
|---|---|
| VS Code標準のGit機能 | 変更確認、ステージング、コミット、プッシュ、プルなど |
| GitLens | コミット履歴、行ごとの変更履歴、ブランチ比較など |
| SourceTree | Git操作をGUIで行う専用クライアント |
VS CodeとGitLensを組み合わせれば、エディタから離れずに変更確認や履歴調査ができます。
なお、GitLensはVS Codeの標準Git機能を置き換えるものではなく、機能を補完する拡張機能です。
参考：VS Code公式ドキュメント：Source Control
2. GitLensをインストールする
まずはVS CodeにGitLensを追加します。
インストール手順
- VS Codeを起動する
- 左側の拡張機能アイコンをクリックする
- 検索欄に「GitLens」と入力する
- GitKrakenが提供する「GitLens」をインストールする
拡張機能の詳細はこちらです。
GitLens — Visual Studio Marketplace
なお、VS CodeでGitを利用するには、PCにGit本体がインストールされている必要があります。Macであれば、ターミナルで次のコマンドを実行して確認できます。
git --versionバージョン番号が表示されれば、Gitコマンドを実行できる状態です。
Gitがインストールされていない場合は、Git公式サイトからインストールしてください。
3. VS Codeだけで変更ファイルを確認する
普段の開発で最もよく使うのが、変更ファイルの確認です。
変更内容を確認する
- Git管理しているプロジェクトをVS Codeで開く
- 左側の「ソース管理」アイコンをクリックする
- 変更されたファイルを確認する
- ファイルをクリックして差分を表示する
差分表示では、追加・変更・削除された箇所を確認できます。
例えば、WordPressのテーマを修正した場合、次のようなファイルが変更対象として表示されます。
functions.php
style.css
header.php
footer.php変更したファイルを一つずつ開けば、どこを修正したのかを確認できます。
AIコーディングツールなどで複数ファイルが変更された場合も、コミット前に差分を確認しておくと安心です。
4. ステージングとコミットもVS Codeで行う
Git管理では、変更したファイルをすべて一度に保存するのではなく、コミットに含める変更を選択できます。この操作を「ステージング」と呼びます。
基本的な手順
- ソース管理ビューで変更ファイルを確認する
- コミットしたいファイルの「＋」をクリックする
- ステージされた変更を確認する
- コミットメッセージを入力する
- 「コミット」を実行する
例えば、次のようなコミットメッセージを使います。
ヘッダーのレイアウトを修正お問い合わせフォームのバリデーションを追加スマートフォン表示の余白を調整コミットメッセージは、あとから履歴を見たときに何を変更したのか分かるように書くのがおすすめです。
注意点：コミットしただけでは、変更内容はGitHubなどのリモートリポジトリには送信されません。
リモートに反映するには、プッシュ操作が必要です。
5. プッシュ・プルもVS Codeでできる
GitHubなどのリモートリポジトリを利用している場合、VS Codeから同期操作もできます。
| 操作 | 意味 |
|---|---|
| Push | ローカルのコミットをリモートへ送信する |
| Pull | リモートの変更を取得してローカルに取り込む |
| Fetch | リモートの変更情報を取得する |
| Sync | 設定に応じて取得と送信を行う |
VS Codeのステータスバーやソース管理ビューから、これらの操作にアクセスできます。
ただし、複数人で開発している場合や、別のPCから同じリポジトリを更新している場合は、プッシュ前にリモートの変更を確認しておくと安全です。
また、サーバーへ直接FTPやSSHでファイルをアップロードする作業と、Gitのプッシュは別の操作です。GitHubにプッシュしただけで、本番サーバーのファイルが自動的に更新されるわけではありません。
6. GitLensでコミット履歴を確認する
SourceTreeを使っていた理由の一つが、コミット履歴をグラフで確認することではないでしょうか。
GitLensを使うと、ファイルやコードの変更履歴をVS Code内で確認できます。
GitLensでできること
- ファイルごとの変更履歴を確認する
- 特定の行を最後に変更したコミットを調べる
- 変更前後のコードを比較する
- ブランチやコミットを確認する
- コミット履歴をグラフで確認する
特に便利なのが、行ごとの変更履歴を確認する機能です。
例えば、以前からあるWordPressのテーマを修正するときに、「このコードはいつ、なぜ追加されたのか？」と疑問に思うことがあります。
GitLensのBlame機能を使えば、その行を最後に変更したコミットや作成者などを確認できます。カーソルを置いた行の末尾に、変更した人・日時・コミットメッセージが薄く表示されるので、エディタから離れずに確認できます。
過去の変更理由を調べたいときに役立ちます。
コミットグラフについて
GitLensにはCommit Graphという機能もあります。
コミットのつながりやブランチの関係を視覚的に確認できるため、ブランチを頻繁に使う開発でも便利です。
利用できる機能はGitLensのプランやリポジトリの種類によって異なります。公式の機能一覧によると（2026年9月時点）、Commit Graphは公開リポジトリやローカルのリポジトリなら無料版（GitLens Community）でアカウントなしに使える一方、GitHubなどでホストしている非公開リポジトリで使うにはGitLens Pro（有料）かトライアルが必要です。
必要な機能が無料プランで使えるかどうかは、公式の機能一覧で確認してください。
7. SourceTreeとVS Code＋GitLensを比較する
実際に使い分ける場合、次のような違いがあります。
| 比較項目 | SourceTree | VS Code＋GitLens |
|---|---|---|
| 変更ファイルの確認 | 得意 | 可能 |
| ステージング・コミット | 可能 | 可能 |
| プッシュ・プル | 可能 | 可能 |
| コードの編集 | 別のエディタが必要 | そのまま編集できる |
| コードと変更履歴の確認 | 主に専用画面で確認 | エディタ内で確認しやすい |
| ブランチやコミットの可視化 | GUIで確認できる | GitLensで確認できる |
| アプリの切り替え | 必要になる場合がある | 少なくできる |
SourceTreeにも、コミット履歴やブランチを視覚的に確認できるというメリットがあります。そのため、SourceTreeが不要というわけではありません。
ただ、普段からVS Codeを中心に作業しているなら、Git操作のために別アプリを起動する必要性は小さくなるかもしれません。
8. VS Codeだけで管理するときの注意点
SourceTreeを使わなくてもGit管理はできますが、いくつか注意したい点があります。
変更内容を確認してからコミットする
特にAIコーディングツールを利用している場合、意図していないファイルまで変更されていることがあります。
コミット前に差分を確認し、不要な変更が含まれていないかチェックしましょう。
.gitignoreを設定する
WordPressやWeb制作のプロジェクトでは、Gitに含める必要のないファイルがあります。例えば、環境固有の設定ファイルや一時ファイル、依存関係のフォルダなどです。
プロジェクトに応じて.gitignoreを設定し、不要なファイルを誤ってコミットしないようにしましょう。
ただし、除外するファイルはプロジェクトによって異なります。必要な設定ファイルまで除外しないように注意してください。
Gitの基本操作は理解しておく
VS Codeのボタンで操作できても、Gitの仕組み自体が変わるわけではありません。最低限、次の用語を理解しておくとトラブル時に対応しやすくなります。
- Repository：Gitで履歴を管理する場所
- Commit：変更内容を履歴として記録すること
- Branch：別の作業系列
- Merge：ブランチの変更を統合すること
- Push：リモートへコミットを送信すること
- Pull：リモートの変更を取得して取り込むこと
操作に迷った場合は、VS CodeのGUIだけに頼らず、ターミナルからGitコマンドを実行する方法も覚えておくと便利です。
まとめ
SourceTreeをやめてVS Code＋GitLensだけでGit管理することは十分可能です。
VS Codeの標準Git機能で変更確認、ステージング、コミット、プッシュなどを行い、GitLensで履歴やコードの変更箇所を確認する、という使い方ができます。
普段からVS Codeを中心にWeb制作やプログラミングをしているなら、作業環境を一つにまとめることで、アプリを切り替える手間を減らせるかもしれません。
一方、ブランチやコミット履歴を専用のGUIで確認する操作に慣れている場合は、SourceTreeを併用するのも選択肢です。
まずは個人の小さなプロジェクトでVS Code＋GitLensを試し、使い勝手を確認してから移行するのがおすすめです。