ようこそ！リンクフリーです！

本サイトでは、アフィリエイト広告やプロモーション記事が含まれている場合があります。

オタクでもわかるXPath入門

2025年11月1日

オタクでもわかるXPath入門

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

え？無い？

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

XPathとは

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

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

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

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

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

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

XPathの書き方

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

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

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

  1. 左上にある矢印のアイコン（①）をクリックします。
  2. 調べたいボタンとか入力欄（②）をクリックします。
  3. すると、開発者ツールの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で指定するときの基本ルールはこれだけです。

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

実際の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>

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

上記でいうなら

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

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

XPathの使用例

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

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

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

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

こんな感じで書けます。

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

例2：特定の文字で選ぶ

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

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

これも分解します。

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

さいごに

僕が書いた内容はさわりしか書いてないので、詳しく知りたい方は調べたり、本読んだりして学んでください。

関連記事

web

Posted by 音質派