Promise と async/await ― 非同期の基本

導入

Webでは「あとから結果が来る」処理（通信・タイマーなど）が普通です。JavaScript では Promise と async/await で、こうした非同期処理を扱います。

説明

Promise は「いずれ完了する処理」の約束です。then で成功時、catch で失敗時の続きを書けます。

function wait(ms) {
  return new Promise((resolve) => {
    // 学習用: 実際の待ち時間は短くする（即 resolve）
    resolve(`待ったよ (${ms}ms のつもり)`);
  });
}

wait(100).then((msg) => {
  console.log(msg);
});

async 関数の中では await で Promise の結果を「待ってから」次へ進められます。見た目は同期コードに近づきます。

async function main() {
  const msg = await wait(50);
  console.log("結果:", msg);
  console.log("完了");
}

main();

失敗は try / catch で受け止められます。

function fail() {
  return Promise.reject(new Error("失敗した"));
}

async function demo() {
  try {
    await fail();
  } catch (err) {
    console.log("捕捉:", err.message);
  }
}
demo();

この実行環境は async 関数や top-level の await に対応しています。通信（fetch）はネットワークや CORS の都合で動かない場合があるため、まずは Promise の形に慣れましょう。

やってみよう

wait を複数回 await して順番にログを出したり、catch でエラーを捕捉したりしてみましょう。

演習

async 関数 run を定義し、中で await wait(10) の結果を表示してから呼び出してください。