このツールとは?
XPath(XML Path Language)は、コンパクトなパスライクの構文を使って XML ドキュメント内のノード——要素、属性、テキスト——をナビゲート・選択するための W3C 標準です。例えば `//book[price>30]/title` は、ドキュメント内のどこにあっても、兄弟要素の `<price>` が30より大きいすべての `<title>` を選択します。XSLT スタイルシート、XML 検証ツール、Web スクレイパー、ブラウザ自動化フレームワーク(Selenium、Playwright)、多くのプログラミング言語の XML ライブラリで使われています。
Chrome、Firefox、Safari、Edge といった主要ブラウザすべてが実装している現行バージョンは XPath 1.0、1999年に策定されたオリジナルの W3C 勧告です。このツールはブラウザの `document.evaluate()` API を通じて、まさにそのネイティブエンジンを使用しているため、ここでの結果はブラウザの DevTools やブラウザ上で動く JavaScript から得られる結果と一致します。後発の XPath 2.0/3.0/3.1 仕様(`for` 式やシーケンス、正規表現マッチングなどの関数を追加)は実装されていません。実際にどのような影響があるかは下記の FAQ を参照してください。
式の結果は2種類のいずれかになります。1つはノードセット(一致した要素・属性・テキストノードが0個以上あり、このツールはそれをシリアライズして1行ずつ件数とともに一覧表示します)、もう1つは `count(//book)` や `//book[1]/title = 'Dune'` のように式自体が値を計算する場合のスカラー値(数値、文字列、真偽値)です。
なぜこれを使うのか?
- Web スクレイパー、Selenium/Playwright のテスト、XSLT スタイルシートにハードコードする前に、XPath 式をデバッグできる。
- 実際の XML/HTML サンプルに対して、あるXPathが期待通りのノードを選択するかを素早く確認できる。
- コードから推測する代わりに、正確な一致件数とシリアライズされた出力を確認できる。
- 不正な XML や無効な XPath 構文に対して、読みにくいスタックトレースではなく、即座に読みやすいエラーが表示される。
- 完全にクライアント側で動作:XML と式がブラウザの外に出ることはありません。
使い方
- 入力ボックスに XML(または HTML)を貼り付けるか編集します。サンプルの書店ドキュメントがあらかじめ入力されているので、すぐに動作を確認できます。
- 式の入力欄に XPath 式を入力するか、あらかじめ入力されているサンプルを編集します。
- 「Evaluate」をクリックします(または式の入力欄で Enter キーを押します)。
- 上部に件数が表示された、一致したノードを確認します。スカラーの結果(数値、文字列、真偽値)はそのまま表示されます。
- XML や式が無効な場合は、結果の代わりに具体的なエラーメッセージが表示されます。
例
入力
XML:
<bookstore>
<book><title>The Great Gatsby</title><price>12.99</price></book>
<book><title>Learning XPath</title><price>34.50</price></book>
<book><title>Dune</title><price>45.00</price></book>
</bookstore>
XPath: //book[price>30]/title出力
✓ 2 node(s) matched
<title>Learning XPath</title>
<title>Dune</title>3冊のうち価格が30を超えるのは2冊だけなので、<title> 要素はちょうど2件返されます。3冊目(Gatsby、$12.99)は正しく除外されています。
XPathとCSSセレクタの違いをひと目で比較
どちらの言語もドキュメントからノードを選択しますが、解決する問題は異なります。この表を参考に、選択したい内容に合ったツールを選んでください。
| 機能 | XPath | CSSセレクタ |
|---|---|---|
| タグ/クラス/IDによる下方向の選択 | 可能 | 可能——通常はより高速 |
| 表示テキスト/テキスト内容による選択 | 可能——`contains(text(),'x')` | 不可 |
| 親/祖先への上方向のたどり | 可能——`//div[span]/..` | 不可(`:has()` が新しい部分的な例外) |
| 兄弟要素の値による比較(例:`price>30`) | 可能 | 不可 |
| ブラウザ外での動作(サーバー側XMLツール、XSLT) | 可能 | 不可——CSSセレクタはブラウザ/DOM専用 |
関連ツール
構造化データ形式を扱っていますか?以下のツールは XPath のテストと相性が良いです。
→ JSONフォーマッター · JWTデコーダー
よくある質問
XPathは何に使われますか?
XPath はパス構文を使って XML や HTML ドキュメントから要素・属性・テキストといったノードを選択します。XSLT 変換や多くの XML 検証ツールを支える選択言語であり、Web スクレイピングやブラウザのテスト自動化(Selenium、Playwright、Cypress)でページ上の要素を特定するためにも広く使われています。特に CSS セレクタだけでは表現できない条件が必要な場合に有用です。
XPathとCSSセレクタ、どちらを使うべきですか?
重なる部分はありますが同じものではありません。XPath は子要素の内容に基づいて親を選択したり(`//div[span='Total']`)、祖先方向へさかのぼったり、表示テキストで選択したり(`//button[contains(text(),'Submit')]`)できます。CSS セレクタはツリーを上方向にたどることもテキスト内容にマッチすることもできません。タグ、クラス、ID で下方向に選択するだけであれば、CSS セレクタのほうが書きやすく、一般に評価も高速です。「このテキストの親を選択したい」「要素が持つ内容で選択したい」という場合に XPath を選んでください。タグやクラスだけで選べる場合はその限りではありません。
このツールはXPath 2.0や3.0の関数に対応していますか?
対応していません——どのブラウザも対応していないためです。ブラウザは `document.evaluate()` を通じて XPath 1.0(1999年の W3C 勧告)を実装しており、このツールもまさにそのネイティブエンジンを使用しているため、ブラウザの DevTools や JavaScript で同じ式を実行した場合と結果は一致します。XPath 2.0/3.0/3.1 で導入された機能(`for` 式、シーケンス、正規表現を使う `matches()` など)は利用できません。ここで使えるのは `contains()`、`starts-with()`、`substring()`、`count()`、`position()`、`last()` といった XPath 1.0 の関数のみです。
知っておくべきよくあるXPath式にはどんなものがありますか?
`//tag` はドキュメント内のあらゆる場所の `<tag>` をすべて選択します。`//tag[@attr='value']` は attr 属性が value と等しい `<tag>` 要素を選択します。`//tag[contains(text(),'x')]` は直下のテキストに x を含む `<tag>` 要素を選択します。`//tag[1]` は各親の中で最初の `<tag>` 兄弟要素を選択します。`//parent/child` は `<parent>` の直接の子である `<child>` 要素を選択します。`count(//tag)` はノードセットの代わりに数値を返します。
このツールはXML名前空間に対応していますか?
名前空間を使わない一般的なケースのみきれいに対応しています。手書きやスクレイピングされた XML/HTML の大多数はこれに該当します。ドキュメントのルート要素に `xmlns="..."` のような XML 名前空間が宣言されている場合、`document.evaluate` はプレフィックスと URI を対応付ける名前空間対応のリゾルバ関数を必要としますが、このシンプルなツールはそれを設定していません。そのため、名前空間付き XML に対する式は、見た目上は正しくても一致件数が0件になることがあります。これはバグではなく既知の制限です。サンプルから名前空間宣言を取り除くか、代わりに local-name() 関数(例:`//*[local-name()='title']`)を使う方法があります。
XMLやXPath式はサーバーに送信されますか?
送信されません。すべてブラウザに組み込まれた `DOMParser` と `document.evaluate()`——ブラウザが内部的にすでに使っているのと同じエンジン——を使ってローカルで処理されます。入力または貼り付けた内容が端末の外に出ることはありません。