新機能の追加中に動かなくなった...Git Graphで「before & after」を差分確認しよう

アプリ開発中、新機能を追加しようとしてコードを変更しているうちに、いつの間にか既存の機能まで動かなくなってしまった😭って経験、ありますよね？

そんなとき役立つ（かもしれない）のが「差分表示機能」です。「現在のコード」と「以前に正常動作していた時点のコード」を比較することで、デバッグの手がかりを得ることができます。

ここでは、VSCode の拡張機能「Git Graph」を使った方法を紹介したいと思います。Git Graph はコミット履歴をグラフィカルに表示し、ブランチの分岐やマージの関係を視覚的に把握できる拡張機能ですが、今回は差分表示機能を利用していきます。まずは、Git Graph をインストールします。

インストール完了後、ウィンドウ下部のステータスバーに「Git Graph」アイコンが追加されます。このアイコンをクリックしてください。

コミット履歴が一覧表示されるので、差分比較の基準となるコミットをマウスクリックで選択します。まだコミットしていない変更（Uncommitted Changes）との比較も可能です。

つづいて、Ctrl キー（Mac ではCommandキー）を押下しながら、比較したいコミットをクリックします。その後、具体的に差分を確認したいファイルを選択します（このとき Ctrl キーは離して構いません）。

すると、画面が左右に分割され、差分を確認できるようになります。なお、VSCodeのウィンドウ幅が狭い場合、左右表示にならないためご注意ください。

以上のように Git Graph を使うことで、自分が加えた変更の履歴を視覚的に確認できるようになります。「なぜか動かなくなった」「いつの間にかバグが発生した」というときでも、正常に動作していた時点のコードと見比べることで、どの変更が影響したのかを素早く確実に特定して、解決につなげることができます。良かったら活用してみてください。