async/await はどのように動作しますか？

Question

Accepted Answer

`async/await` は**Promise の糖衣構文**で、非同期コードを同期コードのように読める形で書けるようにします。`async` 関数は常に Promise を返し、`await` は Promise が確定するまで関数を一時停止し、その値とともに再開します。

```js
async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`); // pause until the response
    const user = await res.json();               // pause until parsed
    return user;                                  // becomes the resolved value
  } catch (err) {
    console.error(err); // catches rejections from any await above
  }
}
```

## 逐次 vs 並列 — よくあるパフォーマンスの誤り

`await` は処理を**順番に一つずつ**実行します。2 つのリクエストが互いに依存していない場合、それらを逐次的に await するのは無駄に遅くなります。

```js
// ❌ sequential — total time = a + b
const a = await getA();
const b = await getB();

// ✅ parallel — total time = max(a, b)
const [a, b] = await Promise.all([getA(), getB()]);
```

## エラー処理

`.catch` の代わりに `try/catch` を使います。await した promise が reject されると例外が投げられるので、一つの catch でブロック全体をカバーできます。

## 内部の仕組み

実体は依然として Promise とマイクロタスクキューです。`await` はスレッドをブロックせず、制御を譲って他のコードを実行させ、その後再開します。`async` 関数を await（または `.catch`）せずに呼び出すとエラーが握りつぶされることがあるので注意してください。

## なぜ重要なのか

これは非同期フローを読みやすくし、非同期処理を順序立てるための現代的な標準です。ただし、独立した処理は `Promise.all` で意識的に並列化する必要があります。