← inaro.devAI駆動開発 学習ツール
中級

Promiseとasync/await

なぜ学ぶか: サーバーからデータを取ってくるような「時間のかかる処理」は、結果がすぐには返ってきません。その待ち方を書くのがasync/awaitで、AIのコードのあちこちに出てきます。まずは下の例で雰囲気をつかんでください。

まずはこの例を見てみましょう

// サーバーからユーザー情報を取ってきて、名前を表示する例
const main = async () => {
  console.log("読み込みをはじめます…");

  const user = await fetchUser(); // ← データが届くまで、ここで待つ

  console.log("ようこそ、" + user.name + "さん");
};

awaitと書いた行で「結果が届くまで待って」から、次の行に進みます。上から順に読めばOKです。

時間のかかる処理は、結果がすぐ返らない

データ取得はサーバーとやり取りするので時間がかかります。届く前に次へ進むと「まだ無いデータ」を使うことになるので、待つ仕組みが必要です。

await=「終わるまで待つ」

例のawait fetchUser()は、データが届くまでこの行で止まり、届いたらuserに入れて次へ進みます。

async=「この中でawaitを使います」の印

awaitは基本、頭にasyncと付けた関数の中で使います。「asyncとawaitはセット」と覚えましょう(ファイルの一番外側では、そのままawaitが書ける場合もあります)。

Promise=「あとで結果を渡す」引換券

fetchUser()が本当に返しているのは、結果そのものではなく引換券(Promise)です。awaitがその引換券を結果に換えています。型にPromise<User>とあったら「あとでUserが届く」という意味です。

ステップ 1 / 3

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。