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

はじめに

HTMLパースは、ウェブ開発やデータ分析で欠かせない重要なスキルです。

この記事では、HTMLパースの基礎から応用まで、詳しく解説していきます。

初心者の方でも理解しやすいよう、段階的に説明していきますので、最後まで読み進めることで、実践的なHTMLパースのスキルを身につけることができるでしょう。

●HTMLパースとは？

HTMLパースは、ウェブ上で重要な役割を果たす技術です。

HTMLという言語で書かれたウェブページを、コンピュータプログラムが理解しやすい形に変換する過程を指します。

この技術は、ウェブスクレイピングやウェブページの分析、さらにはウェブアプリケーションの開発など、様々な場面で活用されています。

HTMLパースを使うことで、ウェブページの中から必要な情報だけを取り出したり、ページの構造を詳しく調べたりすることができます。

例えば、ニュースサイトから最新の記事タイトルを集めたり、オンラインショップの商品価格を比較したりする際に、HTMLパースが大きな力を発揮します。

●HTMLパースの基本

HTMLパースの基本を理解することは、ウェブ開発者にとって重要なステップです。

ここでは、HTMLパースの目的と仕組みについて詳しく見ていきましょう。

○HTMLパースの目的

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

例えば、ある企業のウェブサイトから全ての従業員の名前を抽出したい場合や、ブログサイトの記事の構造を調べたい場合に、HTMLパースが役立ちます。

また、ウェブページをカスタマイズする際にも、HTMLパースは重要な役割を果たします。

既存のウェブページの内容を変更したり、新しい要素を追加したりする際に、HTMLパースを使って既存の構造を解析し、必要な修正を加えることができます。

○HTMLパースの仕組み

HTMLパースの仕組みは、人間が文章を読む過程に似ています。

まず、HTMLのタグや属性を一つずつ読み取り、それぞれの要素の関係性を理解します。

そして、それらの情報を木構造（DOMツリー）に変換します。

DOMツリーは、Document Object Model（文書オブジェクトモデル）と呼ばれる形式で、ウェブページの構造を表現します。

この形式に変換することで、プログラムがウェブページの内容を効率的に操作できるようになります。

HTMLパースを行うには、JavaScriptやPythonなどのプログラミング言語と、それに対応するライブラリを使用します。

これらのツールを使うことで、複雑なHTMLの構造を簡単に解析し、必要な情報を取り出すことができるのです。

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

HTMLパースを実際に行うには、プログラミング言語とそれに対応したライブラリを使用します。

ここでは、JavaScriptとPythonを使ったHTMLパースの基本的な方法とサンプルコードを紹介します。

○JavaScriptを使ったHTMLパース

JavaScriptでHTMLをパースする方法は、実行環境によって異なります。

ブラウザ環境では、DOMParserというオブジェクトを使用して同期的にHTMLをパースできます。

一方、Node.js環境では、jsdomなどの外部ライブラリを使用する必要があります。

まず、ブラウザ環境での基本的なサンプルコードを見てみましょう。

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); // "本文です。"

このコードは同期的に処理されます。つまり、parseFromStringメソッドは即座にパース結果を返し、次の行のコードがすぐに実行されます。

この方法は、すでに手元にあるHTML文字列を処理する場合に適しています。

しかし、実際のウェブ開発では、外部のウェブサイトからHTMLを取得してパースする必要があることが多く、その場合は非同期処理が必要になります。

npm install jsdom

インストール後、次のように使用します。

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

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

const dom = new JSDOM(htmlString);
const document = dom.window.document;

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

○Pythonを使ったHTMLパース

PythonでHTMLをパースする際には、BeautifulSoupというライブラリがよく使われます。

BeautifulSoupは外部ライブラリのため、使用前にインストールが必要です。

コマンドラインで次のコマンドを実行してインストールします。

pip install beautifulsoup4

また、HTMLパーサーも必要です。標準ライブラリのhtml.parserを使用する場合は追加インストールは不要ですが、より高速なlxmlパーサーを使用する場合は次のようにインストールします。

pip install lxml

インストール完了後、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)   # "本文です。"

このコードでは、まずBeautifulSoupをインポートし、HTMLの文字列を定義しています。

BeautifulSoupオブジェクトを作成する際、第二引数にパーサーを指定します。”html.parser”は標準のパーサーで、”lxml”を指定することも可能です。

findメソッドを使って特定の要素を選択し、textプロパティで要素のテキスト内容を取得しています。

●HTMLパースの使い方

HTMLパースは、ウェブ開発やデータ分析の様々な場面で活用されています。

ここでは、HTMLパースの代表的な使用方法について、詳しく解説します。

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

ウェブスクレイピングは、HTMLパースの最も一般的な応用例の一つです。

ウェブページから自動的に情報を収集し、分析や再利用を行うために使われます。

例えば、ニュースサイトから最新の記事タイトルを収集したり、Eコマースサイトから商品情報を抽出したりする際に、HTMLパースが重要な役割を果たします。

ただし、ウェブスクレイピングを行う際には、必ず以下の点を確認し、遵守する必要があります。

まず、対象サイトのrobots.txtファイルを確認し、スクレイピングが許可されているかを確認します。また、サイトの利用規約も必ず読み、スクレイピングが禁止されていないことを確認してください。さらに、サーバーに負荷をかけないよう、適切なリクエスト間隔（通常は1秒以上）を設定し、User-Agentヘッダーを適切に設定することも重要です。

ここでは、これらの注意点を考慮したJavaScriptのサンプルコードを紹介します。

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

// 待機時間を設定する関数
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchNewsTitles() {
  try {
    // User-Agentの設定
    const config = {
      headers: {
        'User-Agent': 'Mozilla/5.0 (compatible; NewsBot/1.0; +http://example.com/bot)'
      }
    };
    
    // リクエスト前に待機（前回のリクエストから1秒以上空ける）
    await sleep(1000);
    
    const response = await axios.get("https://example.com/news", config);
    const dom = new JSDOM(response.data);
    const titles = [...dom.window.document.querySelectorAll(".news-title")].map(
      (title) => title.textContent
    );
    console.log(titles);
  } catch (error) {
    console.error("エラーが発生しました:", error.message);
  }
}

fetchNewsTitles();

このコードでは、axiosライブラリを使ってウェブページを取得し、JSDOMを使ってHTMLをパースしています。

User-Agentヘッダーを設定してボットであることを明示し、リクエスト間に1秒の待機時間を設けることで、サーバーへの負荷を軽減しています。また、エラーハンドリングも実装し、問題が発生した場合の対処も行っています。

○ウェブページの分析

HTMLパースは、ウェブページの構造やコンテンツを分析する際にも重要です。

例えば、SEO（検索エンジン最適化）の観点からウェブページの構造を分析したり、ウェブサイトのリンク構造を調べたりする際に使用されます。

ここでは、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)

このコードでは、requestsライブラリを使ってウェブページを取得し、BeautifulSoupを使ってHTMLをパースしています。

find_allメソッドを使って、ページ内の全てのリンク（aタグ）を取得し、そのhref属性の値を抽出しています。

これらの例は、HTMLパースの基本的な使い方を示していますが、実際の応用場面では、より複雑な処理が必要になることもあります。

例えば、複数ページにわたる情報の収集や、動的に生成されるコンテンツの解析などが挙げられます。

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

HTMLパースを効果的に行うためには、いくつか注意点があります。

ここでは、HTMLパースを行う際によく遭遇する問題とその対処法について説明します。

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

HTMLパースを行う際、最も注意すべき点の一つが文字エンコーディングです。

ウェブページは様々な言語で書かれており、それぞれ異なるエンコーディングを使用していることがあります。

適切なエンコーディングを指定しないと、文字化けや解析エラーが発生する可能性があります。

例えば、日本語のウェブページを解析する際には、UTF-8やShift_JISなどのエンコーディングを正しく指定する必要があります。

Pythonで適切なエンコーディングを指定してHTMLをパースする例を見てみましょう。

import requests
from bs4 import BeautifulSoup

url = "https://example.com"
response = requests.get(url)
response.encoding = response.apparent_encoding  # 自動的にエンコーディングを推測

soup = BeautifulSoup(response.text, "html.parser")
print(soup.title.string)

このコードでは、requestsライブラリのapparent_encodingプロパティを使用して、ウェブページのエンコーディングを自動的に推測しています。

これで、多くの場合で適切なエンコーディングを使用してHTMLをパースすることができます。

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

ウェブページの構造は常に変化する可能性があります。

ウェブサイトのデザインが更新されたり、HTMLの構造が変更されたりすると、それまで正常に動作していたHTMLパースのプログラムが突然動かなくなることがあります。

この問題に対処するには、定期的にパースプログラムをチェックし、必要に応じて更新することが重要です。

また、できるだけ柔軟性のあるセレクタを使用することも有効です。

例えば、クラス名やID名が変更される可能性が高い場合は、タグの階層構造を利用したセレクタを使用するなどの工夫が必要です。

より柔軟なセレクタを使用したJavaScriptのサンプルコードを紹介します。

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

async function fetchArticleContent() {
  const response = await axios.get("https://example.com/article");
  const dom = new JSDOM(response.data);
  const article = dom.window.document.querySelector("article");

  const title = article.querySelector("h1, h2, h3")?.textContent;
  const content = article.querySelector("div > p")?.textContent;

  console.log({ title, content });
}

fetchArticleContent();

このコードでは、articleタグ内の最初の見出し（h1, h2, h3のいずれか）をタイトルとして、divタグ直下のpタグを本文として取得しています。

このように、より一般的なセレクタを使用することで、ページ構造の小さな変更に対してある程度の耐性を持たせることができます。

HTMLパースを行う際は、これらの注意点を常に意識し、適切に対処することが重要です。

エンコーディングの問題やウェブページ構造の変更に適切に対応することで、より信頼性の高いHTMLパースプログラムを作成することができます。

○セキュリティに関する注意点

HTMLパースを行う際、特に外部のウェブサイトから取得したコンテンツを扱う場合には、セキュリティ面での注意が必要です。

悪意のあるコードが含まれている可能性があるため、適切な対策を講じることが重要です。

まず、取得したHTMLコンテンツをそのままウェブページに表示する場合は、XSS（クロスサイトスクリプティング）攻撃のリスクがあります。

例えば、悪意のあるJavaScriptコードが埋め込まれている可能性があるため、適切なサニタイズ処理が必要です。

JavaScriptでセキュアなHTMLパースを行う例を見てみましょう。

const { JSDOM } = require("jsdom");
const createDOMPurify = require("dompurify");

async function parseHTMLSecurely(htmlString) {
    // JSDOMを使用してウィンドウオブジェクトを作成
    const window = new JSDOM("").window;
    const DOMPurify = createDOMPurify(window);
    
    // HTMLをサニタイズ
    const cleanHTML = DOMPurify.sanitize(htmlString, {
        ALLOWED_TAGS: ["h1", "h2", "p", "span", "div"],
        ALLOWED_ATTR: ["class", "id"]
    });
    
    // サニタイズされたHTMLをパース
    const dom = new JSDOM(cleanHTML);
    const document = dom.window.document;
    
    // 安全にデータを抽出
    const title = document.querySelector("h1")?.textContent || "";
    const content = document.querySelector("p")?.textContent || "";
    
    return { title, content };
}

// 使用例
const untrustedHTML = `
    <div>
        <h1>タイトル</h1>
        <p>本文です。</p>
        <script>alert("悪意のあるコード")</script>
    </div>
`;

parseHTMLSecurely(untrustedHTML).then(result => {
    console.log(result); // scriptタグは除去される
});

このコードでは、DOMPurifyライブラリを使用してHTMLをサニタイズしています。

ALLOWED_TAGSとALLOWED_ATTRで許可するタグと属性を明示的に指定することで、悪意のあるコードの実行を防いでいます。

Pythonでも同様のセキュリティ対策が必要です。

import requests
from bs4 import BeautifulSoup
import bleach

def parse_html_securely(url):
    try:
        # タイムアウトを設定してリクエスト
        response = requests.get(url, timeout=10)
        
        # ステータスコードを確認
        response.raise_for_status()
        
        # HTMLをサニタイズ
        allowed_tags = ["h1", "h2", "p", "span", "div", "a"]
        allowed_attributes = {"a": ["href"], "div": ["class"]}
        
        clean_html = bleach.clean(
            response.text,
            tags=allowed_tags,
            attributes=allowed_attributes,
            strip=True
        )
        
        # サニタイズされたHTMLをパース
        soup = BeautifulSoup(clean_html, "html.parser")
        
        return soup
        
    except requests.exceptions.RequestException as e:
        print(f"リクエストエラー: {e}")
        return None
    except Exception as e:
        print(f"予期しないエラー: {e}")
        return None

# 使用例
url = "https://example.com"
soup = parse_html_securely(url)

if soup:
    title = soup.find("h1")
    if title:
        print(f"タイトル: {title.text}")

このコードでは、bleachライブラリを使用してHTMLをサニタイズし、許可されたタグと属性のみを残すようにしています。

また、リクエストにタイムアウトを設定し、エラーハンドリングも適切に行っています。

さらに、ウェブスクレイピングを行う際は、取得したデータの保存方法にも注意が必要です。

データベースに保存する場合は、SQLインジェクション攻撃を防ぐため、パラメータ化クエリを使用することが重要です。

セキュリティ対策は、HTMLパースを行う上で欠かせない要素です。

常に「信頼できないデータは全て危険である」という前提で、適切な対策を講じることが重要です。

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

HTMLパースの基本的な使い方を理解したら、次はより高度な活用方法を理解しましょう。

HTMLパースをカスタマイズすることで、より精密な情報抽出や、ウェブページの効果的な操作が可能になります。

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

HTMLパースを行う際、単純にタグやクラス名だけでなく、より複雑な条件に基づいてデータを抽出したいケースがあります。

例えば、特定の価格範囲内の商品だけを抽出したり、特定の日付以降に投稿された記事のみを取得したりする場合です。

このようなカスタマイズされたデータ抽出は、ビジネス分析や市場調査などで非常に有用です。

ここでは、Pythonを使って特定の価格範囲内の商品情報のみを抽出するサンプルコードを見てみましょう。

import requests
from bs4 import BeautifulSoup

def extract_products(url, min_price, max_price):
    response = requests.get(url)
    soup = BeautifulSoup(response.text, "html.parser")
    products = soup.find_all("div", class_="product")

    filtered_products = []
    for product in products:
        name = product.find("h2", class_="product-name").text.strip()
        price = float(product.find("span", class_="price").text.strip().replace("$", ""))

        if min_price <= price <= max_price:
            filtered_products.append({"name": name, "price": price})

    return filtered_products

url = "https://example.com/products"
min_price = 50
max_price = 100

result = extract_products(url, min_price, max_price)
print(result)

このコードでは、ウェブページから全ての商品情報を取得した後、指定された価格範囲内の商品のみをフィルタリングしています。

このように、HTMLパースの結果に対して追加の処理を行うことで、より細かな条件に基づいたデータ抽出が可能になります。

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

HTMLパースを用いて、ウェブページの内容を変更したり、新しい要素を追加したりすることも可能です。

これは、ウェブスクレイピングだけでなく、ウェブページの動的な修正や、コンテンツの最適化などにも活用できます。

JavaScriptを使ってウェブページの特定の要素を修正するサンプルコードにも触れておきましょう。

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

function modifyWebpage(html) {
    const dom = new JSDOM(html);
    const document = dom.window.document;

    // 全ての段落（p）タグに新しいクラスを追加
    document.querySelectorAll("p").forEach(p => {
        p.classList.add("modified-paragraph");
    });

    // 特定のID（"old-header"）を持つ要素のテキストを変更
    const header = document.getElementById("old-header");
    if (header) {
        header.textContent = "新しいヘッダーテキスト";
    }

    // 新しい要素を追加
    const newElement = document.createElement("div");
    newElement.textContent = "この要素は動的に追加されました。";
    document.body.appendChild(newElement);

    return dom.serialize();
}

const originalHtml = `
    <html>
        <body>
            <h1 id="old-header">古いヘッダー</h1>
            <p>これは段落です。</p>
            <p>これは別の段落です。</p>
        </body>
    </html>
`;

const modifiedHtml = modifyWebpage(originalHtml);
console.log(modifiedHtml);

このコードでは、HTMLの内容を解析し、特定の要素にクラスを追加したり、テキストを変更したり、新しい要素を追加したりしています。

このような操作は、ウェブページの内容を動的に変更する必要がある場合に非常に有用です。

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

ここまでHTMLパースの基本と応用について学んできました。ここでは、より実践的な応用例とそのサンプルコードを紹介します。

この例を通じて、HTMLパースがどのように実際のプロジェクトで活用されるか見ていきましょう。

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

ニュースサイトから最新の記事タイトルと投稿日時を抽出する例を見てみましょう。

この技術は、ニュース分析や情報収集の自動化に役立ちます。

Pythonを使用したコードですが、みていきましょう。

import requests
from bs4 import BeautifulSoup
from datetime import datetime

def extract_news(url):
    response = requests.get(url)
    soup = BeautifulSoup(response.text, "html.parser")

    articles = soup.find_all("article", class_="news-item")
    news_data = []

    for article in articles:
        title = article.find("h2", class_="article-title").text.strip()
        date_str = article.find("time", class_="article-date")["datetime"]
        
        # Python 3.7以降の場合
        try:
            date = datetime.fromisoformat(date_str)
        except AttributeError:
            # Python 3.6以前の場合はdateutilライブラリを使用
            from dateutil import parser
            date = parser.parse(date_str)

        news_data.append({
            "title": title,
            "date": date.strftime("%Y-%m-%d %H:%M:%S")
        })

    return news_data

url = "https://example.com/news"
news = extract_news(url)

for item in news:
    print(f"タイトル: {item['title']}")
    print(f"投稿日時: {item['date']}")
    print("---")

このコードでは、ニュースサイトのHTMLを解析し、各記事のタイトルと投稿日時を抽出しています。

datetime.fromisoformatはPython 3.7以降で使用可能なメソッドのため、古いバージョンとの互換性を考慮してtry-except文を使用しています。Python 3.6以前の環境では、dateutilライブラリのparserを使用して日付文字列を解析します。dateutilライブラリはpip install python-dateutilでインストール可能です。

○商品価格の抽出と比較

複数のウェブサイトから同じ商品の価格を抽出し、比較する例を見てみましょう。

この技術は、価格比較サイトの構築や市場分析に活用できます。

JavaScriptを使ったサンプルコードを見てみましょう。

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

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

  for (const url of urls) {
    try {
      const response = await axios.get(url);
      const dom = new JSDOM(response.data);
      const priceElement = dom.window.document.querySelector(".product-price");

      if (priceElement) {
        // 価格文字列から数値を抽出（通貨記号や余分な文字を除去）
        const priceText = priceElement.textContent.trim();
        // より厳密な価格抽出：最初の数値部分のみを取得
        const priceMatch = priceText.match(/([0-9]+(?:\.[0-9]{1,2})?)/);
        
        if (priceMatch) {
          const price = parseFloat(priceMatch[1]);
          if (!isNaN(price)) {
            prices.push({ url, price });
          } else {
            console.log(`価格の解析に失敗しました: ${url} (${priceText})`);
          }
        } else {
          console.log(`有効な価格が見つかりません: ${url} (${priceText})`);
        }
      } else {
        console.log(`価格要素が見つかりません: ${url}`);
      }
    } catch (error) {
      console.error(`エラーが発生しました (${url}):`, error.message);
    }
  }

  return prices;
}

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

  const prices = await fetchProductPrices(urls);

  if (prices.length > 0) {
    const sortedPrices = prices.sort((a, b) => a.price - b.price);

    console.log("価格比較結果:");
    sortedPrices.forEach(({ url, price }) => {
      console.log(`${url}: $${price.toFixed(2)}`);
    });

    const cheapest = sortedPrices[0];
    console.log(`\n最安値: $${cheapest.price.toFixed(2)} (${cheapest.url})`);
  } else {
    console.log("価格情報を取得できませんでした。");
  }
}

comparePrices();

このコードでは、複数のウェブサイトから商品価格を抽出し、最安値を含む比較結果を表示しています。

価格の抽出には正規表現を使用し、通貨記号や余分な文字を除去しながら、適切な数値形式（整数または小数点以下2桁まで）の価格のみを取得するようにしています。

エラーハンドリングも実装されており、価格の解析に失敗した場合や特定のサイトでエラーが発生しても処理が続行されます。

また、結果を価格順にソートすることで、ユーザーにとってより有用な情報を提供しています。