自主的20%るぅる

各々が自主的に好き勝手書くゆるふわ会社ブログ

git history でオシャレに差分を見せよう!

git のコミット履歴をオシャレに見せたい!

みなさん、バージョン管理活用していますか?

今バージョン管理といえば、SVN とか mercurial とかありますけど、
やっぱり git ですよね!

git は修正差分を追うことができるので、
通常の業務ではもちろんのこと、勉強会のプレゼン資料や教材を作る際にもとっても重宝します。

例えば、「ここの箇所にこんなコードを書いて…こうなりますよね!」みたいな見せ方ができるのですね。

たいていの場合は github にコードをアップロードして見せるのですが、
github の標準機能でで差分を表示しますと…
(github の vuejs/vue のファイルをサンプルとして使います)

こんなコミット履歴画面から…

こんな感じとか

こんな感じで表示できますね。

これもとても便利で、実務であれば十分なのですが、
やっぱりプレゼンなんかで見せるのであれば、もっとかっこよく見せたいと思うのが
人間の性ってもんですよ。そうですよね?

そんな風に感じているあなたに、とってもいいサービスがあるのです。

Git History でオシャレに差分を見せよう!

それがこちら。

Git History です!

使い方は簡単で、
https://github.com/vuejs/vue/blob/dev/src/core/index.js
みたいな感じで、差分を見たいファイルを github 上で開きまして…

ドメイン名の github.comgithub.githistory.xyz に差し替えるだけ!

https://github.githistory.xyz/vuejs/vue/blob/dev/src/core/index.js

すると…

気持ちいい感じのアニメーションで差分が見られます!

github の diff とは違ってどこがどう変化したか、という比較はできないので、
実際にコーディングしているときに使うというよりはやはり、
プレゼンなどで使うのがよさそうですね!

対応しているのは github だけではない!

今回の例では github 上のコードでご紹介しましたが、
実際には gitlab, bitbucket のコードでも同様に差分を表示させることができますよ!

さらに、CLIVS Code 拡張もあるので、これらを使えば
ローカルファイルの差分も同様にみることができますよ!

また、URL を手打ちで直すのが面倒という方には、Chrome 拡張Firefox 拡張もあります!
こちらはそれぞれ紹介ページを見ていただくとわかりますが、 github 等のサイト上にいい感じで diff を表示するためのボタンを設置してくれる感じですね。
拡張使うのはちょっとって方はブックマークレットもありますのでお好みで!

あなたも git history を使って、オシャレな git 差分表示を手に入れてくださいね!

Let’s share this article!

{ 関連記事 }

{ この記事を書いた人 }

Takato Ezaki
takato_ezaki
記事一覧