2つのテキストをブラウザで比較する
基準を左、変更後を右へ貼り付けると、追加・削除・変更行と行内の文字差分をBrowser内で確認できます。
テキスト差分比較ツールを開く結論：Beforeを左、Afterを右へ置いて行差分から確認する
比較元を左、比較先を右へ入力して「比較する」を実行します。削除は左、追加は右、同じ位置の置換は変更として表示されます。最初は無視設定を増やさず、差分が多いときだけ空白・大文字小文字・改行の条件を一つずつ調整します。
左右を逆にすると追加と削除の意味も逆になります。結果を共有する前に、どちらがBeforeかを明記してください。
比較前に左右と条件をそろえる
差分結果は入力順、文字コード、改行、空白の扱いで変わります。内容だけでなく比較条件も記録すると、別の人が同じ結果を再現できます。
| 確認項目 | 左側 | 右側 |
|---|---|---|
| 役割 | 基準・変更前 | 比較先・変更後 |
| 文字コード | 正しく読めるEncoding | 同じ基準で読めるEncoding |
| 無視設定 | 左右共通で適用 | 左右共通で適用 |
| ファイル名 | 基準名を確認 | 変更後名を確認 |
テキスト差分比較ツールで確認する
- 1. 左へBefore、右へAfterを貼り付けるかファイルを読み込みます。
- 2. 文字化けがないことと左右のファイル名を確認します。
- 3. 比較を実行し、差分・追加・削除・変更の件数を見ます。
- 4. 「次の差分」で各変更へ移動し、変更行内の強調箇所を確認します。
- 5. 必要な場合だけ無視設定を一つ変更して再比較します。
追加・削除・変更の意味
| 表示 | 意味 | 次に確認すること |
|---|---|---|
| 追加 | 右側にだけ存在する行 | 意図した新規内容か |
| 削除 | 左側にだけ存在する行 | 消してよい内容か |
| 変更 | 削除と追加が対応付けられた行 | 強調された文字と前後文脈 |
| 差分なし | 選択条件では一致 | 無視設定で重要な差を隠していないか |
件数だけで正否を決めず、前後の行と用途を合わせて判断します。
文字列差分と意味上の差分を区別する
このツールは文字列を比較します。JSONのKey順変更、SQLの等価な書き換え、Codeの同じ動作など、意味が同じかどうかは判定しません。
「差分がない」は選択条件で文字列が一致したという意味で、Programや設定の動作保証ではありません。
解決しない場合の切り分け
- JSONやSQLは同じFormatter設定で整形してから比較する
- 改行コードやBOMはEditorやHex表示でも確認する
- 最終的なCode・設定はTestや実行環境で検証する
現在のテキスト差分比較ツールで確認できる範囲
| 項目 | 現在の対応 | 確認時の注意 |
|---|---|---|
| 入力 | 左右への直接入力、1件または2件のファイル読込 | 2件を同時にドロップすると1件目が左、2件目が右になる |
| 文字コード | 自動判定、UTF-8、Shift_JIS、UTF-16LE、UTF-16BE | 自動判定はBOMがない場合UTF-8として読む |
| 比較 | 行単位のMyers差分と、変更行内の文字単位強調 | 単語単位へ切り替えるモードはない |
| 表示 | Side-by-Side、行番号、追加・削除・変更、前後差分移動 | Inline専用表示と標準Unified Diff表示はない |
| 無視設定 | 行頭・行末空白、すべての空白、大文字・小文字、改行コード | 行末空白だけ、空白量だけ、空行だけを個別に無視する設定はない |
| 改行・BOM・Unicode | 改行差を比較対象に含めることはできる | LF／CRLF／Mixed、BOM、Unicode Code Pointを判定表示する機能はない |
| 操作 | 左右交換、全消去、左右本文・差分のCopy、処理Cancel、Scroll同期 | 標準PatchのDownloadや履歴保存はない |
| 処理場所 | 差分計算はBrowser内のWeb Worker | 入力本文や差分結果をAnalyticsへ送信しない |
画面の「差分をコピー」は差分行を「- 行番号」「+ 行番号」で並べる確認用形式です。---／+++ Headerや@@ Hunkを備えた標準Unified Diffではありません。
一次資料と実装を照合する
- Git: git-diff Documentation
- Git: diff-options Documentation
- Git: gitattributes Documentation
- GNU Diffutils: Comparing and Merging Files
- Unicode Standard Annex #15: Normalization Forms
- Unicode FAQ: UTF and BOM
- MDN: Web Workers API
GitやGNU diffのOption名とDevelopToolsの設定名は一対一ではありません。記事では標準形式・CLIの意味と、現在のBrowser Toolで実際に操作できる範囲を分けて説明しています。
具体例：port=8080を8081へ変更した
左へport=8080、右へport=8081を置くと、同じ行が変更として表示されます。
行内強調で最後の1文字だけが変わったことを確認できます。
- 左右へ値を入力する
- 比較を実行する
- 変更件数と行内強調を見る
- 右側を変更後として記録する
値の変更理由と影響範囲は差分結果とは別に確認します。
よくある質問
- 入力内容はServerへ送信されますか？
- 差分計算はBrowser内のWeb Workerで行い、入力本文や結果をServerやAnalyticsへ送信しません。
- 同じ内容なのに差分が出ます。
- 末尾空白、Tab、改行コード、Unicode、BOMなどを順に確認してください。