async/await
中級読み方：アシンクアウェイト｜英語：Async Await
非同期処理を同期的に書ける構文で、Promiseをより読みやすく扱えるよ。いつ使う？ APIからデータを取得する、ファイルを読み込むなど、待ち時間がある処理を順番に書きたいときに使うよ。間違いやすいポイント: awaitはasync関数の中でしか使えないよ。また、forEachの中でawaitを使っても待ってくれないよ。for...ofループを使おう。
やさしい説明
async/awaitは、非同期処理を「上から順番に」読めるように書ける構文です。Promiseの .then() チェーンより読みやすくなります。
async を関数の前につけると「この関数は非同期処理を含むよ」と宣言できます。await を使うと「この処理が終わるまで待ってから次に進む」と書けます。
エラー処理は try-catch で書けるので、同期処理と同じ感覚でコードが書けます。
具体例・使い方
// .then()チェーン（読みにくい）
fetch(url).then(res => res.json()).then(data => {...});
// async/await（読みやすい！）
async function getData() {
try {
const res = await fetch(url);
const data = await res.json();
console.log(data);
} catch (err) {
console.error("エラー:", err);
}
}いつ使う？
API通信、データベースアクセス、ファイル読み込みなど、時間がかかる処理を書くときに使います。現代のJavaScriptでは非同期処理の標準的な書き方です。
間違いやすいポイント
❌ awaitをasync関数の外で使う
// ❌ async関数の外ではawaitは使えない
const data = await fetch(url); // エラー！
// ✅ async関数の中で使う
async function load() {
const data = await fetch(url); // OK
}よくある疑問
Q: asyncとawaitの役割は？
A: asyncは「この関数は非同期です」と宣言、awaitは「この処理が終わるまで待つ」という意味です。セットで使います。
Q: エラー処理はどうする？
A: try { await fetch(...) } catch (e) { console.error(e) } のようにtry-catchで囲みます。
Q: async関数の戻り値は？
A: 常にPromiseを返します。return 5 と書いても、呼び出し側では await fn() で受け取る必要があります。
関連用語
📖 関連レッスン
レッスンを見る →