Fetch APIでファイルを読み込む

Fetch APIのAjaxでファイルを読み込む

Fetch APIはサーバーにリクエスト（要求）を送信することで各種ファイルを読み込むことができます。

ファイルはどの形式でも読み込むことができますが、取得するファイル形式ごとにレスポンスデータの処理が必要になります。
以降では、以下の形式の各種ファイルをFetch APIで取得する例を上から順に解説していきます。

• テキストファイルを読み込む
• JSONファイルを読み込む
• XMLファイルを読み込む
• HTMLファイルを読み込む
• 画像ファイルを読み込む
• 音声ファイルを読み込む
• 動画ファイルを読み込む

ファイル形式はそれぞれ異なりますが、読み込むまでの流れは共通です。
解説では以下のHTMLコードにあるid属性「file_area」を持つdiv要素の中に、読み込んだファイルを挿入してページに表示します。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<div id="file_area"></div>
</article>

CSS コード例

#file_area {
  padding: 20px;
  border: 4px solid #4a93cb;
}
#file_area img,
#file_area video {
  width: 100%;
  max-width: 200px;
  height: auto;
}

JavaScriptは以下の(1)〜(3)の流れで実行します。

JS コード例

window.addEventListener('DOMContentLoaded', () => {
	fetch('/text/test.txt') // (1) リクエスト送信
	.then(response => response.text()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

		const file_area = document.getElementById('file_area');
		file_area.innerHTML = data.replace(/\n/g, "<br>");
	});
});

ページの読み込みが完了したときに発生するイベントDOMContentLoadedを検知したら、Fetch APIによるファイル取得を実行します。

Fetch APIの内訳は1つ目のfetchメソッドでサーバーにリクエストを送信してファイルを取得、続く2つのthenメソッドで受けったレスポンスデータを処理します。
この3つのメソッドは前から順番に実行され、次のメソッドを実行するときにはバケツリレーのように返り値を次のメソッドに引数として渡していきます。

内訳をもう少し具体的に解説すると、実行する順番は(1)はファイルのURL、(2)は取得したレスポンスデータの取得（抽出）、そして(3)で取得したデータをdiv要素に挿入してページに表示していきます。

(2)と(3)はthenメソッドが順に実行されていき、実行する際にそれぞれの変数responseとdataには引数が自動的に挿入されます。
取得するファイル形式によって実行する内容も異なりますが、大まかな流れは共通です。

テキストファイルを読み込む

プレーンなテキストファイルを読み込んでページに表示します。
サンプルページはこちら

以下の内容の「test.txt」を読み込みます。

test.txt

Hello!
このテキストは、Ajaxを使って読み込んだテキストファイルの中身です。

こちらのテキストファイルをFetch APIで読み込みます。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	fetch('/text/test.txt') // (1) リクエスト送信
	.then(response => response.text()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

		const file_area = document.getElementById('file_area');
		file_area.innerHTML = data.replace(/\n/g, "<br>");

	});
});

(1)でfetchメソッドに取得したいファイルのURL（パス）を指定して、リクエストを送信します。

(2)では受け取ったレスポンスデータからtextメソッドを実行して、テキストファイルを取得します。
ここで取得したデータは次のthenメソッドに引数として渡します（変数dataにデータをセット）。

最後に(3)で、(2)から受け取ったデータをdiv要素に挿入します。
今回は通常のテキストですが、テキストファイル内の改行を反映するためにdiv要素のinnerHTMLプロパティに文字列を挿入します。

また、テキストを挿入する直前にreplaceメソッドを実行してテキスト内の改行コード「\n」をbr要素に変換しています。
この変換を行うことで、テキストファイルの改行をHTMLに挿入したときにも反映させることができます。

JSONファイルを読み込む

JSON形式のテキストファイルを読み込んでページに表示します。
サンプルページはこちら

以下の内容の「test.json」を読み込みます。

test.json

[
	{
		"title": "K331",
		"category": "Classic",
		"release_date": "2019-11-25"
	},
	{
		"title": "Paradise",
		"category": "Rock",
		"release_date": "2019-12-18"
	},
	{
		"title": "Baby",
		"category": "Pops",
		"release_date": "2020-01-07"
	}
]

こちらのファイルをFetch APIで読み込み、それぞれの「title」と「release_date」のデータを取り出してページに表示します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	fetch('/text/test.json') // (1) リクエスト送信
	.then(response => response.json()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

		const file_area = document.getElementById('file_area');
		const ul_element = document.createElement('ul');

		for(let d of data) {
			
			const li_element = document.createElement('li');
			li_element.textContent = d.title + " (リリース日：" + d.release_date + ")";

			ul_element.appendChild(li_element);
		}

		file_area.appendChild(ul_element);

	});
});

レスポンスで受け取ったJSONデータはresponseTextプロパティに入っています。
この時点ではただの文字列なので、このデータをJSON.parseメソッドを使ってオブジェクト形式に変換します。

変換したデータをfor文に渡して、「title」と「release_date」のデータを取得してli要素を作成します。
作成したli要素はul要素に追加していきます。

for文を抜けたあとはここまで作成したul要素をdiv要素に挿入し、データを表示します。

XMLファイルを読み込む

XML形式のテキストファイルを読み込んでページに表示します。
サンプルページはこちら

以下の内容の「test.xml」を読み込みます。

test.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

	<url>
		<loc>https://test.com/</loc>
		<lastmod>2020-11-06</lastmod>
		<changefreq>daily</changefreq>
		<priority>1.0</priority>
	</url>

	<url>
		<loc>https://test.com/blog/</loc>
		<lastmod>2020-10-16</lastmod>
		<changefreq>daily</changefreq>
		<priority>0.8</priority>
	</url>
		<url>
			<loc>https://test.com/blog/trip/</loc>
			<lastmod>2019-06-10</lastmod>
			<changefreq>monthly</changefreq>
			<priority>0.5</priority>
		</url>
			<url>
				<loc>https://test.com/blog/trip/alaska-report/</loc>
				<lastmod>2019-06-10</lastmod>
				<changefreq>yearly</changefreq>
				<priority>0.3</priority>
			</url>
			<url>
				<loc>https://test.com/blog/trip/different-rate-in-thailand/</loc>
				<lastmod>2019-06-10</lastmod>
				<changefreq>yearly</changefreq>
				<priority>0.3</priority>
			</url>

	<url>
		<loc>https://test.com/about/</loc>
		<lastmod>2019-06-10</lastmod>
		<changefreq>yearly</changefreq>
		<priority>0.8</priority>
	</url>
	<url>
		<loc>https://test.com/contact/</loc>
		<lastmod>2019-06-10</lastmod>
		<changefreq>yearly</changefreq>
		<priority>0.8</priority>
   </url>

</urlset>

こちらのファイルをFetch APIで読み込み、XMLのurlset要素内にある全てのurl要素を取り出してページに表示します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	fetch('/text/test.xml') // (1) リクエスト送信
	.then(response => response.text()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

		const parser = new DOMParser();
		const sitemap = parser.parseFromString(data, "application/xml");

		const urls = sitemap.querySelectorAll('url');
		const ul_element = document.createElement('ul');

		for(let url_data of urls) {

			const li_element = document.createElement('li');
			const url = url_data.querySelector("loc");
			const last_update = url_data.querySelector("lastmod");

			li_element.innerHTML = "URL：" + url.textContent + "<br>最終更新日：" + last_update.textContent;
			ul_element.appendChild(li_element);
		}

		file_area.appendChild(ul_element);
	});
});

XML形式のファイルについては、先述のJSONファイルを読み込む時に使ったjsonメソッドのようなメソッドは用意されていません。
そこで、一度テキストファイルとしてtextメソッド読み込んでから、XMLDocumentに変換してデータを取得していきます。

最後のthenメソッドでは、まず最初に変数dataをDOMParserオブジェクトのparseFromStringメソッドでXML解析して、通常のテキストからXMLDocumentに変換します。

変数sitemapに入ったXMLDocumentはHTML同様にDOMツリーの操作を行うことができるようになります。
そのため、特定の要素を全て取得したいときはquerySelectorAllメソッドに「url」を指定したり、特定の要素を1つだけ取得するときはquerySelectorメソッドを使うことが可能です。

要素内のテキストについても、HTML操作と同様にtextContentプロパティから参照します。

HTMLファイルを読み込む

HTML形式のテキストファイルを読み込んでページに表示します。
サンプルページはこちら

以下の内容の「test.html」を読み込みます。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>読み込みテスト用HTML | GRAYCODE JavaScript</title>
</head>
<body>
	<h1>JavaScriptレシピ</h1>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
	<p>テキスト4</p>
	<p>テキスト5</p>
</body>
</html>

こちらのファイルをFetch APIで読み込み、querySelectorAllメソッドを使って全てのp要素を取り出してid属性「file_area」を持つdiv要素に挿入します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	fetch('/text/test.html') // (1) リクエスト送信
	.then(response => response.text()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

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

		const p_elements = html.querySelectorAll('p');
		const file_area = document.getElementById("file_area");

		for(let p of p_elements) {
			file_area.appendChild(p);
		}

	});
});

HTML形式のファイルについては、先述のXMLファイルと同様に一度textメソッドでテキストファイルとして読み込んでから、DOMParserオブジェクトのparseFromStringメソッドを使ってHTMLに変換してからデータを取得する必要があります。

parseFromStringメソッドでは第1パラメータにレスポンスデータを渡して、第2パラメータにMIMEタイプ「text/html」を指定します。
MIMEタイプを指定することで、テキストをHTMLのDocumentオブジェクトに変換することができます。

HTMLのDocumentオブジェクトに変換した後はDOMツリーの操作を使うことができるようになります。
上記のコードではquerySelectorAllメソッドを使って全てのp要素を取得し、ページに挿入を行います。

画像ファイルを読み込む

画像ファイルを読み込んでページに表示します。
ファイル形式はJPEG形式、PNG形式、GIF形式のいずれも可能です。
サンプルページはこちら

今回の例ではPNG形式の画像「bear.png」を読み込みます。

こちらのファイルをFetch APIで読み込み、img要素を作成してsrc属性に読み込んだ画像ファイルのパスを挿入することで表示します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	fetch('/image/bear.png') // (1) リクエスト送信
	.then(response => response.blob()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

		const file_area = document.getElementById('file_area');
		const img_element = document.createElement('img');

		img_element.src = URL.createObjectURL(data);
		file_area.appendChild(img_element);

	});
});

画像ファイルのようなリソースファイルを読み込むときは、Responseオブジェクトのblobメソッドを実行するとレスポンスデータから画像ファイルを取得することができます。

読み込んだ画像データはBlobオブジェクトでそのままでは表示できないため、URL.createObjectURLメソッドを実行してファイルのURLを取得してからimg要素のsrc属性に設定して表示します。

音声ファイルを読み込む

音声ファイルを読み込んでページで再生できるようにします。
読み込むファイルはブラウザが対応している形式であれば、mp3形式、aac形式、wav形式などいずれの形式も可能です。
サンプルページはこちら

今回の例ではmp3形式の音声ファイル「bgm01.mp3」をFetch APIで読み込み、audio要素を作成してsrc属性に音声ファイルのパスを挿入することで再生できる状態にします。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	fetch('/audio/bgm01.mp3') // (1) リクエスト送信
	.then(response => response.blob()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

		const file_area = document.getElementById('file_area');
		const audio_element = document.createElement('audio');

		audio_element.src = URL.createObjectURL(data);
		audio_element.controls = true;
		file_area.appendChild(audio_element);

	});
});

画像、音声、動画などのリソースファイルを読み込むときは、Responseオブジェクトのblobメソッドを実行するとレスポンスデータからリソースファイルを取得することができます。

読み込んだ音声ファイルはBlobオブジェクトなのでそのままではページに挿入することができません。
そこで、URL.createObjectURLメソッドを実行してURLを取得してからaudio要素のsrc属性に設定します。

音声ファイルが再生可能な状態まで読み込まれたらコントローラが表示され、再生や一時停止、ボリュームの調整など各種操作を行うことができるようになります。

動画ファイルを読み込む

動画ファイルを読み込んでページで再生できるようにします。
読み込むファイルはブラウザが対応していればmp4形式、webm形式、ogg形式などいずれの形式も可能です。

サンプルページはこちら
※動画ファイルの読み込みに時間がかかるため、表示されるまでに多少時間がかかります。

今回の例ではwebm形式の動画ファイル「swiss.mov」をXMLHttpRequestオブジェクトで読み込み、video要素を作成してsrc属性に動画ファイルのパスを挿入して再生できる状態にします。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	fetch('/movie/swiss.mov') // (1) リクエスト送信
	.then(response => response.blob()) // (2) レスポンスデータを取得
	.then(data => { // (3)レスポンスデータを処理

		const file_area = document.getElementById('file_area');
		const video_element = document.createElement('video');

		video_element.src = URL.createObjectURL(data);
		video_element.controls = true;
		file_area.appendChild(video_element);

	});
});

画像ファイルや音声ファイルのときと同様に、動画ファイルもResponseオブジェクトのblobメソッドを実行してレスポンスデータからリソースファイルを取得します。

読み込んだ動画ファイルはBlobオブジェクトなので、そのままではページに挿入することができません。
そこで、URL.createObjectURLメソッドでURLを取得してvideo要素のsrc属性に設定します。

動画ファイルが再生可能な状態まで読み込まれたらページに表示され、コントローラより再生や一時停止、ボリュームの調整など各種操作を行うことができるようになります。