【VScode】Git Hisotyで過去のコミットを簡単に遡ろう

・Git Historyを使って出来る事
・Git Historyの使い方

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

Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法をまとめました。

関連記事

僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。ノウハウがたまってきたので、React + TypeScriptの勉強方法をまとめようと思います。すでにReact+Ty[…]

この記事ではGit Historyの使い方や利点を紹介します。

では、どうぞ!!

【追記】Git Graphに切り替えました

最近、私はGit HistoryからGit Graphに変更しました。

その経緯や比較内容はこちらの記事にまとめたので、ぜひ参考にして下さい。

関連記事

こんにちは、フロントエンドエンジニアの「てりー」です。僕の詳しいプロフィールはこちら独学でフロントエンドエンジニアを目指している人へフロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました!!興味ある方は是非ご覧[…]

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

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

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

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

Git HistoryはVScodeの拡張機能

Git HistoryはVScodeの重要な拡張機能です。なぜなら、このツールを使うと、commit単位で差分を見ることができるからです。

Extension for Visual Studio Code - View git log, file histor…

・commitやmergeなどブランチ更新がグラフィカルに理解出来る
・ファイル単位で過去のcommit状態を復元できる

    複数人での開発によるGitでの変更履歴の確認には欠かせないツールですね。

    Git HistoryをVScodeに導入する!

    1. VScodeの拡張機能で「Git History」で検索する
    2. インストールしてVScode内で有効化する

    Git Historyの使い方

    次にGit Historyの使い方を見ていきましょう!

    1 VScode上で変更履歴を見たいファイルを右クリック→「Git:View File History」をクリック。

    2 変更履歴を確認したいcommitを選ぶ

    この画像では一番上の修正版_2を選んでますね。
    上のタブの部分を使えばブランチ、作成者での絞り込みもできます。

    3 ファイルを選択してcommit差分を見る

    commit一覧の中から差分を見たいcommitを見つけます。

    次に、選んだcommitの中で変更履歴を確認したいファイルを選んで、「compeir ~~ workspace」でワークスペースとの差分を確認しています。

    この様に「commit→file→workspaceかcommit前との差分か」の流れで変更履歴を見ていけます。

    まとめ

    この記事ではGit Historyを使った変更履歴の確認方法について説明しました。さらに、Gitの操作に慣れることは重要です。

     

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

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

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

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

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

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

    関連記事

    Git操作で初心者がやりがちな作業ブランチミスやコミットメッセージ忘れの対処法Qiitaの方がコードが見やすいので、こちらでご確認ください。[blogcard url=https://qiita.com/terr[…]