Reactで、画面の部品を順に案内する使い方ガイドを作る方法

const STEPS: TourStep[] = [
  { target: 'search', title: 'メモを探す', body: 'ここに言葉を入れると、メモを絞り込めます。' },
  { target: 'new', title: 'メモを作る', body: '新しいメモは、このボタンから作ります。' },
  { target: 'list', title: 'メモの一覧', body: '作ったメモは、新しい順にここへ並びます。' },
  { target: 'settings', title: '設定', body: '文字の大きさなどは、ページの下の設定で変えられます。' },
];

return (
    <main>
      <header className="bar">
        <input data-tour="search" type="search" placeholder="メモを検索" aria-label="メモを検索" />
        <button data-tour="new" type="button" onClick={() => setCount(count + 1)}>
          ＋ 新規
        </button>
      </header>
      <p data-testid="count">作ったメモ：{count}</p>
      <ul data-tour="list" className="notes">
        <li>買い物のメモ</li>
        <li>読みたい本</li>
        <li>旅行の持ち物</li>
      </ul>
      <button type="button" className="help" onClick={() => setTouring(true)}>
        使い方を見る
      </button>
      <div className="spacer" />
      <button data-tour="settings" type="button">
        設定
      </button>
      {touring && <Tour steps={STEPS} onClose={handleClose} />}
    </main>
  );

return (
    <dialog
      ref={dialogRef}
      className={spot ? 'tour' : 'tour no-target'}
      aria-labelledby="tour-title"
      aria-describedby="tour-body"
      onClose={() => onClose(finished.current)}
    >
      {spot && (
        <div
          className="tour-spot"
          style={{ left: spot.left, top: spot.top, width: spot.width, height: spot.height }}
        />
      )}
      <div ref={cardRef} className="tour-card" style={{ left: card.left, top: card.top }}>
        <p className="tour-count">
          {index + 1} / {steps.length}
        </p>
        <h2 id="tour-title">{step.title}</h2>
        <p id="tour-body">{step.body}</p>
        <div className="tour-buttons">
          <button type="button" className="tour-skip" onClick={() => close(false)}>
            スキップ
          </button>
          {index > 0 && (
            <button type="button" onClick={() => setIndex(index - 1)}>
              戻る
            </button>
          )}
          <button
            type="button"
            className="tour-next"
            onClick={() => (last ? close(true) : setIndex(index + 1))}
          >
            {last ? '完了' : '次へ'}
          </button>
        </div>
      </div>
    </dialog>
  );

.tour { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.tour::backdrop { background: transparent; }
.tour.no-target::backdrop { background: rgb(0 0 0 / 0.5); }
.tour-spot { position: fixed; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.5); }

// 開いたら、後ろを操作できないモーダルとして出す（閉じた dialog の中は測れないので、測るより先に）
  useLayoutEffect(() => {
    const d = dialogRef.current!;
    if (!d.open) d.showModal();
  }, []);

dialog: open=true modal=true labelledby=tour-title describedby=tour-body
「＋ 新規」の位置をクリック: 作ったメモ：0

/: dialog open=true / フォーカス button「次へ」
  カード left=14 top=73.59375 right=314 bottom=252.359375
/effect/: dialog open=true / フォーカス button「スキップ」
  カード left=14 top=73.59375 right=314 bottom=252.359375

// 部品の位置を測り、光らせる枠とカードの位置を決める
  const measure = useCallback(() => {
    const el = findTarget(step);
    const { width: cw, height: ch } = cardRef.current!.getBoundingClientRect();
    const vw = document.documentElement.clientWidth;
    const vh = window.innerHeight;
    const r = el?.getBoundingClientRect();
    if (!r || (r.width === 0 && r.height === 0)) {
      // 部品が見つからないか、display: none などで表示されていなければ、枠を出さずにカードを画面の真ん中に置く
      setSpot(null);
      setCard({ left: (vw - cw) / 2, top: (vh - ch) / 2 });
      return;
    }
    const s = { left: r.left - PAD, top: r.top - PAD, width: r.width + PAD * 2, height: r.height + PAD * 2 };
    // 下に入れば下、入らなければ上に置く。どちらでも、カードは画面の中に収める
    const below = s.top + s.height + GAP;
    const top = below + ch <= vh - MARGIN ? below : s.top - GAP - ch;
    // 左は部品にそろえ、画面からはみ出す分だけ内側へずらす
    const left = Math.min(Math.max(MARGIN, s.left), vw - MARGIN - cw);
    setSpot(s);
    setCard({ left, top: Math.min(Math.max(MARGIN, top), vh - MARGIN - ch) });
  }, [step]);

次へ: 2 / 4 メモを作る
  部品  left=288.40625 top=16 right=370 bottom=55.59375
  枠    left=282.40625 top=10 right=376 bottom=61.59375
  カード left=82 top=73.59375 right=382 bottom=252.359375
次へ: 3 / 4 メモの一覧
  部品  left=20 top=113.1875 right=370 bottom=240.96875
  枠    left=14 top=107.1875 right=376 bottom=246.96875
  カード left=14 top=258.96875 right=314 bottom=437.734375

// 部品を画面の真ん中あたりへスクロールしてから測る
  const bringIntoView = useCallback(() => {
    findTarget(step)?.scrollIntoView({ block: 'center', inline: 'nearest' });
    measure();
  }, [step, measure]);

// ステップが変わったら、部品を画面に入れて測り、「次へ」にフォーカスを移す
  useLayoutEffect(() => {
    bringIntoView();
    cardRef.current!.querySelector<HTMLElement>('.tour-next')!.focus();
  }, [bringIntoView]);

ページの高さ（scrollHeight）: 1252
scrollY: 612
次へ: 4 / 4 設定
  部品  left=20 top=584.5625 right=82.015625 bottom=624.15625
  枠    left=14 top=578.5625 right=88.015625 bottom=630.15625
  カード left=14 top=387.796875 right=314 bottom=566.5625
ボタン: スキップ / 戻る / 完了

// スクロールしたら測り直す。画面の大きさが変わったら、部品を画面に入れ直す
  useEffect(() => {
    window.addEventListener('scroll', measure, true);
    window.addEventListener('resize', bringIntoView);
    return () => {
      window.removeEventListener('scroll', measure, true);
      window.removeEventListener('resize', bringIntoView);
    };
  }, [measure, bringIntoView]);

ホイールで上へ: 4 / 4 設定
  部品  left=20 top=784.5625 right=82.015625 bottom=824.15625
  枠    left=14 top=778.5625 right=88.015625 bottom=830.15625
  カード left=14 top=453.234375 right=314 bottom=632
さらに上へ: 4 / 4 設定
  部品  left=20 top=1184.5625 right=82.015625 bottom=1224.15625
  枠    left=14 top=1178.5625 right=88.015625 bottom=1230.15625
  カード left=14 top=453.234375 right=314 bottom=632

高さを 400px に: 4 / 4 設定
  部品  left=20 top=344.5625 right=82.015625 bottom=384.15625
  枠    left=14 top=338.5625 right=88.015625 bottom=390.15625
  カード left=14 top=147.796875 right=314 bottom=326.5625

function close(done: boolean) {
    finished.current = done;
    dialogRef.current!.close();
  }

const KEY = 'tour-done';

function loadDone() {
  try {
    return localStorage.getItem(KEY) === '1';
  } catch {
    return false;
  }
}

export function App() {
  // 最初の訪問だけ、自動でガイドを出す
  const [touring, setTouring] = useState(() => !loadDone());
  const [count, setCount] = useState(0);

  function handleClose(finished: boolean) {
    setTouring(false);
    try {
      localStorage.setItem(KEY, '1');
    } catch {
      // 保存できなくても、ガイドは閉じる
    }
    document.title = finished ? '完了で閉じた' : 'スキップで閉じた';
  }

--- 完了 ---
dialog: なし / title: 完了で閉じた / localStorage: 1
--- 2回目の訪問 ---
dialog: なし
「使い方を見る」: 1 / 4 メモを探す
Esc: dialog なし / title: スキップで閉じた / フォーカス button「使い方を見る」
スキップ: dialog なし / title: スキップで閉じた / フォーカス button「使い方を見る」

一覧の data-tour を外して3つ目へ: 3 / 4 メモの一覧
  枠    なし
  カード left=45 top=230.609375 right=345 bottom=409.375
::backdrop の色: rgba(0, 0, 0, 0.5)
「＋ 新規」を display: none にして2つ目へ: 2 / 4 メモを作る
  枠    なし
  カード left=45 top=230.609375 right=345 bottom=409.375