こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
Git Graphに乗り換えました!
VScodeでcommit毎の差分を確認する拡張機能として長らく「Git History」を使って来ました。
しかしUIの見やすさ、使いやすさを考慮して「Git Graph」に乗り換えたので、その経緯や「Git History」と「Git Graph」の比較についてまとめていきます。
・GIt Graphの使い方
Git Graphが気になる方はぜひ最後までご覧下さい。
VScodeにGit Graphを入れるとグラフィカルに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+TypeScriptの教材を作りました!! 2024年4月にnoteで一番読まれた記事[…]
VScode のソース管理の時計のアイコンをクリックで開ける
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
パッと見の UI はこんな感じ
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
左端にリポジトリツリーが表示され、右の方に細かいデータが表示されています。
Git History はファイルで右クリックから「Git:View File History」をクリックで、ファイル毎のコミット履歴も確認できる。
同じ手法で行単位でのコミット履歴の閲覧も可能。
コミット単位で見た時の UI はこんな感じ
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
- 差分の確認方法が「プロジェクト全体」、「ワークスペース」、「直前のコミットと比較」などたくさんある
- ファイル単位で差分を遡れる
- 検索機能がある為、プロジェクトが複雑になっていくほど重宝する作り(な気がする)
- 色々な選択が出来る分、慣れるまでは使いにくい
Git Graph
View a Git Graph of your repository in Visual Studio Code, a…
VScode のソースコード管理のツリー状のアイコンから遷移可能。
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
パッと見の UI はこんな感じ
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
コミット単位の UI
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
- 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が開かれます!
リポジトリーツリーを確認
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
Git Graphのトップページはリポジトリーツリーが表示されます。
ここでコミットやマージの履歴の流れが一目で確認できます。
また、上の Branches から他のブランチを選択すれば、特定のブランチを中心とした履歴が見れます。
コミットを表示
リポジトリーツリーからコミットをクリックすると詳細が表示されます。
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
左側にコミットのデータ。
右側にファイル毎の差分が表示されます。
右側の検索っぽいアイコンで変更ファイルを太字にするレビューモードに出来ます。
レビューモードではファイル名が太字表示になり、ファイルの差分を見終わった物は太字がなくなるので、レビュー中にどのファイルが確認済か一目瞭然になります。
![](https://terrblog.com/wp-content/themes/the-thor/img/dummy.gif)
Git操作が手軽に出来る
特定のcommitに対して右クリックをすると以下の選択肢が出てきます。
その中でも自分がよく使う「checkout」、「cherry-pick」、「revert」が手軽に出来る点が魅力的です!
rebaseでコミットをまとめる
rebaseでPRを作る前にコミットをまとめるのも簡単です!
checkout
コミットを右クリック「cherckout branch」でそのブランチにチェックアウト出来ます。
現在いるブランチの右には丸が付いているので、視覚的にも確認しやすいです。
cherry-pick
コミットを右クリック「cherry-pick」でそのブランチをチェリーピック出来ます。
cherry-pickは他のブランチのコミットをこっちのブランチに持ってこれるコマンドです。
別ブランチで作ってまだマージされていないこの機能をこっちのブランチでも実現したい!みたいな時に役立ちます。
revert
コミットを右クリック「cherry pick」でそのブランチをリバート出来ます。
リバートは対象のコミットを取り消すコマンド。
まとめ
Git Graphを使う事で、Git Flowを視覚的に把握する事が出来るので、ぜひ皆さんも活用してみて下さい!
Gitの操作にまだ慣れていない人はこちらの記事も参考に!
こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこちらはじめにGitって難しいですよね。本当に…
また、未経験の場合、Gitに慣れるには現場に飛び込むのが一番早いです!
・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう ・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介 こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこち[…]
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]
未経験者におすすめの転職エージェント:未経験のITエンジニア転職におすすめの転職エージェント・転職先
経験者の場合の副業先:フルリモート週2~3日からでも副業が出来るエージェント紹介
好条件の正社員転職:【転職ドラフト指名の画像アリ】2年目で600万の指名を獲得した僕が考える技術自信ナシでも転職ドラフトを使った方が良い理由