Reactで、画像をクリックして大きく表示するライトボックスを作る方法

import { useEffect, useRef, useState } from 'react';
import type { KeyboardEvent, MouseEvent } from 'react';

export type Photo = {
  thumb: string; // 一覧に出す小さい画像
  full: string; // 拡大して見せる画像
  alt: string;
};

export function Lightbox({ photos }: { photos: Photo[] }) {
  // 開いている画像の番号。閉じているときは null
  const [index, setIndex] = useState<number | null>(null);
  const dialogRef = useRef<HTMLDialogElement>(null);
  const thumbRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const isOpen = index !== null;

  // state に合わせて、dialog をモーダルとして開く・閉じる
  useEffect(() => {
    const dialog = dialogRef.current!;
    if (isOpen && !dialog.open) dialog.showModal();
    if (!isOpen && dialog.open) dialog.close();
  }, [isOpen]);

  // いま開いている画像の、前と次の画像を先に読み込んでおく
  useEffect(() => {
    if (index === null) return;
    for (const step of [-1, 1]) {
      const img = new Image();
      img.src = photos[(index + step + photos.length) % photos.length].full;
    }
  }, [index, photos]);

  // 端まで行ったら反対の端へ回る
  function move(step: number) {
    setIndex((i) => (i === null ? i : (i + step + photos.length) % photos.length));
  }

  // Esc キー、閉じるボタン、画像の外のクリックのどれで閉じても、ここを通る
  function handleClose() {
    // 最後に見ていた画像のサムネイルへフォーカスを移す
    if (index !== null) thumbRefs.current[index]?.focus();
    setIndex(null);
  }

  function handleKeyDown(e: KeyboardEvent) {
    if (e.key === 'ArrowLeft') move(-1);
    if (e.key === 'ArrowRight') move(1);
  }

  // 画像やボタンではなく、dialog 自身（画像のまわりの暗い所）を押したら閉じる
  function handleClick(e: MouseEvent<HTMLDialogElement>) {
    if (e.target === e.currentTarget) e.currentTarget.close();
  }

  const photo = index === null ? null : photos[index];

  return (
    <>
      <ul className="thumbs">
        {photos.map((p, i) => (
          <li key={p.full}>
            <button
              type="button"
              ref={(el) => {
                thumbRefs.current[i] = el;
              }}
              onClick={() => setIndex(i)}
            >
              <img src={p.thumb} alt={p.alt} width={240} height={160} />
            </button>
          </li>
        ))}
      </ul>

      <dialog
        ref={dialogRef}
        className="lightbox"
        aria-label="画像の拡大表示"
        onClose={handleClose}
        onKeyDown={handleKeyDown}
        onClick={handleClick}
      >
        {photo && (
          <>
            {/* key を変えて、画像が替わるたびに作り直す */}
            <FullImage key={photo.full} photo={photo} />
            <p className="lightbox-count">
              {index! + 1} / {photos.length}
            </p>
            <button type="button" className="lightbox-prev" aria-label="前の画像" onClick={() => move(-1)}>
              ‹
            </button>
            <button type="button" className="lightbox-next" aria-label="次の画像" onClick={() => move(1)}>
              ›
            </button>
            <button type="button" className="lightbox-close" aria-label="閉じる" onClick={() => dialogRef.current!.close()}>
              ×
            </button>
          </>
        )}
      </dialog>
    </>
  );
}

// 読み込みが終わるまでは「読み込み中…」を出し、画像は隠しておく
function FullImage({ photo }: { photo: Photo }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <>
      {!loaded && <p className="lightbox-loading">読み込み中…</p>}
      <img
        className="lightbox-image"
        src={photo.full}
        alt={photo.alt}
        onLoad={() => setLoaded(true)}
        style={{ visibility: loaded ? 'visible' : 'hidden' }}
      />
    </>
  );
}

import { Lightbox } from './Lightbox';
import type { Photo } from './Lightbox';

const photos: Photo[] = [1, 2, 3, 4, 5].map((n) => ({
  thumb: `thumb/${n}.png`,
  full: `large/${n}.png`,
  alt: `番号 ${n} の画像`,
}));

export function App() {
  return (
    <main>
      <h1>画像の一覧</h1>
      <Lightbox photos={photos} />
    </main>
  );
}

画像の上をクリック: 開いている / 2 / 5 / alt「番号 2 の画像」
画像の外（下の端）をクリック: 閉じている
「閉じる」ボタン: 閉じている
Esc キー: 閉じている
閉じたあと、もう一度開く: 開いている / 2 / 5 / alt「番号 2 の画像」

/* dialog を画面いっぱいに広げ、まん中に画像を置く */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(0 0 0 / 0.85);
  color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
/* 画面より大きい画像は、縦横の比を保ったまま画面に収める */
.lightbox-image {
  grid-area: 1 / 1;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 96px);
}
.lightbox-loading { grid-area: 1 / 1; margin: 0; }

画面 800×600 / 番号 1（元の大きさ 1600×1067）: 表示 755.8×504.0、縦横の比 元 1.500 → 表示 1.500、左上 (22.1, 48.0)
画面 800×600 / 番号 3（元の大きさ 800×1200）: 表示 336.0×504.0、縦横の比 元 0.667 → 表示 0.667、左上 (232.0, 48.0)
画面 360×640 / 番号 1（元の大きさ 1600×1067）: 表示 328.0×218.7、縦横の比 元 1.500 → 表示 1.499、左上 (16.0, 210.6)
画面 360×640 / 番号 3（元の大きさ 800×1200）: 表示 328.0×492.0、縦横の比 元 0.667 → 表示 0.667、左上 (16.0, 74.0)

→ キーを2回: 開いている / 3 / 5 / alt「番号 3 の画像」
← キーを3回: 開いている / 5 / 5 / alt「番号 5 の画像」
「次の画像」ボタン: 開いている / 1 / 5 / alt「番号 1 の画像」
「前の画像」ボタン: 開いている / 5 / 5 / alt「番号 5 の画像」

<             <FullImage key={photo.full} photo={photo} />
---
>             <img className="lightbox-image" src={photo.full} alt={photo.alt} />

key あり（FullImage）: → の 300ms 後 / 開いている / 2 / 5 / alt「番号 2 の画像」 / 画像の色 rgb(35, 35, 35) / 読み込み中の表示 あり
key あり（FullImage）: 読み込み後 / 開いている / 2 / 5 / alt「番号 2 の画像」 / 画像の色 rgb(240, 170, 60) / 読み込み中の表示 なし
key なし（img の src だけ替える）: → の 300ms 後 / 開いている / 2 / 5 / alt「番号 2 の画像」 / 画像の色 rgb(64, 160, 220) / 読み込み中の表示 なし
key なし（img の src だけ替える）: 読み込み後 / 開いている / 2 / 5 / alt「番号 2 の画像」 / 画像の色 rgb(240, 170, 60) / 読み込み中の表示 なし

先読みあり: 番号 1 を開いて 1.2 秒待つまでに要求された画像: large/1.png, large/5.png, large/2.png
先読みあり: → の 50ms 後 / 開いている / 2 / 5 / alt「番号 2 の画像」 / 読み込み中の表示 なし
先読みなし（new Image() を止めたページ）: 番号 1 を開いて 1.2 秒待つまでに要求された画像: large/1.png
先読みなし（new Image() を止めたページ）: → の 50ms 後 / 開いている / 2 / 5 / alt「番号 2 の画像」 / 読み込み中の表示 あり

番号 1 のサムネイルで Enter: 開いている / 1 / 5 / alt「番号 1 の画像」
→ キーを2回: 開いている / 3 / 5 / alt「番号 3 の画像」
Esc で閉じた直後（React の onClose の前）のフォーカス: サムネイル「番号 1 の画像」
onClose のあとのフォーカス: サムネイル「番号 3 の画像」
そのまま Enter: 開いている / 3 / 5 / alt「番号 3 の画像」

/* 開いている間は、後ろのページをスクロールさせない */
html:has(.lightbox[open]) { overflow: hidden; }

html:has(.lightbox[open]) { overflow: hidden } あり: 開いた直後の scrollY 286 → 開いたままホイールで 500px 分スクロールしたあと 286
なし: 開いた直後の scrollY 286 → 開いたままホイールで 500px 分スクロールしたあと 786