コード差分ビューア

概要

差分ビューアはVS Codeと同じエンジンであるMonaco Editorを使用して、テキストの差分を両パネルが完全に編集可能な状態で並べて表示します。コード・設定ファイル・プレーンテキストの2つのバージョンを貼り付けると変更箇所が即座にハイライトされ、どちらのパネルを編集しても差分のアノテーションはリアルタイムで更新されます。再送信は不要です。

差分の表示形式

最長共通部分列アルゴリズムで行ごとに比較し、3種類のアノテーションが表示されます。

  • 削除行(赤い背景): 左側にあって右側にない行
  • 追加行(緑の背景): 右側にあって左側にない行
  • 変更なしの行(背景なし): 両側で内容が完全に一致する行

ツールバーには追加・削除の合計行数が表示され、前後の差分へ移動するナビゲーションボタンが提供されます。大きなファイルでも手動でスクロールせずに変更箇所へ直接ジャンプできます。

2つの使い方

既存の2バージョンを比較する

  • 各バージョンをそれぞれのパネルに貼り付ける
  • ハイライトされた差分を行ごとに確認する
  • コードレビューや文書の校正に適している

比較しながら編集する

  • 左に元のテキストを貼り付けて右を直接編集する
  • 差分アノテーションが変更内容をリアルタイムで示す
  • マージコンフリクトの解消や2つの下書きの統合に適している

シンタックスハイライト

JavaScript/TypeScript・Python・HTML/CSS・JSON/YAML・SQL・Markdownを含む100以上のプログラミング言語に対応しています。ツールバーから言語を手動で切り替えられます。デフォルトはプレーンテキストモードです。

Windows改行とUnix改行の違い

内容が同じに見えているのにすべての行が赤くなる場合、両側の改行コードが異なっている可能性があります。Windowsは\r\n、Unix/macOSは\nを使います。貼り付け前に改行コードを統一するとこの問題は解消されます。差分ツールで最もよく起きる誤検出です。