【VSCode】ソースコードのGit履歴を確認する方法

【VSCode】ソースコードのGit履歴を確認する方法

Amazonのアソシエイトとして、ITナレッジライフは適格販売により収入を得ています。

記事の文字数:2,225 / 総アクセス数:1,624 views

本記事では、Visual Studio CodeでGit履歴を効率的に確認する方法を解説します。拡張機能「Git History」を用いた、使い方・履歴確認手順を詳しく紹介。VSCodeを使ったGit履歴操作をマスターしましょう。

Visual Studio Code(VSCode)は、コードエディタとしてだけでなく、Gitを利用したバージョン管理のクライアントとしても非常に人気があります。特に「誰がいつどのような変更を行ったのか」を把握できる履歴確認や、過去の状態との比較機能は、チーム開発や個人のプロジェクト管理において欠かせません。

本記事では 「vscode git 履歴」 をテーマに、基本的な履歴確認方法をGit History の拡張機能に焦点を当てて、使い方を解説します。

VSCodeでGitを使う準備

VSCodeにはGitの基本的な操作機能が標準で搭載されています。ただし、PCにGit本体がインストールされていなければ利用できないため、まず環境を整える必要があります。

  • Gitのインストール確認

    ターミナルやコマンドプロンプトで以下を実行します。

    Terminal window
    git --version

    バージョンが表示されればインストール済みです。未インストールの場合は、公式サイトからダウンロードしてインストールしてください。

  • ユーザー情報の設定(初回のみ推奨)

    Git Bashで以下設定を入れておきます。

    Terminal window
    git config --global user.name "あなたの名前"
    git config --global user.email "あなたのメールアドレス"

    履歴に誰がコミットしたかが記録されるため、必ず設定しておきましょう。

  • VSCodeのGit統合

    VSCodeを開くだけで、自動的に現在のプロジェクトがGitリポジトリかどうかを検出し、ソース管理ビューに反映してくれます。

確認した環境

  • Windows 11 Home 24H2
  • Git
    • git version 2.47.0.windows.2
  • VSCode
バージョン: 1.103.2 (user setup)
コミット: 6f17636121051a53c88d3e605c491d22af2ba755
日付: 2025-08-20T16:45:34.255Z
Electron: 37.2.3
ElectronBuildId: 12035395
Chromium: 138.0.7204.100
Node.js: 22.17.0
V8: 13.8.500258-electron.0
OS: Windows_NT x64 10.0.26100
  • Git History 0.6.20
  • 確認したGitプロジェクト
    • nux-blogプロジェクトを利用させていただきました。

VSCodeでGit履歴を確認する

拡張機能「Git History」のインストール

VSCodeを起動し、「拡張機能(Ctrl+Shift+X)」を選択します。

alt text

Git Historyで拡張機能を検索し、インストールを押下します。

alt text

インストールが完了するのを待ちます。以下のようにインストール→歯車マークが表示されればOKです。

alt text

Gitプロジェクトを開く

Gitのプロジェクトを開きます。(※既に開いている場合は本手順をSKIPしてください)
「エクスプローラー(Ctrl+Sfhit+E)」から「フォルダーを開く」を押下します。

alt text

対象のプロジェクトのパスを指定し、「フォルダーの選択」を押下します。

alt text

エクスプローラーにGitプロジェクトが表示されることを確認します。

alt text

Git Historyでソースコードの履歴を確認する

Ctrl + Shift + Pでコマンドパレットを開き、「git View History」で検索します。 「Git: View History(git log)」を選択し、Enterキーを押下します。

alt text

コミット履歴の一覧が表示されます。履歴を選択すると修正したソースコードの一覧が表示されます。さらに確認したいソースコードのPreviousを押下することで修正箇所を確認することができます。

alt text

Previousを選択することで、修正箇所(左:修正前、右:修正後)を確認することができました。

alt text

Git Historyで特定ファイルの履歴を確認する

特定ファイルのコミット履歴を確認したい場合の手順を紹介します。
まず確認したいファイルを開きます。

alt text

Ctrl + Shift + Pでコマンドパレットを開き、「git View File History」で検索します。 「Git: View File History」を選択し、Enterキーを押下します。

alt text

キャプチャではcard.vueファイルのコミット履歴が表示されました。

alt text

確認したいコミット履歴を選択し、複数ファイルが出てくる場合は、Find fileの検索窓にファイル名を指定し、絞り込みます。Previousを押下することで修正箇所を確認することができます。

alt text

Previousを選択することで、修正箇所を確認することができました。

alt text

実務で役立つ履歴活用のポイント

  • コードレビュー前の確認: プルリクエスト前に、自分のコミット履歴を見直して不要な変更や誤字を修正。
  • バグ調査: どのコミットでバグが入り込んだかを特定する際に履歴は必須。
  • 知識共有: 誰がどの部分を編集したかを追跡できるので、開発者同士の情報共有に役立ちます。
  • ドキュメント代わり: 適切なコミットメッセージと履歴があれば、開発の流れを振り返るドキュメントにもなります。

関連操作
Git Historyで履歴を確認する前提として、日々の addcommitpush といった基本操作が行われている必要があります。VSCode上でのGitの基本操作については以下の記事を参考にしてください。

【VSCode】Gitのadd・commit・pushを簡単に行う方法
ITナレッジライフ

【VSCode】Gitのadd・commit・pushを簡単に行う方法

VSCodeでGitのadd・commit・pushを行う方法を初心者向けに解説。環境構築から基本操作、よくあるトラブルまでわかりやすくまとめています。

VSCodeのGit履歴確認まとめ

Git Historyは、履歴の確認に特化した拡張機能です。

  • コミットログ一覧: 過去のコミットを一覧で表示し、メッセージや変更者を素早く確認可能。
  • 差分確認: 選択したコミットでの変更点をすぐに比較できます。

VSCodeでGitを効率的に使いこなすには拡張機能の導入がおすすめです。GitHistory を導入することで、詳細な履歴や差分を素早く確認できるため、日常的な開発作業の生産性を大きく向上させます。

VSCodeでのGit履歴確認をマスターすれば、チーム開発でも個人開発でも、変更管理がスムーズになり、トラブルシューティングやレビューの質も向上するでしょう。ぜひ一度試して、開発ワークフローに取り入れてみてください。

VSCode学習者にお勧めの本

おすすめ

これ1冊でできる!Visual Studio Code 超入門

難易度
実用性
読みやすさ

インストールから基本機能まで完璧にサポート。エディタ選びに迷っている人にもおすすめです。

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り

難易度
実用性
効率化

拡張機能の選定やカスタマイズが非常に参考になる。開発効率を最大化できます。

Visual Studio Codeパーフェクトマスター

難易度
実用性
辞書度

辞書代わりに使えるほど詳細。困った時に必ず解決策が見つかる、頼りになる一冊です。

Gitユーザにお勧めの本

初心者向け

いちばんやさしいGit&GitHubの教本 第3版 人気講師が教えるバージョン管理&共有入門 「いちばんやさしい教本」シリーズ

難易度
実用性
読みやすさ

とにかく挫折しない丁寧な解説。チーム開発での基本的な流れを確実にマスターできます。

改訂2版 わかばちゃんと学ぶ Git使い方入門

難易度
実用性
読みやすさ

漫画形式で視覚的にイメージしやすい。Git特有の難しい用語も、物語を通して自然に理解できます。

独習Git

難易度
実用性
読みやすさ

コマンドの裏側で何が起きているかを丁寧に解説。プロとしてGitを使いこなすためのバイブルです。


以上で本記事の解説を終わります。
よいITライフを!

VSCode学習者にお勧めの本

おすすめ

これ1冊でできる!Visual Studio Code 超入門

難易度
実用性
読みやすさ

インストールから基本機能まで完璧にサポート。エディタ選びに迷っている人にもおすすめです。

人気記事


記事を評価

Thanks!
目次
Scroll to Top