横並びテキスト比較とは？

横並び比較では、テキストの2つのバージョンを2列に並べ、共通する行の位置をそろえます。最初のバージョンにしかない行は左側に、2つ目のバージョンにしかない行は右側に表示され、変更されていない行は同じ高さにそろえて表示されます。これはコードエディターやコードレビューサイトで差分を確認するときに使われる表示方法です。変更箇所の一覧ではなく、前後の文脈を踏まえて変更内容を簡単に読み取れます。

ツールの説明

このツールでは、2つのテキストまたはファイルを横並びで比較できます。元のバージョンを左側に貼り付け、変更後のバージョンを右側に貼り付けるか、それぞれの側でファイルを開いてください。削除された行は赤色、追加された行は緑色で表示され、変更された行の中では、変更された単語が濃い色で表示されます。両側とも編集できるため、入力すると比較結果が更新されます。

機能

  • テキストまたはプレーンテキストファイルに対応した、貼り付けタブとアップロードタブを備える編集可能な領域を左右に表示
  • 削除された行は赤色、追加された行は緑色で表示し、編集された行の中では変更された単語を強調表示
  • 共通する行の位置を左右でそろえる縞模様の補助行
  • 左右のスクロールを同期
  • 左右それぞれの下に、削除された行数と追加された行数を表示
  • 左右それぞれでクリップボードからの貼り付け、コピー、ダウンロードが可能。開いたファイルの名前も保持
  • 行末コードは無視されるため、同じファイルのWindows版とMac版は同じものとして比較

仕組み

このツールは、jsdiffライブラリを使って両方のテキストを行に分割し、共通する行を照合します。一致しない行は削除または追加として扱われます。削除された行の隣に追加された行がある場合は、2つの行を単語ごとに比較し、行の大部分が同じであれば変更された単語を強調表示します。行の大部分が新しい場合は、行全体に色を付けます。スペースと大文字・小文字の違いも変更として扱われます。すべての処理はブラウザー上で実行され、テキストがアップロードされることはありません。

ヒント

  • 行末に余分なスペースがあると、その行は変更されたものとして表示されます。左右で同じに見える行が変更扱いになっている場合は、行末のスペースを確認してください。
  • 長い行は折り返されません。行末を確認するには横にスクロールしてください。
  • 片側でファイルを開き、もう片側にテキストを貼り付けることもできます。