コードの変更箇所を確認したいけど、Git環境がない、またはGitを使っていないプロジェクト――。この記事では、ブラウザのdiffツールを使ってコードレビューや変更確認を行う方法を紹介します。
ブラウザdiffツールが活躍する場面
GitHubやGitLabにはコード差分表示機能がありますが、以下のような場面ではブラウザのdiffツールが便利です。
- Git管理外のコード: スプレッドシートのマクロ、データベースのストアドプロシージャ
- 設定ファイルの比較: 本番環境とテスト環境の設定の違い
- コードスニペットの比較: チャットやメールで共有されたコード
- SQLクエリの比較: 修正前後のSQLクエリ
- リモートサーバーのファイル: SSHで取得したファイルの内容
コードレビューでの活用方法
使い方1: 修正前後のコードを比較する
最もシンプルな使い方です。
- 修正前のコードを左側に貼り付ける
- 修正後のコードを右側に貼り付ける
- ハイライトされた変更箇所を確認する
sakuttoのdiffツールは文字レベルで差分を検出するため、変数名の一部変更やスペースの追加など、細かい修正も見逃しません。
使い方2: 設定ファイルの比較
本番環境とステージング環境の設定ファイルの違いを確認する際に便利です。
比較例:
.envファイルの環境変数nginx.confなどのサーバー設定package.jsonの依存関係docker-compose.ymlのサービス設定
使い方3: SQLクエリの比較
データベースクエリの修正前後を比較する際に活用できます。
- WHERE句の条件変更
- JOIN条件の変更
- SELECT句のカラム追加・削除
- インデックスの変更
使い方4: APIレスポンスの比較
APIのレスポンスが期待通りかどうかを確認する際、以前のレスポンスと最新のレスポンスを比較できます。JSONレスポンスの差分確認に特に便利です。
プログラミングでの差分確認テクニック
テクニック1: インデント変更を無視する
コードのリファクタリングでインデントだけが変更された場合、大量の差分が表示されることがあります。この場合は、先にインデントを統一してから比較すると、実質的な変更箇所だけを確認できます。
テクニック2: マージ機能で最適なコードを選ぶ
2つのバージョンのコードからそれぞれ良い部分を選びたい場合、マージ機能が便利です。
- バージョンAのコードを左側に貼り付ける
- バージョンBのコードを右側に貼り付ける
- 差分箇所ごとにAまたはBを選択して採用
- 統合されたコードをコピー
テクニック3: 段階的な変更の確認
大きなリファクタリングを行う場合、変更を段階的に確認すると理解しやすくなります。
- 元のコード vs 第1段階の修正
- 第1段階 vs 第2段階の修正
- 第2段階 vs 最終版
Git環境がない場合のコードレビュー手順
Gitを使っていないプロジェクトでのコードレビュー手順です。
- レビュー依頼者: 修正前のファイルと修正後のファイルを共有
- レビュアー: sakuttoのdiffツールで差分を確認
- レビュアー: 変更箇所ごとにコメントを記録
- フィードバック: 問題点や改善提案をまとめて返信
よくある質問（FAQ）
シンタックスハイライト（色分け表示）に対応していますか？
sakuttoのdiffツールはシンタックスハイライトには対応していませんが、等幅フォントで表示されるためコードの差分は見やすくなっています。シンタックスハイライトが必要な場合は、VS Codeの内蔵diff機能がおすすめです。
バイナリファイルの差分も確認できますか？
テキスト差分ツールはプレーンテキストの比較に対応しています。バイナリファイル（画像、コンパイル済みファイルなど）の比較には対応していません。
GitのPull Requestの代わりに使えますか？
簡易的なコードレビューには使えますが、GitのPull Requestはコメント機能や承認フローなど、チーム開発に必要な機能が揃っています。Git環境があるプロジェクトではPull Requestを使い、Git外のコードにはdiffツールを使うのが効率的です。
大きなコードベース（数千行）の比較も可能ですか？
可能です。sakuttoのdiffツールは数万行のテキストでも高速に差分検出を行います。ナビゲーション機能で変更箇所をジャンプしながら効率的にレビューできます。
まとめ
ブラウザのdiffツールは、Git環境外でのコードレビューや設定ファイルの比較など、プログラマーの日常業務で幅広く活用できます。sakuttoなら文字レベルの差分検出とマージ機能を備えており、ソースコードがサーバーに送信されないためセキュリティ面でも安心です。