文字レベルの変更ハイライト付きインラインDiff

文字レベルハイライト付きインラインDiff

インラインDiffは、変更行内の特定の文字や単語を特定することで、行レベルの比較を超えます。行全体を変更済みとマークする代わりに、異なる正確なトークンを特定します。

行レベルと文字レベルのDiffの比較

以下の変更を考えてください：

元：      const API_URL = "https://api.example.com/v1";
変更後：  const API_URL = "https://api.example.com/v2";

行レベルDiffは行全体を変更済みとマークします。インラインDiffはv1 → v2のみをハイライトし、行の残りはマークしません。これにより実際の変更が即座に確認できます。

インラインDiffアルゴリズムの仕組み

1. 変更行の特定 — 標準の行Diffでまず変更された行を見つける
2. トークン化 — 各変更行を文字または単語に分割
3. トークンでDiffを実行 — より小さなトークンに同じDiffアルゴリズムを適用
4. ハイライト — 異なるトークンのみを背景色でマーク

単語レベルと文字レベル

• 文字レベル： 個々の文字をハイライト — 小さなタイプミス修正、URL変更、数値の編集に最適
• 単語レベル： 単語全体をハイライト — 文章、自然言語テキスト、変数名の変更に最適

文字レベル：  "Hello, [W]orld!"  （'W'のみハイライト）
単語レベル：  "Hello, [World]!"  （単語全体をハイライト）

インラインDiffのレンダリング

ほとんどのDiffビューアーでは、インラインの変更は以下のようにレンダリングされます：

• 削除された文字： 赤い背景と取り消し線
• 追加された文字： 緑の背景
• 周囲のコンテキスト： 変更行上の通常テキスト

パフォーマンスの考慮事項

非常に長い行（minifiedされたCSS、単一行のJSON）に対する文字レベルのDiffは計算コストが高くなります。優れたDiffビューアーはしきい値を設定し、行が一定の長さ（例：10,000文字）を超えた場合、行レベルのDiffにフォールバックします。

サイドバイサイドビューとの組み合わせ

インラインの文字ハイライトはサイドバイサイドとUnifiedの両方のビューで機能します。サイドバイサイドレイアウトとインラインハイライトの組み合わせにより、コードレビューで最大限の明確さが得られます。