>_devtools-hub
XMLHTMLデータ変換

HTMLやXMLから必要なデータを抜き出す手順 — XPath・セレクタ・JSON化

HTMLやXMLから目的のデータを取り出す手順を、構造の把握→XPathでの抽出→CSSセレクタとの使い分け→JSON化の流れで解説します。名前空間やJavaScript生成コンテンツといった、つまずきやすい点も整理します。

RSSフィードから記事一覧を取り出したい、設定ファイルの特定の値だけ知りたい、Webページから表のデータを集めたい——HTMLやXMLから必要な部分だけを抜き出す作業は、意外と頻繁に発生します。文字列の検索や正規表現でも一応取り出せますが、階層構造を持つデータに対しては壊れやすく、少しの構造変化で動かなくなります。この記事では、HTMLやXMLから目的のデータを抜き出す手順を、構造の把握から抽出、形式変換まで順番に紹介します。

1. まず文書の構造を把握する

抽出式を書く前に、対象の文書がどんな構造をしているかを掴みます。ここを飛ばすと、当てずっぽうで式を書いては直す、という遠回りになります。見るべきは、繰り返し現れる単位はどの要素か、目的の値は要素のテキストなのか属性なのか、そして同じ名前の要素が別の階層にも存在しないか、の3点です。XMLであれば、XML ↔ JSON Converter でJSONに変換してみると、階層とキーの構造が一目で分かります。JSONの形で見た方が、入れ子や配列の関係を把握しやすいことは多いです。整形して読みたいだけなら JSON Studio でインデントを付けて確認するのも有効です。構造さえ掴めれば、あとはそこへたどり着く道順を書くだけになります。

この手順で使うツール

XML ↔ JSON Converter

XMLとJSONを双方向にリアルタイム相互変換

2. XPathで目的の要素を指定する

構造が分かったら、XPathで抽出します。基本は、スラッシュで区切って階層をたどる書き方です。スラッシュ2つを使うと階層を問わず子孫から探せるため、まずはこれで当たりを付け、結果を見ながら具体的なパスに絞り込むと効率的です。XPath Tester に文書を貼り付けて式を入力すると、マッチした要素がその場で一覧表示されるので、試行錯誤が速く進みます。要素そのものではなくテキストが欲しい場合は text()、属性値が欲しい場合は @ と属性名を指定します。角かっこの述語を使えば、属性の値で絞る、数値を比較する、部分一致で選ぶ、といった条件を加えられます。位置指定が1から始まる点だけ注意してください。プログラミング言語の配列が0始まりなのと混同しやすい部分です。

この手順で使うツール

XPath Tester

XML / HTML から XPath で要素を抽出してテスト

3. CSSセレクタと使い分ける

HTMLが対象の場合、CSSセレクタという選択肢もあります。記法が簡潔で、クラスやIDでの指定に向いており、フロントエンドの経験があれば直感的に書けます。一方XPathは、テキストの内容で要素を選べる、親をさかのぼれる、といった点で表現力が上です。「この文字列を含むリンク」「この見出しの直後にある表」といった指定は、XPathの方が素直に書けます。CSSセレクタ側の動作を確認したい場合は CSS Selector Tester で実際のDOMに対して試せます。実務では、単純な指定はCSSセレクタ、構造やテキストに依存する指定はXPath、と使い分けるのが現実的です。どちらでも書ける場合は、対象サイトの変更に強い方を選びます。自動生成されたクラス名に依存する指定は壊れやすいため、意味のある構造に基づく指定の方が長持ちします。

この手順で使うツール

CSS Selector Tester

HTMLとCSSセレクターを入力してマッチした要素をリアルタイムハイライト

4. 取り出したデータを扱いやすい形にする

抽出した結果は、そのままでは1行ずつのテキストであることが多く、後続の処理に渡すには整形が必要です。行単位の整理には Line Tools が使えます。重複を除く、並べ替える、空行を落とす、そして配列やIN句の形に変換する、といった処理を一括でかけられます。文書全体を構造ごと変換したい場合は、XML ↔ JSON Converter でJSONにしてしまう方法もあります。JSONにしてしまえば、JSONPath で必要な部分を取り出したり、CSVに変換して表計算ソフトで集計したりと、扱える手段が一気に増えます。目的が「特定の値だけ欲しい」ならXPathで直接取り出し、「構造ごと別の形式で扱いたい」なら変換してから処理する、と考えると選びやすくなります。

この手順で使うツール

Line Tools

行の並べ替え・重複削除・整形をまとめて処理

5. つまずきやすい点に対処する

最後に、実際にハマりやすい点を挙げておきます。1つ目は名前空間です。既定の名前空間が指定されたXMLでは、接頭辞なしのパスで要素を選べず、正しそうな式なのに何も返らない、という状態になります。まずこれを疑ってください。2つ目は、HTMLをXMLとして厳密に解析しようとして構文エラーになるケースです。HTMLは閉じタグの省略が許容されるため、XMLとしては不正なことがあります。3つ目が、JavaScriptで後から生成される内容です。ブラウザの開発者ツールでは見えていても、取得した静的なHTMLには存在しないため、抽出できません。この場合はブラウザを自動操作する仕組みが必要になります。なお、他者のサイトからデータを取得する場合は、robots.txt や利用規約を確認し、過度なアクセスを避けるなど、相手のサーバーに負担をかけない配慮が必要です。

この手順で使うツール

XPath Tester

XML / HTML から XPath で要素を抽出してテスト

まとめ

HTMLやXMLからのデータ抽出は「構造を把握する → XPathで指定する → CSSセレクタと使い分ける → 扱いやすい形に整える → つまずきやすい点に対処する」という流れで進めると確実です。特に「まずJSONに変換して構造を掴む」「位置指定は1から始まる」「返ってこないときはまず名前空間を疑う」の3点は、試行錯誤の時間を大きく減らしてくれます。

このツールで試す

JSON Path Tester

JSONPath 式をリアルタイムでテスト・結果を即確認

開発者向けユーティリティJSON

使ってみる →

BOOTH

CSS Selector Tester

HTMLとCSSセレクターを入力してマッチした要素をリアルタイムハイライト

CSS開発者向けWeb開発

使ってみる →

BOOTH

XML ↔ JSON Converter

XMLとJSONを双方向にリアルタイム相互変換

開発者向けXMLJSONデータ変換

使ってみる →

Line Tools

行の並べ替え・重複削除・整形をまとめて処理

テキストユーティリティ開発者向け

使ってみる →

XPath Tester

XML / HTML から XPath で要素を抽出してテスト

開発者向けXMLHTMLデータ変換

使ってみる →

関連ガイド