【入門】JavaScriptの非同期処理を簡単に！ async/awaitの使い方と基本

JavaScriptでAPIからデータを取得したり、時間がかかる処理を行ったりする際、「非同期処理」は避けて通れないテーマです。そして、その非同期処理をよりシンプルに書くための強力な構文がasync/awaitです。
今回は、JavaScriptの非同期処理の基本と、async/awaitの分かりやすい使い方を解説します。

目次

非同期処理とは？

まず、非同期処理を理解するために、同期処理との違いを見てみましょう。

  • 同期処理：処理が完了するまで、次の処理を待機します。
  • 非同期処理：処理の完了を待たずに、次の処理を実行します。

例えば、ウェブサイトでAPIから天気情報を取得する場合を考えてみましょう。
同期処理だと、天気情報の取得が完了するまでページの他の部分（ボタンのクリックや画像の表示など）が止まってしまいます。しかし、非同期処理であれば、天気情報を待つ間にページの他の部分をスムーズに動かすことができます。

これまで、非同期処理は「コールバック関数」や「Promise」を使って実装されてきましたが、コードが複雑になりがちでした。そこで登場したのがasync/awaitです。

async/awaitの基本

async/awaitは、非同期処理を同期処理のように、上から下へ順番に読みやすい形で書くための構文です。

async関数

asyncは、非同期処理を含む関数を定義するために使用します。functionキーワードの前にasyncと付けるだけです。
async関数は、必ずPromiseを返します。

// asyncをつけた関数
async function fetchData() { 
	// ここに非同期処理を書く return "データが取得できました！";
} // async関数はPromiseを返す
fetchData().then(data => { 
	console.log(data); // "データが取得できました！"
});

await演算子

awaitは、async関数の中でしか使えません。awaitはPromiseが解決（完了）するまで処理を一時停止させ、結果を返します。これにより、コールバック地獄や.then()の連鎖から解放されます。

async function fetchData() { 
	console.log("データの取得を開始します..."); // Promiseが解決するまで待機
	const response = await fetch('https://api.example.com/data');
	const data = await response.json();
	console.log("データの取得が完了しました！");
	return data;
} fetchData();

上記のコードでは、await fetch()が完了するまで次の行のawait response.json()は実行されません。これにより、まるで同期処理のようにシンプルに記述できます。

エラーハンドリング

非同期処理では、エラーが発生する可能性があります。async/awaitでは、同期処理と同じようにtry...catchブロックを使ってエラーを捕捉できます。

async function fetchDataWithError() { 
	try { 
		const response = await fetch('https://api.example.com/non-existent-endpoint');
		if (!response.ok) { 
			throw new Error(`HTTPエラー！ステータス: ${response.status}`);
		}
		const data = await response.json();
		return data;
	} catch (error) { 
		console.error("エラーが発生しました:", error); 
	}
} fetchDataWithError();

まとめ

async/awaitは、JavaScriptの非同期処理を驚くほどシンプルで読みやすいコードに変えてくれます。

  • async：非同期処理を含む関数を定義する。
  • await：async関数の中でPromiseの完了を待機する。
  • try...catch：エラーを安全に処理する。

これらの構文をマスターすれば、API通信やデータベースアクセスといった非同期処理をより効率的に、そしてバグなく実装できるようになります。

関連記事