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 差分表示を手に入れてくださいね!

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-7-15

    Babel を使えば、対応ブラウザなんて気にせず新しい文法で JS をガンガン書けるよ!

    対応ブラウザなんて気にせずに JavaScript 書きたい? 前回ご紹介しました 「Can I …
  2. 2019-7-12

    2019年6月度社員総会&懇親会@Osaka

    2019年6月11日(火)、大阪社員総会&懇親会が開催されました! その様子をお届けします! 社員…
  3. 2019-7-9

    2019年5月度・第34回福岡社員総会&懇親会

    はじめに 2019年5月7日、福岡オフィスの社員総会&懇親会が開催されました! その模様をお伝えし…
  4. 2019-7-8

    進化が激しい JS 世界で生き抜くために。 Can I use でブラウザごとの対応状況を見よう。

    JS を書くときには、ブラウザごとに考慮しなければならないことが… みなさん、JavaScript…
  5. 2019-7-2

    2019年6月度社員総会&懇親会@Nagoya

    じめじめっとした日の通勤は苦手です。おみです。 さて!今回は6/10(水)に行われた、名古屋社員総…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。