JavaScript

It’s like telling JavaScript to wait until something finishes, such as loading data, before moving on.

await

await とは？

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

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

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

基本の使い方

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

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

JavaScript

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 をつけても、すぐにその値が返ります。

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

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

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

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

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

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

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

JavaScript

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

まとめ