【VScode】Git HistoryからGit Graphに乗り換え!利点や使い方を徹底解説!

こんにちは、フロントエンドエンジニアの「てりー」です。
僕の詳しいプロフィールはこちら

独学でフロントエンドエンジニアを目指している人へ

フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました!!
興味ある方は是非ご覧ください。

関連記事

プログラミング完全初心者何から勉強すれば良いか分からない。具体的にやることを教えて欲しい。 こういった疑問に答えて、フロントエンドエンジニアになる為の具体的な勉強プランについて解説しています[…]

はじめに

VScodeでcommit毎の差分を確認する拡張機能として長らく「Git History」を使って来ました。
しかしUIの見やすさ、使いやすさを考慮して「Git Graph」に乗り換えたので、その経緯や「Git History」と「Git Graph」の比較についてまとめていきます。

・Git HistoryとGit Graphの機能や使いやすさの比較
・GIt Graphの使い方

Git Graphが気になる方はぜひ最後までご覧下さい。

VScodeにGitの拡張機能を入れるとGUIでcommitの流れが確認出来る

gitは基本的にはターミナルで操作する為、commitログはターミナルで「git log」と打って確認すると思います。

開発ブランチと本番ブランチなど複数のブランチがあると一目で開発の流れが追いにくいですよね。

その場合にGit HistoryやGit Graphを使うとグラフィカルに流れが把握できます。
これはGit Graphの場合です。

ターミナルで見るよりも断然分かりやすいですよね!

Git操作は間違えると修正するのに苦労するのでGUIを使って視覚的に全体像を把握する事をお勧めします!

Git History VS Git Graph

 次にGit Graph と Git History のそれぞれの特徴を再確認し、比較していきます。

Git History

この記事ではGit Historyの特徴に焦点を当てて解説していきます。

Git Historyの導入方法や使い方などの詳しい情報はこちらの記事に記載してあります。

関連記事

・Git Historyを使って出来る事・Git Historyの使い方こんにちは、フロントエンドエンジニアの「てりー」です。僕の詳しいプロフィールはこちらReactを仕事で使いこなしたい人、Reactの知識に不安がある人に向け[…]

VScode のソース管理の時計のアイコンをクリックで開ける

パッと見の UI はこんな感じ

左端にリポジトリツリーが表示され、右の方に細かいデータが表示されています。
Git History はファイルで右クリックから「Git:View File History」をクリックで、ファイル毎のコミット履歴も確認できる。

同じ手法で行単位でのコミット履歴の閲覧も可能。

コミット単位で見た時の UI はこんな感じ

  • 差分の確認方法が「プロジェクト全体」、「ワークスペース」、「直前のコミットと比較」などたくさんある
  • ファイル単位で差分を遡れる
  • 検索機能がある為、プロジェクトが複雑になっていくほど重宝する作り(な気がする)
  • 色々な選択が出来る分、慣れるまでは使いにくい

Git Graph

VScode のソースコード管理のツリー状のアイコンから遷移可能。

パッと見の UI はこんな感じ

コミット単位の UI

  • UI がシンプルで必要な情報が分かりやすい印象
  • cherry pick や add tag など自分がよく使うコマンド操作が簡単に出来て分かりやすい
  • Author、Date、Commit が最初からカラムに区切られていて、検索しやすい

Git GraphとGit Historyを比較した印象

Git HistoryとGit Graphのそれぞれの特徴を確認したところで、2つを使い比べてみた自分の印象をまとめます。

  • やれる事はどっちもほとんど一緒
  • Git History は情報量が多く、使いこなすまでは圧倒されるかも。。その点、Git Graph は直感的で分かりやすい UI になっている
  • Git Historyのファイル単位で、そのファイルのコミット履歴を遡れる点はGit Graphにはない魅力

要するに見やすくスッキリの「Git Graph」、なんでも出来る「Git History」という構図です。

自分は「コミット履歴を一覧で確認したい!」といった理由で使うパターンが多いので、スッキリ見やすい点を重視して、「Git Graph」を採用しました。

Git Graph の導入方法と使い方

ここからはGit Graphの導入方法や使い方を解説していきます。

導入方法

導入方法は他の拡張機能と同じで簡単です!

1. VScodeの拡張機能から「git graph」で検索して、Git Graphの拡張機能を開く

2.インストールを押す

これでGit Graphが使えます!

Git Graphの使い方

Git Graphの開き方

サイドバーのソース管理を開いて、そこから画像のアイコンをクリックするとGit Graphが開かれます!

リポジトリーツリーを確認

Git Graphのトップページはリポジトリーツリーが表示されます。
ここでコミットやマージの履歴の流れが一目で確認できます。

また、上の Branches から他のブランチを選択すれば、特定のブランチを中心とした履歴が見れます。

コミットを表示

リポジトリーツリーからコミットをクリックすると詳細が表示されます。

左側にコミットのデータ。
右側にファイル毎の差分が表示されます。

右側の検索っぽいアイコンで変更ファイルを太字にするレビューモードに出来ます。
レビューモードではファイル名が太字表示になり、ファイルの差分を見終わった物は太字がなくなるので、レビュー中にどのファイルが確認済か一目瞭然になります。

Git操作が手軽に出来る

特定のcommitに対して右クリックをすると以下の選択肢が出てきます。
その中でも自分がよく使う「checkout」、「cherry-pick」、「revert」が手軽に出来る点が魅力的です!

checkout

コミットを右クリック「cherckout branch」でそのブランチにチェックアウト出来ます。
現在いるブランチの右には丸が付いているので、視覚的にも確認しやすいです。

cherry-pick 

コミットを右クリック「cherry-pick」でそのブランチをチェリーピック出来ます。
cherry-pickは他のブランチのコミットをこっちのブランチに持ってこれるコマンドです。

別ブランチで作ってまだマージされていないこの機能をこっちのブランチでも実現したい!みたいな時に役立ちます。

revert 

コミットを右クリック「cherry pick」でそのブランチをリバート出来ます。
リバートは対象のコミットを取り消すコマンド。

まとめ

Git Graphを使う事で、Git Flowを視覚的に把握する事が出来るので、ぜひ皆さんも活用してみて下さい!

また、プログラミング経験が浅いうちはGitでの作業は常にハラハラするし、失敗もつきものだと思います。

作業ブランチ間違えて作業しちゃった!

いらない追跡対象外のファイルがなぜかたくさんあって、このままだとcommitできねえー!!

プルリクを送る先を間違えたーー!

みたいな事、経験した人も多いかと思います。

Git操作に慣れてないうちのあるあるに対しての対処法をまとめているので、興味ある方はぜひご覧下さい。

Qiita

こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこちらまた、未経験から独学でフロントエンドエン…

関連記事

「転職ドラフトはハイスペックなエンジニア向けだけ?」と思っていませんか?実は、技術力に自信がない、あるいは業界経験が浅いエンジニアこそ、転職ドラフトを使うべきなんです。そういったエンジニアの多くは転職ドラフトに登録する際、レジュ[…]