HTMLファイルの比較とマークアップ変更の検出

HTML Diff比較

HTMLファイルの比較は、同じレンダリング出力が異なるマークアップで表現できるため困難です。空白の違い、属性の順序、自己閉じタグのスタイルはすべて、視覚的に意味のないテキストDiffを生成する可能性があります。

HTML DiffのChallenge

<!-- バージョンA -->
<img src="logo.png" alt="Logo" class="header-img" />

<!-- バージョンB -->
<img class="header-img" src="logo.png" alt="Logo">

これら2行は機能的に同一ですが、プレーンテキストDiffは完全に異なるとマークします。スマートなHTML Diffは比較前にマークアップを正規化する必要があります。

正規化戦略

Diff実行前に両方のHTML入力を正規化します：

1. 一貫したフォーマット — 同じインデントと改行を適用
2. 属性のソート — 属性をアルファベット順に並べる
3. 引用符の正規化 — すべての属性値をダブルクォートに変換
4. 自己閉じタグの正規化 — 1つのスタイル（<br>または<br />）を選択
5. 空白のトリム — タグ内の余分なスペースを削除

HTMLの変更タイプ

変更タイプ	例
タグ追加	新しい<section>ブロックが挿入
タグ削除	<div class="deprecated">が削除
属性変更	class="old" → class="new"
属性追加	data-testid="btn"が追加
コンテンツ変更	内部テキストが変更
構造変更	要素が別の親に移動

レンダリング出力の比較

テンプレートやコンポーネントの変更では、ソースではなくレンダリングされたHTML出力を比較したい場合があります。

セマンティックDiffとテキストDiff

セマンティックなHTML DiffはDOMツリーを理解します：

• 移動された要素は「削除＋追加」ではなく「移動」として表示
• 属性のみの変更はコンテンツの変更と分離
• 空白のみの差分はフィルタリング可能

ベストプラクティス

• Diff前に必ず両方のHTMLファイルをフォーマット/整形する
• HTML構造を理解するDiffツールを使用する
• 空白ではなく、属性とコンテンツの変更に焦点を当てる