【ひどうきしょり】

非同期処理(async/await) とは?

💡 「待ち時間」に別の仕事を進める効率的な処理
📌 このページのポイント
同期処理 vs 非同期処理(async/await) 同期(ブロッキング) タスクA(実行中) タスクB(待ち...) タスクC(待ち...) 1つずつ順番に実行 → 遅い 非同期(ノンブロッキング) タスクA開始 タスクB開始 タスクC開始 A完了 B完了 C完了 同時に進行 → 速い! async/await の書き方 async function fetchData() {"{"} const data = await fetch(url); // 完了を待つ {"}"}
非同期処理のイメージ
ひよこ ひよこ

なんで非同期が必要なの?

ペンギン先生 ペンギン先生

API呼び出しに1秒、ファイル読み込みに0.5秒かかるとして、同期処理なら合計1.5秒待つ。非同期なら両方を同時に開始して、最も遅い1秒で完了する。Webアプリでは画面が固まらないために非同期が必須。Node.jsはシングルスレッドだけど、非同期I/Oで何千もの同時接続を処理できるんだよ

ひよこ ひよこ

Promiseって何?

ペンギン先生 ペンギン先生

「将来の結果を約束するオブジェクト」だよ。fetch('/api/users')はPromiseを返す。結果が返ってきたら.then()で処理、エラーなら.catch()で処理。コールバック地獄(ネストが深くなる問題)を解決するために生まれた。async/awaitはPromiseをさらに使いやすくした構文だね

ひよこ ひよこ

async/awaitの書き方は?

ペンギン先生 ペンギン先生

「async function getUsers() { const res = await fetch('/api/users'); const data = await res.json(); return data; }」のように書くよ。awaitの箇所で処理が「待つ」ように見えるけど、実際にはイベントループに制御を返して他の処理を進めている。見た目は同期的で読みやすいのがメリットだね

ひよこ ひよこ

よくあるミスは?

ペンギン先生 ペンギン先生

①awaitを忘れてPromiseオブジェクトをそのまま使う、②直列で書くべきでない場面で順番にawaitする(Promise.allで並列実行すべき)、③エラーハンドリングの漏れ(try-catchで囲むかcatchをチェーンする)。特にPromise.allは「独立した複数の非同期処理を並列実行」するときに必須だよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「非同期処理」って出てきたら「待ち時間に他の処理を進める効率的な仕組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Asynchronous Processing」 = 非同期処理
💬 Async(非同期)=同期しない、つまり「待たない」処理方式だよ
← 用語集にもどる