JavaScriptでXMLをパースする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでXMLをパースする方法について現役エンジニアが解説しています。XMLとはExtensible Markup Languageの略でデータの構造を表現するマークアップ言語のことです。JavaScriptのDOMParserオブジェクトを利用して取り込み、変換します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでXMLをパースする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでXMLをパースする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

XMLとは

Extensible Markup Languageの略でデータの構造を表現するマークアップ言語のことです。Webサイトに使うHTMLもマークアップ言語なので、見た目は似ています。

HTMLはブラウザ用のタグを使いますが、XMLは構造を表すだけなのでタグも自由に作成できます。そのため、データのやり取りでも使われることがあります。

XMLのサンプルとして、TechAcademyジュニアのコースをを表現してみます。まずは、HTMLと同じようにデータの構造があるという程度に認識してください。

<?xml version="1.0"?>
<school>
  <name>テックアカデミージュニア</name>
  <courses>
    <course>
      <name>Webアプリコース</name>
    </course>
    <course>
      <name>ゲームアプリコース</name>
    </course>
  </courses>
</school>

 

パースとは

平たく言うと変換のことです。

XMLに限らずJSONというデータ構造などいろいろな形式がありますが、JavaScriptで利用する際には扱いやすくするためにパース(変換)して、JavaScriptのオブジェクトにします。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

DOMParserとは

XMLのデータをJavaScriptで扱いやすくするために、変換処理をするのがDOMParserです。使用する際には、まずnewで生成して、そのあとでparseFromStringメソッドを呼び出します。

第1引数は変換する文字列(今回はXML)、第2引数に変換するデータの形式(XMLの場合は、text/xml)を指定します。

var parser = new DOMParser();
var doc = parser.parseFromString(【変換する文字列】, 【変換するデータの形式】);

 

JavaScriptでXMLをパースする方法

それでは、サンプルで紹介したXMLデータを、実際にDOMParserを使ってJavaScriptのDocumentオブジェクトに変換してみます。

const xml = `
<?xml version="1.0"?>
<school>
  <name>テックアカデミーテックアカデミージュニア</name>
  <courses>
    <course>
      <name>Webアプリコース</name>
    </course>
    <course>
      <name>ゲームアプリコース</name>
    </course>
  </courses>
</school>`;
const parser = new DOMParser();
const doc = parser.parseFromString(xml, "text/xml");

console.log(doc);

 

解説

xmlという変数にサンプルのXMLデータを格納しています。

格納の際には、`(バッククォート)で囲うことで複数行の文字列を記述しています。parserという変数にnew DOMParser()で作ったParserが格納されているのでparseFromStringメソッドを使用して変換しています。第1引数はXMLデータが格納された変数のxml、第2引数はXML形式なのでtext/xmlとしています。

これでdocという変数に変換されたDocumentオブジェクトが格納されました。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。