読み込み中...

HTMLとXPathをマスターする3つのステップ

初心者がHTMLとXPathを学ぶための記事 HTML
2023.04.06
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●HTMLとXPathとは

ウェブページの解析には、欠かせない二つの要素があります。

HTMLとXPathです。
この二つを理解することで、ウェブページから必要な情報を効率的に抽出できるようになります。

○HTMLとは

インターネット上で見るウェブページは、HTMLという言語で作られています。


HTMLは、ウェブページの骨組みを形作る重要な要素です。

テキストや画像、リンクなどの配置を決定し、ブラウザがそれを解釈して私たちに見せてくれるのです。

○XPathとは

XPathは、HTMLやXMLといった文書の中から、特定の部分を指し示すための言語です。


例えるなら、大きな図書館の中から目的の本を探し出すための地図のようなものです。

ウェブスクレイピングという、ウェブページから自動的にデータを収集する作業において、XPathはとても重宝されます。

●HTMLとXPathの使い方

それでは、HTMLとXPathの具体的な使い方を見ていきましょう。

○HTMLの基本構造

HTMLの基本構造を理解することは、ウェブページ解析の第一歩です。

ここでは、シンプルなHTMLの例を紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、世界！</h1>
</body>
</html>

このコードは、ウェブページの基本的な骨格を表しています。

<html>タグで全体を囲み、その中に<head>と<body>があります。

<head>にはページの設定情報が、<body>には実際に表示される内容が記述されます。

○XPathの基本構造

XPathは、HTMLやXML文書の中の特定の要素や属性を指定するための言語です。

次のHTMLを例に、XPathの使い方を説明します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <div class="container">
    <h1>こんにちは、世界！</h1>
    <p>これはサンプルページです。</p>
  </div>
</body>
</html>

このHTMLから<h1>タグの中身を取得したい場合、XPathでは//h1/text()と記述します。

これは「どこにあっても構わないので、h1タグを見つけて、その中のテキストを取得せよ」という意味になります。

●XPathの応用例とサンプルコード

XPathの力を最大限に活用するには、様々な状況に応じた使い方を知る必要があります。

ここでは、実践的な応用例を紹介します。

○応用例1：複数の要素を取得する

ウェブページには、同じタグが複数存在することがよくあります。

例えば、次のようなHTMLを考えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</body>
</html>

このHTMLから全ての<li>タグの内容を取得したい場合、XPathでは//li/text()と記述します。

これにより、「リスト1」「リスト2」「リスト3」の3つの項目を一度に取得できます。

○応用例2：特定の属性を持つ要素を取得する

HTMLの要素には、クラスやIDといった属性が付けられていることがあります。

この属性を利用して、より細かく要素を指定することができます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <div class="container">
    <p class="highlight">強調されたテキスト</p>
    <p>通常のテキスト</p>
  </div>
</body>
</html>

この例で、class="highlight"という属性を持つ<p>タグの内容だけを取得したい場合、XPathでは//p[@class="highlight"]/text()と記述します。

これで、「強調されたテキスト」のみを取得することができます。

●注意点と対処法

XPathを使用する際には、いくつかの注意点があります。

これを把握しておくことで、より効果的にウェブページの解析を行うことができます。

一つ目の注意点は、HTML文書の構造変更です。

ウェブサイトの更新によってHTMLの構造が変わると、それまで使っていたXPathが機能しなくなる可能性があります。

このような場合は、新しい構造に合わせてXPathを更新する必要があります。

二つ目の注意点は、XPathの複雑さです。

XPathが複雑になればなるほど、解析の速度が遅くなる傾向があります。

そのため、できるだけシンプルで効率的なXPathを使用することが望ましいです。

●カスタマイズ方法

XPathには、より高度な使い方もあります。

例えば、条件に合った要素を絞り込むために、論理演算子を使用することができます。

次のHTMLを例に説明します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <div class="container">
    <p class="highlight">強調されたテキスト1</p>
    <p class="highlight" id="second">強調されたテキスト2</p>
    <p>通常のテキスト</p>
  </div>
</body>
</html>

この HTML から、class="highlight"属性を持ち、かつid="second"属性を持たない<p>タグの内容を取得したい場合、XPathは次のようになります。

//p[@class="highlight" and not(@id="second")]/text()

この XPath は、「class属性が”highlight”で、かつid属性が”second”ではない p タグのテキストを取得せよ」という意味になります。

これで、「強調されたテキスト1」のみを取得することができます。

まとめ

HTMLとXPathについて、基本から応用まで幅広く解説しました。

この知識はウェブページの自動解析やデータ収集に大変役立ちます。

初めは難しく感じるかもしれませんが、実際にコードを書いて試してみることで、理解が深まっていくでしょう。

ウェブ上には膨大な情報がありますが、HTMLとXPathを味方につければ、その海の中から必要な真珠を見つけ出すことができるのです。

ぜひ、この記事で学んだことを活かして、あなたなりのウェブページ解析に挑戦してみてください。