概要
非同期処理は「待つ」ことではなく、「壊さずに流す」ことが本質である。
UI・ネットワーク・ユーザー操作など、あらゆる外部依存と共存するために、非同期設計は“構造的な設計行為”である必要がある。
本稿では以下の観点から、モダンな非同期アーキテクチャを構築する：
- Promiseチェーンと責務分離
- async/await構文の設計的使いどころ
- 明示的なtry/catchによる例外管理
- 並列・直列の処理設計
- タイムアウト・キャンセルの戦略
- 非同期処理と状態管理の分離
1. Promiseチェーンの基本と構造化
fetch('/api/user')
.then(res => res.json())
.then(data => updateUI(data))
.catch(err => handleError(err));
- ✅
.then()で段階的に責務を分離 - ✅
.catch()で末尾にグローバルエラー処理を配置 - ❌ ネストが深くなる or 複数ルートがあると破綻しやすい
2. async/awaitの設計的導入
async function loadUser() {
try {
const res = await fetch('/api/user');
const data = await res.json();
updateUI(data);
} catch (err) {
handleError(err);
}
}
- ✅ 直線的な記述で構造が読みやすい
- ✅
try/catchによる明示的な境界管理
3. 非同期処理の分割と命名の原則
async function fetchUser(id) {
const res = await fetch(`/api/user/${id}`);
return res.json();
}
async function handleUserLoad(id) {
try {
const user = await fetchUser(id);
updateUI(user);
} catch (e) {
showError('ユーザーの読み込みに失敗しました');
}
}
- ✅ 非同期処理を関数に分割
- ✅ それぞれの関数に名前と責務を与える
4. 並列 vs 直列：Promise.all の責務
// 並列実行
const [user, posts] = await Promise.all([
fetchUser(),
fetchPosts()
]);
- ✅ 非依存タスク →
Promise.all()で並列に - ✅ 依存あり → 逐次await
→ 依存関係に応じた流れの設計が重要
5. タイムアウト／キャンセルの戦略
✅ Promiseを自作してタイムアウトを制御
function timeout(ms) {
return new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), ms)
);
}
const result = await Promise.race([
fetch('/api/data'),
timeout(5000)
]);
→ ✅ 外部APIや通信の**“戻ってこない問題”**に構造的に対応
6. イベント駆動と非同期処理の統合
button.addEventListener('click', async () => {
try {
const data = await fetchData();
render(data);
} catch (err) {
notifyUser('読み込みに失敗しました');
}
});
- ✅ イベントハンドラもasyncにできる
- ✅ UIイベント → async処理 → エラーハンドリングの流れを明示
7. 状態管理と非同期処理の責務分離
async function fetchAndUpdate() {
try {
setLoading(true);
const data = await fetchData();
setData(data);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
}
- ✅ **UIの状態（ローディング・成功・失敗）**を明確に分けて管理
- ✅ try/catch/finally構造で一貫性ある制御
設計判断フロー
① 流れが読みにくい？ → async/awaitで直列化
② 複数の非同期がある？ → 関数ごとに分割して明示
③ 外部通信に依存？ → タイムアウト/キャンセルを実装
④ 処理順序に依存あり？ → awaitを直列に配置
⑤ UIや状態に関与？ → try/catch/finallyで責務分離
よくあるミスと対策
❌ try/catchを書かずにasync処理を放置
→ ✅ async関数内では明示的にエラーハンドリングすべき
❌ 複数awaitを順番に実行して無駄な待機
→ ✅ 依存がなければ Promise.all() で並列に
❌ ローディング・成功・エラー状態が曖昧
→ ✅ 状態管理の責務を明示して制御する
結語
非同期処理は、ただの構文ではなく“設計構造”である。
- awaitの位置は責任の境界
- try/catchは安全性の保証
- 状態と処理を分けることで、ロジックは壊れなくなる
非同期を設計するとは、“流れを制御可能にし、副作用を閉じ込める”ことである。
その構造こそが、堅牢なアプリケーションの基盤を作る。