こんにちは。
プロジェクトのソース管理など、Gitを使うことは多いかと思います。
皆さんはどのようにGit操作を行っていますか?
今回は、VSCodeの拡張機能を使ってGit操作を簡単にする方法をご紹介したいと思います。Gitコマンドをいちいち覚えたり、調べるのめんどくさいなぁ…という方は、ぜひ活用してみてください!
そもそも・・・
VSCodeではデフォルト状態でも、結構GUIでGit操作できるようになっているので、ご紹介します。
差分確認
![スクリーンショット 2024-03-11 192731](https://blog.future.ad.jp/hs-fs/hubfs/n.minami/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-03-11%20192731.png?width=1262&height=373&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-03-11%20192731.png)
commit
![タイトルなし3](https://blog.future.ad.jp/hs-fs/hubfs/n.minami/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%973.png?width=962&height=324&name=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%973.png)
その他いろいろ
![タイトルなし2](https://blog.future.ad.jp/hs-fs/hubfs/n.minami/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%972.png?width=590&height=566&name=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%972.png)
こんな感じで大体の操作はコマンド操作しなくてもGUIで操作できるようになっているので、使いやすいですね。
GitLens
まず紹介するのは、GitLensという拡張機能です。便利な機能をいくつか紹介していきます。
最後の編集者が分かる
![タイトルなし4](https://blog.future.ad.jp/hs-fs/hubfs/n.minami/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%974.png?width=698&height=266&name=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%974.png)
このように誰がどのくらい前にcommitしたのか(commitしてない場合は最後にいつ保存したか)が分かるようになっています。
ここのソースよく分からないから質問したいけど、GitHub等から修正した人を特定するの面倒くさいなぁ・・・というときなどに便利です。
コミットした内容が見れる
![タイトルなし5](https://blog.future.ad.jp/hs-fs/hubfs/n.minami/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%975.png?width=1464&height=586&name=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%975.png)
赤枠のコミット一覧から差分ファイルを選ぶことで、青枠のところにコミット時の差分が表示されます。過去のコミット内容を確認したいときはもちろんですが、ここからコミット取り消しできたり等、非常に便利です!
その他
そのほか、Stashした内容を確認したり、branchとの差分比較したり、便利な機能がいろいろ付いています。
非常に便利なので、ぜひ使ってみてください!
Git Graph
Git Graphというツールでは、Gitの作業ツリーを確認することができます。
赤矢印の箇所を押すと、ツリーが表示されます。
![タイトルなし6](https://blog.future.ad.jp/hs-fs/hubfs/n.minami/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%976.png?width=1466&height=364&name=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%976.png)
チーム開発でブランチが増えてきた時等は、こういった作業ツリーで見ると分かりやすいですね。
![タイトルなし7](https://blog.future.ad.jp/hs-fs/hubfs/n.minami/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%977.png?width=1157&height=469&name=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%977.png)
また、このツリーからも各コミットの修正内容が見れるようになっています。(上の画像参照)
おわり
VSCodeでのGit操作を簡単にする拡張機能を紹介させて頂きましたが、いかがでしたでしょうか?
筆者はコマンドを覚えてもちょっと使わなかったら忘れてしまうので、こういったGUIで操作できるのはとてもありがたいです。
皆さまも、もしよかったら活用してみてください!