テキストの差分をブラウザで確認できるDiffツールを作った

趣味

はじめに

おつかされまです。tyamonです。

この記事では、2つのテキストの差分(Diff)をブラウザ上で行単位に比較・表示するツールを紹介します。

以下のような方を対象としています。

  • 設定ファイルや手順書の変更前後を見比べたい
  • gitが使えない環境でテキストの差分を確認したい
  • コピペしたテキストがどこか違うのかをすぐに見つけたい

結論(成果物)

本記事で紹介するツールを使うことで、2つのテキストを貼り付けるだけで追加・削除行を色分け表示できます。外部送信なし・インストール不要です。

ツールはこちら → 差分チェッカー(Diff) | tools.tyamon.com


ツールの使い方

2つのテキストを貼り付ける

  • 左側「変更前 (A)」に比較元のテキストを貼り付け
  • 右側「変更後 (B)」に比較先のテキストを貼り付け

「差分を表示」ボタンを押すと差分が表示されます。

差分の読み方

記号意味
赤背景-変更前にあって変更後にない行(削除)
緑背景+変更後に追加された行(追加)
白背景変更なし(一致)

画面上部に「+N 追加」「-N 削除」「N 一致」の統計バッジが表示されます。

行末の空白を無視する

「行末の空白を無視」チェックボックスをONにすると、行末のスペース・タブの違いを無視して比較します。
コピペ元の環境が異なる場合に便利です。


実務での活用シーン

インフラ設定ファイルの変更確認

CloudFormationテンプレートやnginxの設定ファイルを変更するとき、変更前後を貼り付けて意図しない差分がないかを確認できます。

手順書・ドキュメントのレビュー

Wordや社内Wikiなどgitで管理されていないドキュメントの改訂前後をテキストとして貼り付けることで、どこが変わったかをすぐに把握できます。

SQLやコードのスポットレビュー

2つのクエリや関数が「どこだけ違うのか」を素早く確認するのに使えます。
IDEを開かずにブラウザで完結するのが手軽です。


まとめ

今回はブラウザで動くDiffツールを紹介しました。ポイントは以下の通りです。

  • 変更前・変更後のテキストを貼り付けるだけで行単位の差分を色分け表示
  • 追加・削除・一致の統計バッジで変更量を一目把握
  • 行末空白を無視するオプションあり

参考資料

コメント

タイトルとURLをコピーしました