Async/Promise タイムライン ビジュアライザー
非同期処理の実行順をタイムラインで視覚化。Promise・async/await の流れを動かして学ぼう
速度:
fetch("/api/user")
.then(res => res.json())
.then(data => data.name)
.then(name => console.log(name));「▶ 実行」を押すとタイムラインが表示されます
イベントをクリックすると詳細が表示されます
実行中完了エラー待機中
使い方
- 上部のプリセットから学びたい非同期パターンを選ぼう（setTimeout / Promise.then / async/await など）
- 速度（0.5x / 1x / 2x）を選んで「▶ 実行」ボタンをクリック
- タイムラインにイベントバーがリアルタイムで追加されていく様子を観察しよう
- バーをクリックすると右の詳細パネルに説明が表示される
- コード表示エリアで実際のコードと照らし合わせて、実行順を確認しよう