Git History 拡張機能を使えば、1クリックで過去の変更履歴が確認できます。この記事を読めば、作業効率が劇的にアップします！
✅ Git History拡張機能の便利な使い方
✅ 作業効率を劇的に向上させるテクニック
こんにちは、フロントエンドエンジニアのてりーです。
React + TypeScriptを5年以上使い続け、派遣 → フリーランス → メガベンチャーとキャリアを積んできました。
詳しいキャリアや学習ロードマップについてはこちらからどうぞ！
👉 本記事ではVSCodeの拡張機能であるGit Historyに焦点を当てて解説します！
Git historyとは？
Git History は、VSCodeのGit履歴確認をGUIで直感的に行える拡張機能です。
Git History公式サイト
公式サイトを読むと、以下の事が出来ると書いてあります！！
- コミット履歴をGUIで表示
- 特定ファイルの変更履歴を確認
- 変更を視覚的に比較・確認
- 過去の状態に簡単に戻す
Git運用に慣れていない方は、よくあるパターンとその対処法を事前に把握しておきましょう。
👉 Gitに慣れていない人がよくハマるパターンと対処法まとめ
コミット履歴をGUIで見れると快適！
gitは基本的にはターミナルで操作する為、commitログはターミナルで「git log」と打って確認すると思います。
開発ブランチと本番ブランチなど複数のブランチがあると一目で開発の流れが追いにくいですよね。
その場合にGit Historyを使うとグラフィカルに流れが把握できます。
GUIでcommitログを確認出来ると、ブランチの流れを把握しやすいです！
例えば、mainブランチから新規ブランチを切る際に、どの変更がどのタイミングでmainブランチにマージされたかをパッと確認する事が出来ます💪
Git Historyのインストール方法
- VSCodeの拡張機能で「Git History」で検索する
- インストールしてVScode内で有効化する
これだけでGit Historyが使えるようになってます！
インストール後は「有効可」も忘れずに！
これで準備完了です💪
インストールが完了したら、次はGitで細かい差分を効率的に管理する方法もチェックしてみましょう。
👉 Gitで差分を1行単位でcommitする方法
Git Historyの使い方
次にGit Historyの使い方を見ていきましょう！
大まかな流れは
- ファイルを右クリック→「Git:View File History」を選択
- 変更履歴から確認したいcommitを選ぶ
- 差分を確認する
です。
1. VScode上で変更履歴を見たいファイルを右クリック→「Git:View File History」を選択
2. 変更履歴から確認したいcommitを選ぶ
Git:View File Historyをクリックすると、Git Historyのタブが表示されます。
差分を見たいcommitを選んで差分を確認しましょう。
上のタブの部分を使えばブランチ、作成者での絞り込みもできます。
3. commit差分を見る
差分を見ていきます！デフォルトではそのcommitでの差分を表示しています。
「compeir ~~ workspace」を選択すると現状のワークスペースとの差分を確認出来ます！
チームでGit運用を行う場合、プルリクエストの作成は重要なポイントです。
失敗しないためのチェックリストも確認しておきましょう。
👉 初心者がチーム開発で周りに迷惑かけない為のプルリクエストまでのチェックリスト
よくあるエラーと対処法
Git History拡張機能を使っていると、いくつかのエラーや不具合に遭遇することがあります。
ここでは、よくあるエラーとその対処法を紹介します。
① 履歴が表示されない
❓ 原因
- リポジトリが正しく読み込まれていない
- ワークスペースがGitリポジトリとして初期化されていない
- VSCodeがリポジトリの最新状態を認識していない
🛠️ 対処法
- VSCodeを再起動
- VSCodeを完全に閉じて再度開き、リポジトリが正しく読み込まれるか確認
- Gitリポジトリの確認
- ターミナルで以下のコマンドを実行
-
git status
-
- リポジトリとして認識されていない場合は、以下のコマンドで初期化
-
git init
-
- ターミナルで以下のコマンドを実行
- フォルダ単位で開き直す
- Git管理されているフォルダをVSCodeで直接開き直す
- 拡張機能の再インストール
- Git History拡張機能を一度アンインストールして、再インストール
② コミットが見つからない
❓ 原因
- 現在のブランチが正しく選択されていない
- ローカルリポジトリとリモートリポジトリの状態が一致していない
- 過去の特定コミットが消失している
🛠️ 対処法
- ブランチを確認
- 現在のブランチが正しいか確認
-
git branch
-
- 別のブランチに切り替える
-
git checkout [ブランチ名]
-
- 現在のブランチが正しいか確認
- リモートリポジトリと同期
- 最新の状態を取得
-
git fetch --all git pull
-
- 最新の状態を取得
- Git Historyのフィルタリング設定を確認
- Git Historyタブで「All Branches」が選択されていることを確認
- VSCodeを再起動
- VSCodeを再起動し、Git History拡張機能を再読み込み
③ 差分が正しく表示されない
❓ 原因
- Git History拡張機能のキャッシュが破損している
- ファイルパスが変更されている
🛠️ 対処法
- キャッシュをクリア
- VSCodeのキャッシュをクリアして再起動
- 特定のコミットで比較
- Git Historyタブで「Compare with Workspace」を選択し、明示的に比較
- ファイルパスの確認
- ファイルがリネームされていないか確認
Git Historyをさらに活用するTIPS
Git Historyをさらに便利に使いこなすためのTIPS（小技）を紹介します。
これを知っていれば、日々の作業効率が飛躍的に向上します！
① ショートカットキーを活用
VSCode Git History には便利なショートカットキーが用意されています。覚えておくと、操作がよりスムーズになります。
| 操作 | ショートカット |
|---|---|
| Git履歴を開く | Ctrl+Alt+H |
| 変更を比較する | Ctrl+Alt+C |
| 特定のコミットに移動 | Ctrl+Alt+G |
🛠️ 活用のポイント
Ctrl+Alt+Hですぐに履歴画面を開くCtrl+Alt+Cで過去の状態と差分を即座に比較
② VSCode Git Graphと併用
Git History は単体でも強力ですが、Git Graph という拡張機能と組み合わせると、より直感的に履歴管理ができます。
📝 Git Graphとは？
- Gitブランチとコミット履歴をグラフ形式で可視化
- ブランチの流れやマージの履歴が一目瞭然
💡 併用の流れ
- Git History で個別のファイル履歴や差分を確認
- Git Graph で全体の履歴の流れを俯瞰して把握
③ 特定のファイル履歴を絞り込む
特定のファイルだけの履歴を確認することで、履歴を効率よく管理できます。
🛠️ 操作手順
- 右クリック →「Git: View File History」 を選択
- 履歴を絞り込む（ブランチ、作成者、期間でフィルタリング）
- 特定のコミットを比較して差分を確認
まとめ
この記事では、VSCodeの拡張機能「Git History」を使った変更履歴の確認方法について説明しました。
次はエンジニアとしてのキャリアアップを目指しませんか？
👉 未経験の僕がメガベンチャーエンジニアになった軌跡
👉 エンジニア転職で年収アップを実現
Git関連の記事
👉Gitに慣れていない人がよくハマるパターンと対処法まとめ
👉 Gitで差分を1行単位でcommitする方法
👉 VSCode Git Graph完全ガイド｜初心者向け履歴管理とブランチ操作
👉 初心者がチーム開発で周りに迷惑かけない為のプルリクエストまでのチェックリスト
人気記事
👉【2024年】未経験から即戦力へ！React+TypeScriptの学習ロードマップ
👉【転職ドラフト指名の画像アリ】2年目で600万の指名を獲得した僕が考える技術自信ナシでも転職ドラフトを使った方が良い理由
👉フルリモート週2~3日からでも副業が出来るエージェント紹介