Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
プログラミング言語▸TypeScript

TypeScript: 非同期処理(Promise / async-await)

hands-on所要 30分最新草稿
前提: TypeScript: ユニオン型と絞り込み(union / narrowing)→次: TypeScript: モジュール(import / export)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
async/await=呼び出しベル

料理(通信)を頂んで席で待つのがawait。ベルが鳴る(解決する)まで他の事もできる。失敗(料理が来ない)に備えてtry/catchで構える。

概要

📍 programming-languages ▸ TypeScript ▸ 非同期処理 | 種別: hands-on | facts_as_of 2026-06(TypeScript 6.0)

公式ドキュメント — hands-on

🎞 スライド

非同期処理

時間のかかる処理を「待つ」

同期 vs 非同期(テキスト図)

同期 : [処理A]─[待ち]─[処理B] ← 待つ間ぜんぶ止まる
非同期: [処理A]──┐ [処理B] ← 待つ間も先へ進める
└await─▶ 結果

async / await

async 関数は Promise を返す
await で解決を待つ → エラーは try/catch

—
出典(sources)

TypeScript Handbook ; MDN (Promise, async/await) ; TypeScript 6.0 / 2026-06確認

確認問題(Review-Questions)
await を使うときの制約と、エラーの扱いを述べよ。記述
基礎公式
解答・解説▾ 開く

awaitはasync関数内でのみ使える。エラーはtry/catchで捕捉する。

async関数が返すものは?択一
基礎概要
解答・解説▾ 開く

Promise。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2026-12-15
周期: 6か月
版: TypeScript 6.0
同期との対比で「待つ」を可視化
同期との対比で「待つ」を可視化

概要

時間のかかる処理(通信等)を待つ仕組み。Promise と、それを読みやすく書く async/await を使う。

公式ドキュメント準拠(TypeScript 6.0)

async function getUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error("failed");
  return res.json();
}

async function main() {
  try {
    const u = await getUser(1);
    console.log(u.name);
  } catch (e) {
    console.error(e);
  }
}
  • async 関数は Promise を返す。await で解決を待つ。エラーは try/catch。

出典: TS Handbook / MDN: async/await

🧭 誤解訂正集

よくある誤解 正しい理解
await を付ければ全体が止まる 待つのはその関数の中。他は進められる
async 関数は普通の値を返す 返るのは Promise(受け側で await)
非同期のエラーは catch できない try/catch で await を囲めば捕まえられる

📖 用語

  • 同期 / 非同期 … 処理を待って止まる / 待つ間も先へ進める。
  • Promise … 「あとで結果が入る」入れ物。成功(resolve)/失敗(reject)。
  • async … その関数を非同期にし、Promise を返す印。
  • await … Promise の解決を待って結果を取り出す。
  • try/catch … 失敗を捕まえて処理する構文。

✅ 確認の目安(can-do)

同期と非同期の違いを説明でき、Promise・async/await・try/catch を踏まえて、**「この処理を待つべきか・エラーをどう捕まえるか」**を判断できる。

⚠️ エラー復旧集

症状 原因 復旧
結果が Promise {pending} になる await 忘れ await を付ける
await is only valid in async function async 外で await 関数を async にする