テキスト差分ビューアー
2 つのテキストやファイルを行単位で比較し、追加・削除・変更された行を横並びまたは unified diff で表示。行内の変更箇所は単語単位でハイライトします。
入力内容とファイルはブラウザ内に留まります
元のテキストを貼り付けるか、ファイルを開いてください。
変更後のテキストを貼り付けるか、ファイルを開いてください。
両側に入力して「比較」を押すと、差分がここに表示されます。
このページの内容
設定ファイル、コード片、文書の 2 つのバージョンを貼り付けると、どの行が追加・削除・変更されたかが正確にわかります。Git diff のような横並び表示と行ごと(unified)表示に対応しています。
詳細な機能
比較は行単位です。jsdiff が unified パッチを作成し、diff2html が行番号、各変更の前後最大 4 行の未変更コンテキスト、変更行内の単語単位のハイライト付きで描画します。表示されるのは変更のあった部分(hunk)だけで、テキスト全体ではありません。空白と大文字・小文字は区別されるため、インデントの変更や行末のスペースも変更として扱われます。
それぞれの側は、入力、貼り付け、またはローカルのテキストファイル(UTF-8 として読み込み)から読み込めます。改行コードは統一されるため、同じ行を持つ Windows(CRLF)と Unix(LF)のファイルは同一と判定されます。両側をファイルから読み込むと比較は自動で始まり、入力が同一の場合は差分がないと表示されます。
差分はブラウザー内で計算され、ファイルもローカルで読み込まれます。何もアップロードされません。ページの応答性を保つため、違いが大きすぎるテキストには上限があり、1,000 行を超えて異なる場合は diff の代わりにメッセージを表示します。
実用例
設定の変更:元の行 host=localhost、port=8080、debug=true と host=0.0.0.0、port=8080、debug=false を比較すると、host と debug の行が削除・追加としてマークされ、変わった単語がハイライトされます。port=8080 は未変更のコンテキストとして残ります。
長いファイルの 1 行:20 行のテキストで 11 行目だけを変更すると、diff には hunk @@ -7,9 +7,9 @@ が 1 つだけ表示されます。変更箇所と前後 4 行ずつのコンテキストです。
2 つのファイルの比較:ファイルボタンで旧版と新版を選ぶと、両方が読み込まれた時点で diff が表示されます。
コピーの確認:同一の 2 つのテキストを比較すると、差分がないと表示されます。
このツールの使い方
元のテキストを追加する
元のテキスト に貼り付けるか、元のファイルを選択 を押します。
変更後のテキストを追加する
変更されたテキスト に貼り付けるか、変更されたファイルを選択 を押します。
比較する
比較 を押します。両側がファイルの場合、diff は自動で表示されます。
表示を切り替える
表示モード で 並べて表示 または 統合表示 を選びます。クリア で両方の欄をリセットします。
ヒントとベストプラクティス
- 広い画面では 並べて表示、スマートフォンでは 統合表示 が読みやすくなります。
- 比較できるのはプレーンテキストのみです。画像、PDF、Word 文書には対応していません。
- 1,000 行を超えて異なる場合は、ファイルを小さく分けて比較してください。
- JSON や圧縮されたコードは先に整形しておきましょう(1 行に 1 項目)。長い 1 行は変更された 1 行としてしか表示されません。
- 一度アクセスした後は、ネットワークがなくてもページが動作します。