オタクでもわかるXPath入門

2025年11月1日web

アイドルオタクや声豚はたまにXPathが必要になるときがありますよね？

え？無い？

必要ある人向けにクッソ簡単に説明していきます。

Contents

1. XPathとは
2. XPathの書き方
3. XPathの使用例
4. さいごに

XPathとは

webサイトはHTML(文字情報)とCSS(デザイン情報)に分かれてます。
CSSっていうのは、ウェブページの「見た目」や「デザイン」を担当するやつです。

家づくりに例えると、わかりやすいです。

HTML（エイチティーエムエル）: 「ここに柱を立てる」「ここに壁を作る」「ここにドアを置く」といった、家の「骨組み」や「部品」を決めるものです。
CSS（シーエスエス）: 「壁の色を青く塗る」「ドアを木製にする」といった、その骨組みや部品を「どう飾るか（デザインするか）」を決めるものです。

HTMLだけだと、文字や画像がただ上から順に並んでいるだけで、とてもシンプルです。

じゃあXPathって何？となりますが、

これは、そのHTMLの骨組みの中から、「このボタン」とか「あの入力欄」って場所をピンポイントで見つけ出すための「住所の書き方」みたいなもんです。

CSSが「壁を青く塗れ」っていうデザインの指示だとしたら、XPathは「2階の奥の部屋の、窓の右にある壁」っていう場所を特定する指示、そのものです。

XPathの書き方

開発者ツールで住所を調べる

まずはChromeかなんかでF12を押して開発者ツールを開きましょう。

調べたいボタンとか入力欄の上で右クリックして「検証」でもOKです。

左上にある矢印のアイコン（①）をクリックします。
調べたいボタンとか入力欄（②）をクリックします。
すると、開発者ツールのHTMLが書いてあるところ（③）がハイライトされます。そこがそいつの「骨組み」です。

ハイライトされたHTML（③）の上で右クリック -> コピー -> XPathをコピーを選んでみましょう。

こんなんがコピーされるはずです。

/html/body/div[2]/main/div/div/div[1]/div[2]/div/div[3]/select

なんなんですかこれは……

ってなりますよね。これは「絶対パス」と言い、クソ真面目な住所の書き方です。「108-0073 東京都港区三田5丁目2−30 SELENE STUDIO B2」みたいな。

でも実際は「SLELENE B2」で伝わりますよね

もっと柔軟な書き方（相対パス）を説明していきます。こっちのほうが5億倍使います。

柔軟な書き方（相対パス）

HTMLはこんな感じで書かれてます。

HTML

<タグ名 属性名="内容" 属性名="内容"...>
    <タグ名 属性名="内容>
        ...
    </タグ名>
</タグ名>

これをXPathで指定するときの基本ルールはこれだけです。

//: 「ページのどこからでも探してこい」っていうおまじない。だいたい先頭につけます。
*: 「タグ名は何でもいいよ」（divとかbuttonとか）。
[...]: 「カッコの中の条件に合うやつ」。これが一番大事。
@属性名="内容": 「属性名が"内容"ってやつ」。例えば@class="button"とか。属性の前には@がつきます。

簡単に言うと//タグ名[@属性名="内容"]と書きます。

実際のHTMLベースだと、//*[@class="text-box"]みたいに使います。

意味は「ページのどこでもいいから(//)、タグ名は何でもよくて(*)、class属性が"text-box"なやつ([@class="…"])を探せ」です。

親の見分け方

HTML

<div class="family">
    <div class="mamma" lang="kansai">
        <p>ほな、長生きしぃや、年金もらいまくりましょうか</p>
        <p>ガキ、あんたらのあしたの予定おしえーや</p>
        <div class="wai" wizard="true">
            <p>明日はselene b2にライブを見に行きます。</p>
        </div>
        <div class="otoutto" girl-friend="true">
            <p>彼女とデートです。</p>
        </div>
    </div>
</div>

自分に対して左に1つ飛び出てるのが親要素です。（waiから見てmammaが親）
自分から右に1つ入り込んでるのが子要素です。（mammaから見てwaiが子）
おなじ階層にいるのが兄弟要素です。（waiとotouttoは兄弟）

この親子関係もXPathで書けます。

上記でいうなら

//*[@class="mamma"]/p ならマッマのセリフを指定できて
//*[@class="family"] // pならセリフすべてを指定できます。

/ひとつなら直下のタグを取得、//二つならそれより下のものなら何でも取れるという感じです。

XPathの使用例

さっきの家族の会話のHTMLを使って、便利な指定方法を見てみましょう。

例1：N番目の要素を指定する

マッマのセリフ（pタグ）は2つあるけど、2番目のセリフ（ガキ、あんたらの〜）だけ指定したい時

//*[@class="mamma"]/p[2]

こんな感じで書けます。

//*[@class="mamma"]
- ページのどこか(//)にある、class="mamma"なやつ。
/p[2]
- 1で見つけたやつの**直下(/)**にいる、<p>タグで、
- [2]番目のやつ。
- [1]にすれば、1番目の「ほな、長生きしぃや〜」が選べます。

例2：特定の文字で選ぶ

「弟の発言（彼女とデートです。）を指定したいけど、何番目かわからん！でも’彼女’って文字が入ってるのは確実！」って時。

//p[contains(text(), '彼女')]

これも分解します。

//p
- ページのどこか(//)にある、<p>タグ（段落）全部。
[contains(text(), '彼女')]
- これがキモです。
- text()は「そこに表示されてる文字」のこと。
- contains(...)は「…が含まれてる」っていう意味。
- つまり、「表示されてる文字に '彼女’ ってのが含まれてるやつ」を探します。
- これなら「明日は彼女とデートです。」みたいに文章が変わっても、「彼女」って文字さえ入ってれば見つけてくれます。クソ便利。