jsdomとxmldomでXMLを自在に操る！Node.jsプログラミング

2024-06-16

Node.jsでDOMParserを使う：詳細解説

このチュートリアルでは、Node.jsでDOMParserを使用してXMLを解析する方法について解説します。

DOMParserとは

DOMParserは、HTMLやXML文書を解析し、それを操作するためのDOM（Document Object Model）ツリーを作成するJavaScript APIです。ブラウザ環境でよく使用されますが、Node.js環境でも利用できます。

Node.jsでDOMParserを使う

Node.jsにはネイティブなDOMParser実装が存在しないため、以下のいずれかの方法で実現する必要があります。

サードパーティ製ライブラリを使用する

最も一般的で簡単な方法は、jsdomのようなサードパーティ製ライブラリを使用することです。jsdomは、Node.js環境でブラウザに近い環境を仮想的に作り出し、DOMParserを含む様々なブラウザAPIを利用可能にします。

例：jsdomを使ってXMLをパースする

const JSDOM = require('jsdom').JSDOM;

const htmlString = `
<html>
<body>
  <h1>Hello, world!</h1>
</body>
</html>
`;

const { window } = new JSDOM(htmlString);
const document = window.document;

const h1Element = document.querySelector('h1');
console.log(h1Element.textContent); // 出力： Hello, world!

XML専用ライブラリを使用する

XMLを扱うことに特化したライブラリを使用する方法もあります。xmldomなどは、DOMParserとよく似たAPIを提供しており、Node.js環境で直接利用できます。

const DOMParser = require('xmldom').DOMParser;

const xmlString = `
<person>
  <name>John Doe</name>
  <age>30</age>
</person>
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');

const nameElement = xmlDoc.getElementsByTagName('name')[0];
console.log(nameElement.textContent); // 出力： John Doe

注意事項

上記の例はあくまで基本的な使い方を示しています。より複雑なXML文書を解析する場合は、それぞれのライブラリのドキュメントを参照してください。
Node.jsでDOMParserを使用する場合は、パフォーマンス上の問題に注意する必要があります。特に、大規模なHTMLやXML文書を解析する場合は、jsdomよりも高速な代替手段を検討する必要があります。

上記以外にも、Node.jsでXMLを解析する方法として、XPathやCSSセレクタを使用する方法もあります。それぞれの方法にはメリットとデメリットがあるため、目的に合った方法を選択してください。

この例では、jsdomを使ってXMLファイルをパースし、特定の要素の値を取得する方法を示します。

const JSDOM = require('jsdom').JSDOM;
const fs = require('fs');

const xmlFilePath = './data.xml';

const xmlString = fs.readFileSync(xmlFilePath, 'utf8');

const { window } = new JSDOM(xmlString);
const document = window.document;

const titleElement = document.querySelector('title');
const title = titleElement.textContent;

console.log(title); // 出力： XMLのタイトル

const DOMParser = require('xmldom').DOMParser;

const xmlString = `
<book id="bk101" title="JavaScript入門">
  <author name="山田太郎">
    <email>[email protected]</email>
  </author>
  <price>2500</price>
</book>
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');

const bookElement = xmlDoc.getElementById('bk101');
const authorName = bookElement.getAttribute('author');
const price = bookElement.getElementsByTagName('price')[0].textContent;

console.log(`著者名： ${authorName}`);
console.log(`価格： ${price}`);

説明

上記のコードは、あくまで基本的な例です。実際の用途に合わせて、自由に改造してください。

補足

Node.jsでXMLを解析するには、上記以外にも様々な方法があります。目的に合った方法を選択してください。
XMLを解析する前に、XMLの構造をよく理解しておきましょう。

Node.jsでXMLを解析するその他の方法

SAXパーサーは、XML文書をイベントストリームとして処理するパーサーです。DOMParserとは異なり、XML文書全体を一度にメモリにロードする必要がないため、大規模なXML文書を解析するのに適しています。

代表的なSAXパーサーライブラリ：

const SAXParser = require('sax-js').SAXParser;
const fs = require('fs');

const xmlFilePath = './data.xml';

const parser = new SAXParser();

parser.onopentag = (name, attrs) => {
  console.log(`開始タグ: ${name}`);
  if (attrs.length > 0) {
    console.log(`  属性: ${attrs}`);
  }
};

parser.ontext = (text) => {
  console.log(`テキスト: ${text}`);
};

parser.onclosetag = (name) => {
  console.log(`終了タグ: ${name}`);
};

parser.onerror = (error) => {
  console.error(`エラー: ${error}`);
};

fs.createReadStream(xmlFilePath).pipe(parser);

特徴

メモリ効率が良い
大規模なXML文書を効率的に処理できる
イベントベースの処理のため、複雑なXML構造を解析するのに向いている

const XMLStream = require('xml-stream');
const fs = require('fs');

const xmlFilePath = './data.xml';

const stream = fs.createReadStream(xmlFilePath);
const parser = new XMLStream();

stream.on('data', (chunk) => {
  parser.write(chunk);
});

stream.on('end', () => {
  parser.end();
  console.log(parser.toString());
});

parser.on('error', (error) => {
  console.error(`エラー: ${error}`);
});

SAXパーサーよりもシンプルで使いやすい

XPathは、XML文書をクエリするための言語です。DOMParserやSAXパーサーと異なり、XML文書全体を解析する必要はなく、特定の要素や属性を効率的に抽出することができます。

例：xpathを使ってXMLから要素を抽出する

const DOMParser = require('xmldom').DOMParser;
const fs = require('fs');
const xpath = require('xpath');

const xmlFilePath = './data.xml';

const xmlString = fs.readFileSync(xmlFilePath, 'utf8');
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');

const select = xpath.useNamespaces({ 'x': 'http://example.com/ns' });
const elements = select('/x:root/x:element', xmlDoc);

for (const element of elements) {
  console.log(element.textContent);
}