「非同期APIを順に呼び出して、結果が1つずつアニメ表示される」 デモ
See the Pen Asynchronous API Sequential Processing Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.
実行の流れ
1️⃣ 「▶️ 開始」ボタンをクリック
2️⃣ async generator（fetchSequentially）が1件ずつAPIを呼び出す
3️⃣ 各結果を1秒おきにカードとして下に追加
4️⃣ CSSでフェードイン＋スライドアニメーション表示
学べるポイント
| 概念 | 使われている箇所 |
|---|---|
async generator (async function*) | 順番にAPIを処理しつつ結果を逐次返す |
| for await…of | 非同期イテレーターから値を1つずつ受け取る |
| Promise + await | API呼び出しの順序制御 |
| DOM操作 + CSSアニメ | データ表示を視覚的に演出 |
発展アイデア
- ✅ ダーク／ライトモード切替ボタンを追加
- 🌀 ローディングスピナーを表示
- 🌍 API URL を入力できるフォーム
- ⚙️ 並列モードと逐次モードの比較ボタン
