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

fetch()メソッドを使ってJSONを読み込む

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

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

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

メソッド

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

サンプルコード

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

Promiseオブジェクトで実装

手順は下記の通りです。省略記法もコメントアウトで記載しています。可読性が減るので私はあまり使いませんが・・・・

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

const fetchedData = fetch('https://idea-hack.com/wp-content/uploads/2019/12/sample.json');
fetchedData.then((value) => {
  return value.json();
}).then((text) => {
  targetText.textContent = JSON.stringify(text,null,' ');
});

/*
【省略記法】可読性が減るので私はあまり使わない
fetch('https://idea-hack.com/wp-content/uploads/2019/12/sample.json').then((value) => value.json()).then((text) => {
  targetText.innerHTML = text;
});
*/

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/2019/12/sample.json');
	const fetchedText = await fetchedData.json();
	targetText2.textContent = JSON.stringify(fetchedText, null, ' ');
}

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