概要
現代のUIは非同期で動く。
ユーザーが「何かを待っている」状態に対し、ローディング表示やエラーメッセージ、再試行機能などの応答をどう設計するかが、UXの質と信頼性を決定づける。
本稿では、以下の観点から非同期フローとUI設計を体系化する：
- ローディング状態の明示と制御
- エラーの捕捉とUI通知
- 再試行戦略とユーザーの選択肢設計
- 状態遷移の構造化（状態管理・フラグ・ステートマシン）
- 抽象化による再利用可能な非同期UI構造
1. ローディング状態の構造化
✅ 明示的なローディングフラグの導入
let isLoading = false;
async function fetchData() {
isLoading = true;
try {
const res = await fetch('/api/user');
const data = await res.json();
updateUI(data);
} catch (e) {
showError(e);
} finally {
isLoading = false;
}
}
→ ✅ finally で必ず解除する構造に
→ ✅ フラグ名は isLoading / isSubmitting など文脈で分ける
2. エラー処理とユーザー通知
✅ try/catch + 明示的なUI表示
let errorMessage = '';
try {
await fetchData();
} catch (e) {
errorMessage = 'データの取得に失敗しました';
}
→ ✅ 「なぜ失敗したか」「次にどうすればいいか」を伝えるメッセージ設計が重要
3. 再試行戦略：明示的なリトライ設計
async function tryFetch(retry = 3) {
for (let i = 0; i < retry; i++) {
try {
return await fetchData();
} catch (e) {
if (i === retry - 1) throw e;
}
}
}
- ✅ 自動再試行は限定的に使う（例：ネット不安定時）
- ✅ 明示的な再試行ボタンもUIとして用意
4. 状態モデルの設計（構造化）
const state = {
status: 'idle', // idle | loading | success | error
data: null,
error: null
};
→ ✅ 状態を文字列・enumで管理すると、分岐が明示的になりUI設計が簡潔になる
5. UIコンポーネントでの非同期ハンドリング
✅ 状態に応じて描画を切り替える
if (state.status === 'loading') {
return showSpinner();
} else if (state.status === 'error') {
return showError(state.error);
} else if (state.status === 'success') {
return renderData(state.data);
}
→ ✅ ロジックとUIの分離が保たれ、状態に応じたUIが意図通り動作する
6. 汎用ラッパー関数で共通化
async function withLoading(action, stateRef) {
stateRef.status = 'loading';
try {
const result = await action();
stateRef.status = 'success';
stateRef.data = result;
} catch (e) {
stateRef.status = 'error';
stateRef.error = e.message;
}
}
→ ✅ 複数の非同期関数に共通の状態管理構造を適用可能
7. トースト通知やダイアログの設計ポイント
- ✅ エラーは“目立つUI”で即時に伝える
- ✅ トーストは短時間・非ブロッキングで適切
- ✅ モーダルは「致命的エラー」や「操作が必要なとき」に限定
設計判断フロー
① 待ち時間が1秒以上ある？ → ローディングUI表示
② 失敗する可能性がある？ → エラーメッセージ + 再試行導線
③ 状態が複数存在する？ → statusを用いた状態遷移モデルに
④ UI更新の責務が集中？ → withLoadingなどで共通化
⑤ ユーザー通知は十分か？ → トーストやUIメッセージで即時性を担保
よくあるミスと対策
❌ ローディング中に多重発火
→ ✅ isLoading を使ってボタンを一時無効化
❌ エラーを握り潰してユーザーに何も伝えない
→ ✅ UIにフィードバックを必ず表示する
❌ 成功・失敗でUIが更新されない
→ ✅ 状態フラグとレンダリングの紐づけを明確にする
結語
非同期フローとは「ユーザーの待ち」と「アプリケーションの応答」をつなぐ設計である。
- 待ち時間は明示する
- エラーは伝える
- 成功は確実に表示する
- 状態遷移は構造で示す
- 複雑化したらラップして抽象化する
ユーザーにとって重要なのは、“操作に対して意味のある反応があること”。
その非同期は、意味のある設計として成立しているか？