JavaScriptのfetch()メソッドを使ってXMLデータを読み込んでみよう

fetch()メソッドを使ってXMLデータを読み込む

fetch()メソッドを使えば、外部ファイルを簡単に受信してデータの活用を行うことができます。プログラム上からはデータのダウンロードがいつ完了するか分からないため、非同期処理として実装するのが基本です。

非同期処理のため、fetch()メソッドの内部ではPromiseオブインスタンスを呼び出しており、Promiseオブジェクトを返します。

async awaitを使った非同期処理方法も便利です。

メソッド

メソッド意味返り値
fetch(URL, [送信データ])第二引数が空の場合はURLからデータを取得
第二引数に[送信データ]を指定すると、指定したURLにデータを送信する
Promise
fetch()メソッドの仕様

サンプルコード

サンプルコードとして、シンプルなXMLデータを読み込んでその内容をページ上に出力するコードを紹介します。

定義

XMLとは?

XMLはデータを表現するマークアップ言語の一種です。主にサーバー間のデータのやりとりで使われ、記述形式がわかりやすいです。

HTMLの様な形式で複雑な情報表現ができますが、データを読み込んだ後の解析が面倒なのでJSONで解決する場合はJSONを優先した方が賢いです。

Promiseオブジェクトで実装

  1. fetch()を実行(Promiseオブジェクトが返って来る)
  2. Promiseオブジェクトが返って来るので、then()メソッドの中でtext()メソッドを実行して、テキストデータとして扱うようにする
  3. 返されたテキストデータに対してthen()メソッドを実行して、中の関数をページ上で表示する
Output
読み込まれたXMLの中身
Pug
table.table
			tbody
				tr
					th 読み込まれたXMLの中身
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

const fetchedData = fetch('https://idea-hack.com/wp-content/uploads/2019/12/sample.xml');
fetchedData.then((value) => {
  return value.text();
}).then((str) => {
	const parser = new DOMParser();
	return parser.parseFromString(str, 'text/xml');
}).then((xml) => {
	const xmlSeriaize = new XMLSerializer();//XMLの内容を文字列で出力するためにシリアライズ
	const serializedXmlStr = xmlSeriaize.serializeToString(xml);
	targetText.innerHTML = `${serializedXmlStr}`;
});

async awaitで実装

await・asyncを使った場合は下記のような処理になります。

  1. 全体を囲む関数にasyncを与えて非同期にする。
  2. 関数の中身でfetch()メソッドを呼び出す。これはPromiseを呼び出すので非同期処理のはずだが、awaitをつけることでそれを上書き、同期処理扱いにする。これで、fetch()メソッドの処理が終わるまで次の処理に走ることはない。ただし、関数全体はasyncなので、あくまでこの関数内の処理の話・・・
  3. 返されたXMLをtext()メソッドでテキストとして解析
  4. 返された値をページ上に出力する
Output
読み込まれたXMLファイルの中身
Pug
table.table
			tbody
				tr
					th 読み込まれたXMLファイルの中身
					td#targetText2
JavaScript
const targetText2 = document.getElementById("targetText2");

async function fetchLoad() {
	const fetchedData2 = await fetch('https://idea-hack.com/wp-content/uploads/2019/12/sample.xml');
	const fetchedText2 = await fetchedData2.text();
	const parser2 = await new DOMParser();
	const xml2 = await parser2.parseFromString(fetchedText2, 'text/xml');
	const xmlSeriaize2 = await new XMLSerializer();//XMLの内容を文字列で出力するためにシリアライズ
	const serializedXmlStr2 = await xmlSeriaize2.serializeToString(xml2);
	targetText2.innerHTML = await `${serializedXmlStr2}`;
}

fetchLoad();
インストラクター