HTMLパース完全ガイド！初心者も分かりやすい解説とサンプルコード10選

はじめに

この記事を読めば、HTMLパースの基本から応用までを理解し、実践できるようになります。

●HTMLパースとは？

HTMLパースとは、HTML文書を解析し、プログラムで扱いやすい形式に変換することです。

ウェブスクレイピングやウェブページの分析に欠かせない技術です。

●HTMLパースの基本

○HTMLパースの目的

HTMLパースの主な目的は、ウェブページから特定の情報を抽出したり、ウェブページの構造を分析することです。

また、ウェブページをカスタマイズする際にも利用されます。

○HTMLパースの仕組み

HTMLパースは、HTMLのタグや属性を解析し、木構造（DOMツリー）に変換することで、プログラムで扱いやすくなります。

この変換を行うために、JavaScriptやPythonなどのプログラミング言語と、それに対応するライブラリが使用されます。

●HTMLパースの作り方とサンプルコード

○JavaScriptを使ったHTMLパース

JavaScriptでは、DOMParserを使ってHTMLをパースすることができます。

下記はサンプルコードです。

const htmlString = `
  <div>
    <h1>タイトル</h1>
    <p>本文です。</p>
  </div>
`;

const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, "text/html");

console.log(doc.querySelector("h1").textContent); // "タイトル"
console.log(doc.querySelector("p").textContent); // "本文です。"

○Pythonを使ったHTMLパース

Pythonでは、BeautifulSoupというライブラリを使ってHTMLをパースすることができます。

from bs4 import BeautifulSoup

html_string = """
  <div>
    <h1>タイトル</h1>
    <p>本文です。</p>
  </div>
"""

soup = BeautifulSoup(html_string, "html.parser")

print(soup.find("h1").text)  # "タイトル"
print(soup.find("p").text)   # "本文です。"

●HTMLパースの使い方

○ウェブスクレイピングでの応用

HTMLパースはウェブスクレイピングにおいて重要な役割を果たします。

ウェブページから特定の情報を抽出する際に、HTMLパースを使ってデータを取得します。

例えば、あるニュースサイトから記事のタイトルや投稿日時を抽出したい場合、HTMLパースを用いて取得します。

下記はJavaScriptでのサンプルコードです。

const axios = require("axios");
const { JSDOM } = require("jsdom");

async function fetchNewsTitles() {
  const response = await axios.get("https://example.com/news");
  const dom = new JSDOM(response.data);
  const titles = [...dom.window.document.querySelectorAll(".news-title")].map(
    (title) => title.textContent
  );
  console.log(titles);
}

fetchNewsTitles();

○ウェブページの分析

ウェブページの構造やコンテンツを分析する際にも、HTMLパースが利用されます。

例えば、ウェブページのリンク構造を調べたい場合、HTMLパースを用いてリンク情報を取得できます。

下記はPythonでのサンプルコードです。

import requests
from bs4 import BeautifulSoup

url = "https://example.com"
response = requests.get(url)
soup = BeautifulSoup(response.text, "html.parser")

links = [a["href"] for a in soup.find_all("a", href=True)]
print(links)

●HTMLパースの対処法と注意点

○エンコーディングに関する注意点

HTMLパースを行う際には、文字エンコーディングに注意が必要です。

異なるエンコーディングのHTMLをパースしようとすると、文字化けや解析エラーが発生することがあります。

HTMLを取得する際に、適切なエンコーディングを指定することが重要です。

○ウェブページ構造の変更への対応

ウェブページの構造が変更されると、HTMLパースによって取得していたデータが正しく取得できなくなることがあります。

そのため、パース対象のウェブページが変更された場合には、プログラムを修正して対応する必要があります。

●HTMLパースのカスタマイズ

○データ抽出のカスタマイズ

HTMLパースを行う際に、特定の条件に一致するデータのみを抽出するようにカスタマイズすることができます。

例えば、あるウェブサイトから価格が一定範囲内の商品情報のみを抽出したい場合、HTMLパースをカスタマイズして対応することが可能です。

○タグの操作によるカスタマイズ

HTMLパースを用いて、ウェブページのタグを操作することもできます。

例えば、特定のタグを削除したり、属性を変更したりすることが可能です。

これにより、ウェブページをカスタマイズしたり、解析しやすい形式に変換することができます。

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

○ニュースサイトからの情報抽出

ニュースサイトから記事のタイトルや投稿日を抽出する例です。

下記はPythonでのサンプルコードです。

import requests
from bs4 import BeautifulSoup

response = requests.get("https://example.com/news")
soup = BeautifulSoup(response.text, "html.parser")

titles = [h1.text for h1 in soup.find_all("h1", class_="article-title")]
dates = [time.text for time in soup.find_all("time", class_="article-date")]

print(titles)
print(dates)

○商品価格の抽出と比較

複数のウェブサイトから商品価格を抽出し、比較する例です。

下記はJavaScriptでのサンプルコードです。

const axios = require("axios");
const { JSDOM } = require("jsdom");

async function fetchProductPrices(urls) {
  const prices = [];

  for (const url of urls) {
    const response = await axios.get(url);
    const dom = new JSDOM(response.data);
    const price = parseFloat(
      dom.window.document.querySelector(".product-price").textContent
    );
    prices.push(price);
  }

  return prices;
}

(async () => {
  const urls = [
    "https://example1.com/product",
    "https://example2.com/product",
    "https://example3.com/product",
  ];

  const prices = await fetchProductPrices(urls);
  console.log(prices);

  const minPrice = Math.min(...prices);
  console.log(`最安値: ${minPrice}`);
})();