ビルド後のページ、CMSが吐き出したHTML、他の人から引き継いだテンプレート——実務で触るHTMLは、必ずしも読みやすい形をしていません。1行に長くつながっていたり、自動生成のクラス名が並んでいたりすると、目的の要素がどこにあるのかを探すだけで時間がかかります。この記事では、読みにくいHTMLを解読する手順を、整形から構造の把握、要素の特定、データ抽出まで順番に紹介します。
1. まず整形して構造を見えるようにする
最初にやるべきは整形です。インデントが付くだけで階層が見えるようになり、目的の要素がどのブロックに属しているかが分かります。HTML Formatter に貼り付けると、インデント幅を選んで整形できます。ここで知っておきたいのが、整形には落とし穴があるという点です。HTMLでは連続する空白や改行が1つの空白として描画されるため、行内要素の間に改行を入れると、そこに空白があるものとして表示され、レイアウトが変わってしまいます。このツールは span や a などの行内要素を同じ行に保ち、pre や script の中身もそのまま維持するため、整形しても描画結果が変わりません。整形したHTMLをそのまま実装に戻す場合は、この挙動の違いが重要になります。
この手順で使うツール
HTML Formatter
HTMLを整形・圧縮（インラインとpreは保持）
2. 目的の要素を指す道順を決める
構造が見えたら、目的の要素をどう指し示すかを決めます。方法は主に2つで、CSSセレクタとXPathです。CSSセレクタは記法が簡潔で、クラスやIDでの指定に向いています。CSS Selector Tester では、書いたセレクタが実際のDOMでどの要素にマッチするかを確認できます。ここで重要なのが、壊れにくい指定を選ぶことです。ビルドツールが自動生成したクラス名は、ビルドのたびに変わる可能性があるため、それに依存した指定はすぐ動かなくなります。できるだけ、意味のある構造や属性、あるいは変わりにくいテキストを手がかりにします。複数の候補がある場合は、どちらがページの更新に耐えるかで選びます。目印になりそうな要素をいくつか試し、マッチ件数が想定どおりかを確認しながら絞り込むのが確実です。
この手順で使うツール
CSS Selector Tester
HTMLとCSSセレクターを入力してマッチした要素をリアルタイムハイライト
3. テキストや階層に依存する指定はXPathで書く
CSSセレクタでは書けない指定もあります。代表的なのが、テキストの内容で要素を選ぶ場合と、親をさかのぼる場合です。「この文字列を含む見出し」「その見出しの親要素」といった指定は、XPathであれば素直に書けます。XPath Tester にHTMLを貼り付けて式を試すと、マッチした要素がその場で一覧表示されるため、試行錯誤が速く進みます。書き方の基本は、スラッシュで階層をたどり、角かっこの述語で条件を絞ることです。属性の値で絞る、部分一致で選ぶ、件数を数える、といった操作ができます。注意点として、位置の指定は1から始まります。プログラミング言語の配列が0始まりなのと混同しやすい部分です。まずは大まかな式で当たりを付け、結果を見ながら具体的に絞っていくと効率よく組み立てられます。
この手順で使うツール
XPath Tester
XML / HTML から XPath で要素を抽出してテスト
4. 抽出した内容を扱いやすくする
要素を特定できたら、取り出した内容を後続の作業に渡せる形に整えます。抽出結果は1行ずつのテキストであることが多いため、Line Tools で重複を除いたり、並べ替えたり、空行を落としたりできます。配列やSQLのIN句に貼り付けたい場合は、接頭辞と接尾辞の一括付与でそのまま使える形に変換できます。文書全体を構造ごと別の形式で扱いたい場合は、XML ↔ JSON Converter でJSONに変換する方法もあります。JSONにしてしまえば、必要な部分を取り出したり、CSVに変換して集計したりと、選択肢が広がります。目的が「特定の値だけ欲しい」のか「構造ごと扱いたい」のかで、どちらの道を選ぶかが決まります。
この手順で使うツール
Line Tools
行の並べ替え・重複削除・整形をまとめて処理
5. 見えない差異でつまずいたときの確認
最後に、解読していて「合っているはずなのに一致しない」という場面での確認方法です。よくある原因が、見た目が同じ別の文字です。全角と半角、似た形のハイフンやダッシュ、そして画面には表示されないゼロ幅スペースなどが混ざっていると、目視では気づけません。String Inspector にテキストを貼り付けると、文字ごとのコードポイントが一覧で表示されるため、不可視文字の混入や、想定と違う文字が使われていることに気づけます。もう1つの原因が、JavaScriptで後から生成される内容です。ブラウザの開発者ツールでは見えていても、取得した静的なHTMLには存在しないため、抽出できません。この場合はブラウザを自動操作する仕組みが必要になります。取得元のHTMLを直接確認して、そこに要素が存在するかを先に確かめると、原因の切り分けが早くなります。
この手順で使うツール
String Inspector
文字列を1文字ずつ分解 — Unicodeコードポイント・UTF-8バイト数・文字種を可視化
まとめ
読みにくいHTMLの解読は「整形して構造を見えるようにする → 指し示す方法を決める → テキストや階層に依存する指定はXPathで書く → 抽出結果を整える → 見えない差異を確認する」という流れで進めると迷いません。特に「行内要素に改行を入れると表示が変わる」「自動生成のクラス名に依存しない」「取れないときは静的HTMLに存在するか確認する」の3点は、実務でつまずきやすい部分なので覚えておく価値があります。