JavaScript

await とは？

await は「ちょっと待って！」という命令です。

JavaScript が「Promise（約束）」の結果を待つときに使うキーワードで、「非同期処理をいったん止めて、終わるのを待ってから次へ進む」ことができます。

普通、JavaScript は処理を止めずに次々と進みますが、await を使うと「終わるまで待ってね」とお願いできるんです。

基本の使い方

使い方はとてもシンプルです。

ただし、await は async function の中でしか使えません。

async function fetchData() {
    const response = await fetch("https://example.com/data.json");
    const data = await response.json();
    console.log(data);
}

ここでは、

1. fetch() がデータを取りに行く（Promise を返す）
2. await が「終わるのを待つ」
3. 結果が返ってきたら data に入れて次へ進む

という流れです。

await の動きをイメージで

await なしの世界

「注文したけど料理が出る前に次の作業を始める」感じ。

await ありの世界

「料理が来るまで席でちゃんと待つ」感じ。

つまり、コードの順番どおりに結果を扱いたい時に便利なんです。

注意点

await は Promise を返す処理にしか意味がありません。

await 42 のように Promise 以外でも使えます。値はそのまま返りますが、いったん“待ちポイント”を挟むので、次の行は“少しだけ後で”実行されます（マイクロタスクで再開）。

ループや複数の非同期処理を同時にやりたいときは、Promise.all() と組み合わせるのが効率的です。

モジュール（type="module"）の中では、関数の外（トップレベル）でも await が使える環境があります。

ただし、すべての環境で動くわけではないので、初心者のうちは async function の中で使うのが安全です。

ちょっと進んだ話（中級者向け）

await は「その関数の外側までは止めない」仕組み。

他の処理（例えば別の関数やUIの反応）は並行して動いています。

await 自体が Promise の結果を返すので、例外処理には try...catch をよく組み合わせます。

async function loadUser() {
    try {
        const res = await fetch("/user");
        const user = await res.json();
        console.log(user);
    } catch (error) {
        console.error("読み込みに失敗しました:", error);
    }
}

直列と並列：for の中の await と Promise.all

await を使うと、見た目は「同期っぽく」順番どおりに書けます。

ただし、for の中で使った場合は 1 個ずつ順番に待つ（直列） ので、ゆっくりになります。

直列になる例：

async function getAllSerial(urls) {
    const results = [];
    for (const u of urls) {
        results.push(await fetch(u)); // ★ 1つずつ待つので遅い
    }
    return results;
}

同時にリクエストを投げてまとめて待つなら、Promise.all を使うと「並列」になります。

並列になる例：

async function getAllParallel(urls) {
    const promises = urls.map(u => fetch(u)); // ★ まとめて投げる
    return await Promise.all(promises);       // ★ 一気に待つ
}

まとめ：「for の中の await は直列」「並列にしたい時は map + Promise.all」と覚えておくと、とても便利です。

FAQ

Q. await はどこでも使えますか？

A. 使えるのは基本的に async function の中。ES モジュール（type="module" や Node.js ESM）なら トップレベルでも可。古い環境では不可。

Q. await 42 のように Promise じゃない値でも意味ありますか？

A. 値はそのまま返りますが、いったん“待ちポイント”になるため、次の行は少し後で実行されます。

Q. for の中で await してもいい？

A. できますが 直列になります。同時に進めたいなら map + Promise.all が基本。

Q. fetch が 404 でも catch に入らないのはなぜ？

A. fetch はネットワーク障害でのみ失敗します。res.ok を確認し、ダメなら throw しましょう。

Q. 処理を途中で止めたい（タイムアウトしたい）

A. AbortController を使います。fetch(url, { signal }) として、必要になったら controller.abort()。