UI から追う

説明の基準の「UI」では、アプリの画面を入口にしてコードを読みます。「このボタンを押すとどこへ移るのか」「この部品はどのファイルの何行目か」から追えます。今は TypeScript・React・Next.js のプロジェクトで使えます。

図（開発サーバーなし）

「図」では、コードを読むだけで画面のつながりを描きます。開発サーバーを立てる必要はありません。

アプリの形	ノード	矢印
Next.js（App Router）	ページとレイアウト	どのリンク・ボタン・router.push でどのページへ移るか（ラベルにボタンの名前）
ページの無い React のアプリ（Vite の SPA・Electron の画面・React Router）	画面のまとまり: 入口の部品（画面全体）・状態で切り替わる区画・タブ・引き出し・ダイアログ・React Router の経路	どのボタン・タブ・キーでどのまとまりに切り替わるか

• ノードを押すと掘り下げて、中の部品の木（どの部品がどの部品を使っているか）が開きます
• 部品を選ぶと、左のコードがその要素を書いた行へ移ります。同じ部品を 2 か所で使っていれば、何回目の使用かも分かります。下の段には出る条件（どの状態のときに出るか）と、押したときの行き先が出ます
• 左上に数（「ページ 7・遷移 16」「まとまり 18・切り替え 24」など）が出ます。React の部品が無いプロジェクトでは、図が空の理由を出します

実画面（開発サーバーの画面）

「実画面」に切り替えて開発サーバーの URL を入れると、そのアプリの画面が progLens の中に開きます。

• 画面の部品を押して選ぶと、その部品を書いたソースの行と部品の木へ飛びます
• コードの側から「実画面で示す」を押すと、その行が描いた要素を画面の上で強調します（spotlight）。強調した画面の画像は .proglens/local/shots/ に残ります
• コードを書き換えると（ホットリロード）、選んでいた部品を読み直して位置を合わせます

安全のため、開ける URL は自分の PC の localhost（ループバック）だけです。開発サーバーの画面は progLens 本体とは別の領域で動き、progLens の中の情報には触れません。開発サーバーは自分で立ててください（progLens は立てません）。