概要
非同期とは「遅延する」ことではない。
それは**“待つことを制御し、失敗を受け入れ、構造として管理する”**ことに他ならない。
JavaScriptはイベント駆動・シングルスレッド。
非同期処理はアプリの応答性・性能・安全性に直結する。
本稿では、非同期処理を「動作」ではなく「設計」として扱うための戦略を解説する。
1. Promise と async/await の設計原則
✅ async/await は Promise をラップした構造
async function getData() {
const res = await fetch('/api/data');
return await res.json();
}
- ✅
awaitは “その場で中断”ではなく、“Promiseの完了を待って次へ” - ✅ 例外は
try-catchで受ける → 明確な制御構造を持つ
2. 並列 vs 直列：Promise.all / for-await-of の使い分け
✅ 並列に投げる
const [a, b] = await Promise.all([fetchA(), fetchB()]);
✅ 直列で制御する
for (const url of urls) {
const res = await fetch(url);
handle(res);
}
- ✅ 並列：全て同時に開始してまとめて取得
- ✅ 直列：順番や依存がある場合に必須
3. 非同期エラーの捕捉と伝播
async function safeFetch(url) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error('Fetch failed');
return await res.json();
} catch (e) {
return { ok: false, error: e.message };
}
}
- ✅ catch内で構造的なエラー返却を設計
- ✅ 失敗時にも UI が破綻しない構造が必要
4. キャンセル可能な非同期：AbortController の利用
const controller = new AbortController();
fetch('/api', { signal: controller.signal });
setTimeout(() => controller.abort(), 3000);
- ✅ 重複リクエストやコンポーネント破棄時のキャンセルに有効
- ✅ UI操作と連動して非同期のキャンセル設計を導入すべき
5. UIと非同期の境界設計
❌ UI側で直接fetchを実行し状態が管理されない
button.onclick = () => {
fetch('/api'); // 非管理な副作用
};
✅ UI → ロジック層（サービス） → fetch / 処理
async function onClick() {
const data = await fetchUser();
setUser(data);
}
- ✅ 状態と副作用は分離して再現性とテスト性を確保
6. 非同期状態の「今」をUIで表現する
const [loading, setLoading] = useState(false);
const onClick = async () => {
setLoading(true);
try {
const data = await fetchData();
setData(data);
} finally {
setLoading(false);
}
};
- ✅ ローディング・成功・失敗を明示的に管理
- ✅ 非同期の「今の状態」をUIで表現し、体験と同期する
設計判断フロー
① async/await を単に使うだけでなく、責務に応じた関数構成になっているか？
② 並列にできる処理を逐次で書いていないか？
③ エラーが握りつぶされていないか？ → catch構造を明示
④ UI破棄時にも非同期処理が生きていないか？ → AbortController活用
⑤ UIと非同期処理が分離されているか？ → プレゼンテーション層とロジック層を区別
よくあるミスと対策
❌ 複数awaitを逐次で記述 → パフォーマンス劣化
→ ✅ Promise.all による並列化で高速化
❌ 非同期処理が途中でUIが破棄され、状態更新エラー
→ ✅ AbortControllerでキャンセル可能に設計 + cleanup設計
❌ UIが「何が起きているか」を示さずユーザーが混乱
→ ✅ loading, success, error を明示的にstate設計
結語
非同期とは「待つこと」ではない。
それは**“流れを制御し、今を把握し、未来を保証する”構造的な戦略**である。
- 並列と直列を分け
- エラーを受け入れて構造化し
- UIと非同期の責務を分離し
- 状態を「今」としてUIに同期する
JavaScriptにおける非同期設計とは、
“挙動ではなく構造として制御する、再現可能な戦略”である。