ローカルのgit差分を、GitHubのプルリクエストのような見た目のHTMLで閲覧・共有できるCLIツール＆TypeScriptライブラリ。生成されるのは外部依存ゼロの単一HTMLファイルで、サーバーもアカウントもインターネット接続も要らない。ブラウザで開くだけでなく、ファイルをSlackに投げて同僚に見てもらうこともできる。
こんな場面で使える
- プルリクエストを作る前に、自分の変更をGitHubと同じ見た目でセルフレビューしたいとき
- GitHubを使っていない環境や、社外秘でアップロードできないコードの差分を共有したいとき
- オフラインの環境で、じっくりコードレビューしたいとき
主な機能
- GitHubに忠実なUI: Side-by-side表示とUnified表示を切り替えられる。配色や部品のデザインはGitHubに合わせ、OSのライト/ダーク設定にも追従する。
- シンタックスハイライト: TypeScript・Python・Go・Rust・C/C++など20以上の言語に対応。
- 行ハイライトと範囲選択: 行番号をクリックするとURLが更新され、そのURLを共有すれば相手の画面でも同じ行にジャンプする。
- レビューメモ: 行番号をダブルクリックしてメモを残せる。メモはブラウザに保存され、テキストやMarkdownで書き出せる。
- レビュー進捗トラッカー: ファイルごとの「Viewed」チェックと、「3/12 files reviewed」のような進捗バー。
- コマンドパレットとキーボード操作:
Cmd+Kでファイルや操作をあいまい検索。j/kでファイル移動、n/pでハンク移動など、キーボードだけでレビューできる。 - ミニマップとファイルツリー: 追加・削除の位置を俯瞰できるミニマップと、変更量が色で分かるディレクトリツリー。
- コンテキスト展開: 差分の前後のコードをGitHubと同じように20行ずつ展開できる。
使い方
Node.jsが入っていれば、インストールせずにnpxで実行できる。
npx gh-like-diff… 作業中の変更をブラウザで表示npx gh-like-diff main...HEAD… mainブランチとの差分をPR風に表示npx gh-like-diff --staged --save pr… ステージ済みの差分をHTMLとして保存git diff | npx gh-like-diff… 任意の差分をパイプで渡して表示
よく使うオプションは.gh-like-diffrcに書いておける。
技術構成
TypeScriptで実装し、npmパッケージとして公開している。シンタックスハイライトはhighlight.jsを使って生成時に処理し、出力HTMLにはライブラリ本体を含めずCSSテーマだけを埋め込むことで、ファイルサイズを抑えている。ミニマップはCanvasで描画する。
工夫した点
「1つのHTMLファイルだけで完結する」ことにこだわった。file://で開いても動き、メールやチャットで送っても崩れない。日本語入力の変換中にショートカットが誤動作しないようにする、改行コード（CRLF）や末尾改行の違いだけの変更にも印を付ける、といった細かい配慮も積み重ねている。ARIA属性による読み上げ対応や印刷用のスタイルも用意し、単体テスト64件・E2Eテスト54件で品質を保っている。
よくある質問
インストールは必要ですか？
Node.jsが入っていれば、npxでインストールせずに実行できる。
出力したHTMLを共有するときの注意点は？
HTMLには差分のコードがそのまま含まれる。社外秘のコードを扱う場合は、共有する相手と送る経路に注意してほしい。
GitHubの公式ツールですか？
公式ツールではなく、GitHubのプルリクエスト画面の見た目を参考にした個人開発のツールである。