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-5-20

    ヘッドレス CMS ってどんなの?ブログの新しい作り方!

    ブログの新しい作り方 みなさん、ブログ書いていますか? 結構多くの方が、これまで一度はブログをやっ…
  2. 2019-5-13

    東京オフィスを移転いたしました

    将来的な展望を踏まえ、東京オフィスを移転いたしました! 株式会社エージェントグローの東京オフィスは…
  3. 2019-5-13

    日本語入力は ATOK がとっても便利なことを知ってもらいたい

    日本語入力、何使ってますか? みなさん、PC での日本語入力ソフトは何を使っていますか? Win…
  4. 2019-5-11

    エージェントグローの社長ブログで気になる記事をピックアップ!【人柄・思考術・会社のアレコレ】

    こんにち、ヒロキです。 今日はエージェントグローの社長ブログから、私がオススメする記事をピックアッ…
  5. 2019-5-9

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

    今月もやってまいりました! こんにち、ヒロキです。 今月も福岡の社員総会&懇親会が開催されました…
ページ上部へ戻る

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

「フェアネス方式」は、株式会社エージェントグローが日本国内において出願中の商標です。

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

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