async/await
中級読み方：アシンクアウェイト｜英語：Async Await
非同期処理を同期的に書ける構文で、Promiseをより読みやすく扱えるよ。
やさしい説明
async/awaitは、非同期処理を「上から順番に」読めるように書ける構文です。Promiseの .then() チェーンより読みやすくなります。
async を関数の前につけると「この関数は非同期処理を含むよ」と宣言できます。await を使うと「この処理が終わるまで待ってから次に進む」と書けます。
エラー処理は try-catch で書けるので、同期処理と同じ感覚でコードが書けます。
具体例・使い方
// .then()チェーン（ネストが深くなりやすい）
fetch(url)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
// async/await（同じ処理・はるかに読みやすい）
async function getData() {
try {
const res = await fetch(url);
const data = await res.json();
console.log(data);
} catch (err) {
console.error("エラー:", err);
}
}複数の非同期処理を並列実行する
// 直列（1つずつ待つ → 遅い）
const user = await fetchUser(id);
const posts = await fetchPosts(id); // userを待ってから実行
// 並列（Promise.allで同時に実行 → 速い）
const [user, posts] = await Promise.all([
fetchUser(id),
fetchPosts(id),
]);
// 両方完了してから次に進む互いに依存しない複数のAPI呼び出しは Promise.all() で並列実行すると速くなります。直列に書いてしまうと待ち時間が2倍になるため、独立した処理は並列化を意識しましょう。
いつ使う？
- APIからデータを取得するとき（fetch）
- データベースにアクセスするとき（Node.js）
- ファイルの読み書きをするとき
- Promise を返す関数を呼び出すとき全般
間違いやすいポイント
❌ await を async 関数の外で使う
await は async 関数の中でしか使えません（トップレベルawaitはES2022以降のモジュールで使えますが、通常の関数内では不可）。
// ❌ async関数の外ではawaitは使えない
const data = await fetch(url); // SyntaxError!
// ✅ async関数の中で使う
async function load() {
const res = await fetch(url); // OK
return res.json();
}❌ try-catch を省略してエラーを握りつぶす
async 関数内でエラーが発生しても try-catch がないと、呼び出し元で気づけないことがあります。APIを呼ぶ処理には必ずエラーハンドリングを書きましょう。
よくある疑問
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() で受け取る必要があります。
関連用語
📖 関連レッスン
レッスンを見る →