概要
JavaScriptにおける非同期処理には、以下の3つの主要な構文スタイルが存在する：
-
Promise: 非同期処理の構造化 -
async/await: 同期風の記述で非同期処理を簡潔に -
Generator: 処理の“中断と再開”を可能にするイテレーター
それぞれが持つ特性と設計思想は異なり、
「どの構文を使うか」は単なる好みではなく、制御フローの設計選択そのものである。
対象環境
JavaScript（ES6〜ES2023）
Node.js / モダンブラウザ両対応
1. Promise：非同期処理の構造化と連結
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('data'), 1000);
});
}
fetchData()
.then(result => console.log(result))
.catch(err => console.error(err));
✅ 特徴
-
then()/catch()/finally()によるチェーン処理 - 並列実行 (
Promise.all) に強い - 可読性は低くなりがち（ネストで複雑化）
2. async/await：同期処理のように非同期を書く
async function load() {
try {
const data = await fetchData();
console.log(data);
} catch (e) {
console.error(e);
}
}
✅ 特徴
- ✅ 見た目が同期的 → 可読性が高い
- ✅ エラーハンドリングも
try/catchで統一 - ❌ 並列処理は
awaitの順番に依存する →Promise.all()との併用が必要
並列実行したい場合
const [a, b] = await Promise.all([fetchA(), fetchB()]);
3. Generator（+ coライブラリなど）
function* task() {
yield new Promise(resolve => setTimeout(() => resolve('step1'), 500));
yield new Promise(resolve => setTimeout(() => resolve('step2'), 500));
}
-
yieldによって処理を一時停止できる -
for...ofやnext()により段階的に処理を進行 - 単体では非同期制御は難しく、
coやredux-sagaなどの中間層と併用
async generator + for await...of
async function* steps() {
yield await fetch('...');
yield await fetch('...');
}
for await (const res of steps()) {
console.log(await res.json());
}
構文・設計の違いまとめ
| 項目 | Promise | async/await | Generator |
|---|---|---|---|
| 見た目の構造 | チェーン構造 | 同期的構造 | 明示的なステップ制御 |
| 非同期サポート | ✅ | ✅（awaitで内部的にPromise） | ❌（明示的にPromiseをyield） |
| 並列処理の簡便性 | ✅ | ⚠️ 要 Promise.all()
|
❌ やや難解 |
| 制御の細かさ | 中程度 | シンプル | 高い（中断・再開） |
| ライブラリ併用の必要性 | なし | なし | 必要（co / redux-saga） |
実務での設計判断フロー
① 非同期処理が1回だけ？ → async/await
② エラーをtry/catchで管理したい？ → async/await
③ 複数Promiseを並列に処理したい？ → Promise.all + async/await
④ 制御フローを段階的に記述したい？ → Generator + ライブラリ
⑤ 同期・非同期の“混在”処理？ → Generatorが最適
よくあるミス
❌ async関数は Promise を返すことを忘れる
async function example() {
return 42;
}
example().then(v => console.log(v)); // 42（Promiseで返ってくる）
❌ await の使いすぎによる逐次化
// ❌ 順番に実行されて非効率
const a = await fetchA();
const b = await fetchB();
// ✅ 並列化
const [a, b] = await Promise.all([fetchA(), fetchB()]);
結語
非同期制御構文は、ただの書き方ではない。
制御の明確さ、エラー処理の一貫性、並列性、再利用性――
それらを設計としてどう選び、組み立てるかが問われている。
-
Promiseは構造化の基盤 -
async/awaitは可読性の王者 -
Generatorは制御性の鬼神
構文を知るだけでは設計にはならない。
“選ぶ理由”を理解し、“捨てる理由”を持てることが、設計者の第一歩である。