awaitとは？──Promiseを“同期風”に扱う魔法の構文

はじめに

JavaScriptの非同期処理は、もはや開発のあらゆる場面で登場します。
そんな中、非同期処理を“まるで同期処理のように”扱える構文が

await

await

基本情報・概要

await

async

主な目的：

• 非同期処理の結果を直感的に扱う

• .then()

  チェーンを使わずに処理を記述

• try/catch

  による一貫したエラーハンドリングを可能にする

await

比較・分類・特徴の表形式まとめ（任意）

.then()

await

await

深掘り解説

✅ 基本的な使い方

async function fetchUser() {
  const res = await fetch('/api/user');
  const user = await res.json();
  return user;
}

• fetch()

  も

  res.json()

  も Promise を返す

• await

  はその Promise が解決されるのを待ってから次の行へ進む

✅ try/catchとの併用でエラーハンドリングも自然

async function loadData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました", error);
  }
}

• 非同期エラーも 同期的な構文で処理できる点が

  await

  の大きな魅力

✅ Promise.all()と併用する場合の注意

const [user, posts] = await Promise.all([
  fetchUser(),
  fetchPosts()
]);

• 複数の非同期処理が同時に動く（awaitの逐次実行ではなく並列）

// ❌ 遅くなるパターン
const user = await fetchUser();
const posts = await fetchPosts(); // ← ここはuser取得後でないと始まらない

• await

  を 逐次的に使いすぎるとパフォーマンス低下に繋がる場合も

応用・発展的な使い方

• 非同期ループ処理（for await...of）

  for await (const item of asyncIterator()) {
    console.log(item);
  }
  

• 即時実行関数と組み合わせて使う

  (async () => {
    const res = await fetch('/api/data');
    console.log(await res.json());
  })();
  

• 再帰やリトライ処理でも活躍

  async function retryFetch(url, retries = 3) {
    try {
      return await fetch(url);
    } catch (e) {
      if (retries > 0) return retryFetch(url, retries - 1);
      throw e;
    }
  }
  

await

よくある誤解と注意点（任意）

• await

  は Promise 以外に使っても意味がない：非Promiseなら即座に次の行へ
• トップレベルでは使えない（ES2022以前）：Node.jsや一部ブラウザで対応中だが注意
• 同期処理との混在でブロッキングしやすい：ループ内などで要注意
• 複数 await の逐次処理がパフォーマンスを下げる：依存関係のない処理は

  Promise.all()

  へ

正しく使えば

await

まとめ

await

await