データの旅

データの旅は、データ 1 件（たとえば Todo の題名）が、入力欄から型・状態・API・サーバー・DB を通って画面に表示されるまでの道のりです。説明の基準の「データ」で開きます。

見方

• 段（入力・型・状態・API・サーバー・DB・表示など）を帯にして左から並べ、旅の 1 歩をカードにします。段の名前はプロジェクトごとに変えられます
• 段の間の矢印は、つながりの確かさで描き分けます。型や規則から機械が結べた辺は実線、AI が書いた継ぎ目は点線で、ラベルに動詞と理由が付きます
• 入口は旅の一覧と、DB の列（projects.name など）から「この列を読み書きしている場所」の一覧です

再生

再生の操作盤（最初へ・前へ・再生・次へ・歩の点）で進めます。1 歩ごとに次のように動きます。

1. 前の歩からの矢印に沿って光の点が進む
2. カメラがその歩のカードへ寄り、解説を見せる
3. 左のコードがその歩の行へ移って強調される

OS の「視差効果を減らす」を入れていると、移動を止めて強調だけにします。

誰が何を書くか

旅を書くのは AI ですが、機械が確実に分かることは AI に書かせません。

役	書くもの
AI	段の並びと各歩の解説、機械で結べない継ぎ目（フォームの name 属性と FormData のキーのような、文字列で結ばれたつながり）
機械（progLens の解析）	隣り合う段の間の辺（型の受け渡し・呼び出し・DB の境目の規則）。AI の書いた継ぎ目が実際のコードとつじつまが合うかも確かめます

TypeScript・Next.js・Supabase のプロジェクトでは、型の辺と規則（Server Action・Route Handler・supabase-js の select / insert・マイグレーションの SQL・zod）で多くの辺を機械が結びます。

台本

旅とツアーの各歩には、小さな語彙だけで書く動きの台本を付けられます。AI は語彙を並べるだけで、CSS や JavaScript は書きません。

語	動き
focus	図の視点をその対象へ寄せる
reveal	隠れていたカードを出す（図が段階的に組み上がる）
pulse-edge	辺に沿って光の点が進む
spotlight	画面の部品を強調する（開発サーバーの画面が開いていれば実画面で）
code	コードのパネルを対象へ動かして強調する
wait	間を取る

台本の無い歩は、既定の動き（光 → 視点 → コード）で再生します。段や歩の説明には、データの粒が動く図を入れることもできます（動く図）。