JavaScriptのfetch()メソッドを使ってバイナリ(画像)データを読み込んでみよう

fetch()メソッドを使ってバイナリ(画像)データを読み込む

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

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

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

メソッド

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

サンプルコード

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

画像や3Dデータの多くはテキストではないフォーマットで保存されています。

これらはバイナリ形式のデータと呼ばれます。バイナリ形式で読み込むにはblob()メソッドで解析します。

バイナリ形式のデータはサイト上で画像の解析をする必要があるアプリケーションで使われます。

Promiseオブジェクトで実装

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

const fetchedData = fetch('https://idea-hack.com/wp-content/uploads/2020/03/76751b0e74e8b8890bb32967852e507a-1.jpg');
fetchedData.then((value) => {
  return value.blob();
}).then((targetImgData) => {
	const image = new Image();
	image.src = URL.createObjectURL(targetImgData);
  targetText.appendChild(image);
});

async awaitで実装

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

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

async function fetchLoad() {
	const fetchedData = await fetch('https://idea-hack.com/wp-content/uploads/2020/03/76751b0e74e8b8890bb32967852e507a-1.jpg');
	const targetImgData = await fetchedData.blob();
	
	const image = new Image();
	image.src = URL.createObjectURL(targetImgData);
  targetText2.appendChild(image);
	
}

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