SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeのGit連携をさらに便利に! 拡張機能Git History、Git Graph、GitLensを解説

開発用エディタのド定番「VSCode」を使いこなそう 第8回

Git連携に便利な拡張機能

 このように、VSCodeではビルトインの拡張機能だけでもGit/GitHubを十分に活用できますが、他の拡張機能をインストールすることで、さらに便利に使いこなすことができます。ここでは、ダウンロード数の多い人気の拡張機能を3つ選んで紹介します。

Git History

 Don JayamanneによるGit Historyは、Gitのログ、ファイルの履歴、ブランチの比較などの閲覧や操作を視覚的に行える拡張機能です(図9)。

図9:Git History
図9:Git History

 Git Historyをインストールすると、ソース管理ビューに[Git: View History (git log)]アイコンが追加されます。それをクリックすることでエディタグループで「Git History」タブが開き、そこにコミットやブランチの履歴を示すグラフが描画されます(図10)。表示の順番は降順で、mainブランチから枝分かれしているブランチの様子などが視覚的に表示される他、作業者の名前や実行日時、各種の処理を行うためのリンクが設置されています。上部にはフィルタのボタンがあるので、検索、ブランチ、作業者で絞り込むことができます。

図10:Git Historyによる履歴の表示
図10:Git Historyによる履歴の表示

 各履歴の右側にあるリンクは、履歴ハッシュのコピー、コミットのソフトリセットとハードリセット、タグの作成、ブランチの作成、チェリーピック(別ブランチの特定のコミットのみ取り込むこと)などその他のコマンド、となっています。各行をクリックすると、その操作についての詳細が表示されます(図11)。

図11:Git Historyによる履歴の詳細表示
図11:Git Historyによる履歴の詳細表示

 詳細から、ファイルの内容を確認したり(View)、現在のワークスペース内の内容を比較したり(Compare)、直前のコミットにおける内容と比較したり(Previous)、ファイルの履歴を確認したり(History)できます。

Git Graph

 mhutchieによるGit Graphも、Git History同様にGitのログ、ファイルの履歴、ブランチの比較などの閲覧や操作を視覚的に行える拡張機能です(図12)。

図12:Git Graph
図12:Git Graph

 Git Graphをインストールすると、ソース管理ビューに[View Git Graph (git log)]アイコンが追加されます。それをクリックすることでエディタグループに「Git Graph」タブが開き、そこにコミットやブランチの履歴を示すグラフが描画されます(図13)。上部にある[Branches]でブランチをフィルタしたり、[Show Remote Branches]でリモートリポジトリ側のブランチの表示の有無を切り替えたりできます。検索、リポジトリでのターミナルのオープン、リポジトリの設定変更、リモートリポジトリからのフェッチもここで行うことができます。

図13:Git Graphによる履歴の表示
図13:Git Graphによる履歴の表示

 各行をクリックすると、その操作についての詳細が展開されます(図14)。

図14:Git Graphによる履歴の詳細表示
図14:Git Graphによる履歴の詳細表示

GitLens

 GitKrakenによるGiLensは、Git連携の視覚化をはじめとした多機能な拡張機能です(図15)。コードの記述者やコミットの実行者をエディタグループで視覚的に表示できるようにするほか、コミットやブランチなどの状態の一覧表示や、そこからさまざまな操作を実行できます。特に前者は、単独でGitを利用しているときにはあまり恩恵のない機能ですが、複数の開発者で作業している場合には非常に有用です。

 GitLensには、有償のPro、Teams、Enterprise版と無料のFree版があり、Free版ではいくつかの機能が制限されています。GitKrakenアカウントを登録して拡張機能にログインすることで、全機能を利用できる7日間のトライアル期間を利用することもできます(ただし実際にはGitLensをインストールした時点で自動的にPro版のトライアルが開始されているようです)。

 GitLensの多くの機能の中から、いくつかの機能を抜粋して紹介します。なお、解説用のリポジトリとしてGitLensの配布リポジトリをローカルにクローンして使用しています。

図15:GitLens
図15:GitLens

BlameとCodeLens

 GitLensをはじめてインストールすると、「Welcome to GitLens」というウエルカム画面がエディタグループに表示されます(図16。この画面は後述するGITLENSビューの[Welcome]項目からも表示できます)。ここには、GitLensの紹介と簡単な機能設定が含まれています(細かな設定は、後述するGITLENSビューの[GitLens Settings]から実行できます)。「Powerful Features」欄にある[Inline Blame]と[Git CodeLens]で、Current Line BlameとGit CodeLensの利用有無を切り替えられます。

図16:GitLensのウエルカム画面
図16:GitLensのウエルカム画面

 [Inline Blame]は、Current Line Blameの利用有無の切り替えです。Current Line Blameは、git blameコマンドで表示されるようにコードの記述者をインラインで表示する機能です(図17)。ちなみにblameとは「咎める」という意味であり、「このコード書いたの誰!?」みたいなときに使います。

 [Git CodeLens]は、Git CodeLensの利用有無の切り替えです。Git CodeLensは、CodeLens(IDEで使われる、コードブロック先頭に参照数や変更履歴などを表示する機能)のGit版です(図17)。最近の変更や作業者の名前などが表示されます。

図17:Current Line BlameとGit CodeLens
図17:Current Line BlameとGit CodeLens

 これらの機能だけでも便利ですが、VSCode標準のGit連携を上回る機能が用意されています。これらの概要を以降で紹介します。

GITLENSビュー

 GitLensのインストールによって、アクティビティバーに2つのアイコン[GitLens]と[GitLens Inspect]が追加されます。このうち[GitLens]アイコンをクリックすると、プライマリサイドバーがGITLENSビューに切り替わります(図18)。GITLENSビューは、GitLensの管制塔的な位置付けで、多くの機能にここからアクセスできます。GITLENSビューには、「HOME」「GITKRAKEN WORKSPACES」「GITKRAKEN ACCOUNT」の3つのセクションがありますが、常用するのは「HOME」セクションで、以下のカテゴライズされた項目があります。

  • POPULAR VIEWS(よく使うビューへのアクセス。Commit Graph、Commit Details、Commits、Focus、File History、Visual File History、Stashes、Search and Compare、GitKraken Workspaces、Worktrees)
  • ACTIVITY BAR(アクティビティバーへのアクセス。GitLens、GitLens Inspect、Source Control)
  • COMMANDS(コマンド操作。Commands、Git Command Palette)
  • CONFIGURATION(設定。GitLens Settings、AutoLink Settings)
  • GETTING STARTED(入門。Welcome、Feature Walkthrough、Tutorial Video)
図18:GITLENSビュー
図18:GITLENSビュー

 なお、各機能に付いているは、それぞれ有償版の機能、アカウント登録とサインインが必要な機能の印です。他のビューにある主な項目については、引き続き紹介します。

ソース管理ビュー

 前回から紹介しているソース管理ビューには、ソース管理セクションが新たに追加され、さらに以下のセクションが追加されます(図19)。

  • COMMITS(コミットの履歴)
  • BRANCHES(ブランチの状態)
  • REMOTES(リモートリポジトリの状態)
  • STASHES(スタッシュの状態)
  • TAGS(タグの状態)
  • WORKTREES(作業ツリーの状態)
  • CONTRIBUTORS(コントリビュータの状態)
図19:GitLensインストール後のソース管理ビュー
図19:GitLensインストール後のソース管理ビュー

 COMMITSセクションには、現在のブランチのコミットの履歴が表示されます(図20)。個々のコミットをクリックすると、その詳細を表示できます。ファイルを開いて差分を確認することもできます。

図20:GitLensのCOMMITSセクション
図20:GitLensのCOMMITSセクション

 BRANCHESセクションには、全てのローカルブランチの一覧が表示されます(図21)。現在のブランチには右端にチェックマーク(✓)が表示されます。図21には該当箇所はないですが、プルされていない変更がある場合には赤い●が、プッシュされていない変更がある場合には緑色の●がブランチアイコンに表示されます。ブランチ名で右クリックして、メニューからブランチの切り替えなどのさまざまな操作が可能です。

図21:GitLensのBRANCHESセクション
図21:GitLensのBRANCHESセクション

 REMOTESセクションには、リモートリポジトリの状態が表示されます(図22)。リポジトリやブランチを右クリックして、フェッチやプルーンを実行できます。リモートリポジトリを作成することもできます。

図22:GitLensのREMOTESセクション
図22:GitLensのREMOTESセクション

[NOTE]スタッシュ

 スタッシュ(stash)とは、「隠す」とかいった意味で、コミットしていない変更を待避することです。変更が中途半端な状態で別の作業を行いたいとき、中途半端な変更をいったん待避し、作業が済んだところで復帰させるといったことが可能になります。スタッシュは、git stash -uコマンドで実行します。-uオプションを付加することで、Untrackedなファイルも待避の対象にできます。

GITLENS INSPECTビュー

 アクティビティバーの[GitLens Inspect]アイコンをクリックすると、プライマリサイドバーがGITLENS INSPECTビューに切り替わります(図23)。GITLENS INSPECTビューでは、inspectの名の通り、現在の作業状況についてより詳細な情報を提供します。GITLENSビューで得られる情報より、さらに掘り下げた情報が欲しいという場合に使います。GITLENS INSPECTビューでは以下のセクションが提供されます。

  • Commit Details(コミットの詳細)
  • Line History(行の履歴)
  • File History(ファイルの履歴)
  • Visual File History(より視覚的なファイルの履歴)
  • Search & Compare(コミットの検索、ブランチやタグの比較)
図23:GITLENS INSPECTビュー
図23:GITLENS INSPECTビュー

次のページ
GitHub Codespaces

この記事は参考になりましたか?

開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/18695 2023/12/07 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー