実務型コーディング演習 / 約20分

async/await: 非同期処理を「同期的に」書く

なぜこれを学ぶか

Promiseをさらに読みやすく書ける `async/await` 構文は、現代のJavaScript開発に必須です。エラーハンドリングを含めた正しい使い方を学びましょう。

async function は必ず Promise を返します。関数内で await を使うと、Promiseが解決するまで「待ってから次へ進む」ように書けます。コールバックのネストが消えてスッキリ書けます。

await は async 関数の中でのみ使えます。トップレベルでは使えません（ESモジュールのトップレベルawaitは例外）。

エラーハンドリング: await した処理がエラー（reject）になると例外が投げられます。try { ... } catch (error) { ... } で捕捉します。fetchのエラーは2種類: ①ネットワークエラー（例外が投げられる）②HTTPエラー（例外は投げられず response.ok が false になる）。

複数の非同期処理を並列実行: 互いに依存しない複数のAPIを順番に await すると遅くなります。Promise.all([fetch1, fetch2]) で並列実行すると最長の処理時間で済みます。

よくあるミス: await を忘れると Promise オブジェクトそのものが返ります。const data = fetch(url) は Promise、const data = await fetch(url) はResponseです。

重要ポイント

async 関数内でのみ await が使える
エラーは try/catch で捕捉（fetch は HTTPエラーで例外を投げない点に注意）
並列処理は Promise.all で同時実行

理解度チェック

選ぶと即座に解説が表示されます。

fetch でHTTPステータス 404 が返ってきた場合、例外は投げられる？

ヒントを見る

fetchのドキュメントでは「ネットワーク障害が発生したときのみ reject する」と書かれています。404は「通信は成功した」と言えるでしょうか？

コーディング演習実際に書く

モックAPIを使った非同期関数を実装してください。`mockFetch(url)` はURLに応じてPromiseを返します（"/users"は{users:[{id:1,name:"田中"},{id:2,name:"佐藤"}]}、存在しないURLは{error:"Not Found"}）。`fetchUsers()` 関数を実装して、ユーザー一覧を取得・返してください。エラー時は空配列を返します。

async function fetchUsers(mockFetch)

模範解答（読んで理解したら、自力で書き直してみましょう）

async function fetchUsers(mockFetch) {
  try {
    const data = await mockFetch('/users')
    // users フィールドがない場合は空配列にフォールバック
    return data.users || []
  } catch (error) {
    // ネットワークエラーなどの例外時は空配列を返す
    return []
  }
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン