Gitで改善前の状態を確認する ― git stashとcheckoutでBefore / Afterを比較する方法 ―

My Portfolioのトップページを改善していた。

今回はCodexに依頼して、トップページの改善を実施した。

改善後の画面を見ると、

確かに以前より発注者目線で分かりやすくなっている。

改善前の状態を確認して、

Before → After

で比較したいと思った。

まだ、pushしていなかったので、本番に反映されておらず、

本番とローカルを比較すれば、before → Afterの比較ができる。

ただ、せっかくなので、Gitでローカルでやってみよう。

Gitの履歴を利用する

Gitにはコミット履歴が残っている。

まず履歴を確認する。

git log --oneline

すると、

過去のコミット一覧を確認できる。

改善前の状態を確認する

改善前のコミットIDを指定する。

git checkout <コミットID>

すると、

その時点の状態へ移動できる。

VScodeのプラスボタンで新しいターミナルを開いた

戻るコミットIDは、現在の最新でいいだろう（リモートのGitHubに上がっているもの）

(venv) hiroki@shibatahiroshitakanoiMac my-portfolio % git log --oneline
ce92ec2 (HEAD -> main, origin/main, origin/HEAD) 「何をどのくらいの期間で作れるのか？」に答える

以下を入力すれば、beforeの状態を確認できる

git checkout ce92ec2 

と思ったが、ブラウザを確認すると、afterの状態のままだった

原因は未コミットの変更だった

Gitのメッセージを見ると、

M app/static/css/pages/top.css
M app/templates/top.html

と表示されていた。

これは、

Modified（変更あり）

を意味する。

つまり、現在の変更内容がワーキングツリーに残ったままになっていた。

そのため、過去のコミットへ移動しても、ブラウザ上では改善後の状態が表示されていたのである。

一度、以下のコマンドで、mainブランチに戻った

git switch main

正解

git stashで変更を退避する

現在の変更内容を一時退避する。

git stash

その後、再度コミットへ移動する。

git checkout ce92ec2

これで、beforeが確認できた

現在の状態へ戻る

確認が終わったら、元のブランチへ戻る。

git switch main

そして、退避していた変更内容を復元する。

git stash pop

これで改善後の状態へ戻ることができた。

今回学んだこと

今回学んだことは、Gitは単なるバックアップツールではないということだ。

コミット履歴を活用することで、

• 改善前
• 改善後

を簡単に比較できる。

また、

git checkout

だけでは未コミットの変更は残るということも理解できた。

Beforeを正しく確認したい場合は、

git stash
↓
git checkout

の流れが必要になる。

次にやること

My Portfolioの改善を続ける。

発注者が見たときに、

• 何を作れるのか
• 何を依頼できるのか
• なぜその人に依頼すべきなのか

が伝わるポートフォリオを目指していきたい。