Reactで、並べ替えの動きを棒グラフで見せる方法

export type Bar = { id: number; value: number };

export type Step = {
  bars: Bar[]; // この時点での並び
  comparing: [number, number] | null; // 比べている2本の位置
  swapped: boolean; // この手で入れ替えたか
  sortedFrom: number; // この位置から右は並べ終わっている
  compares: number; // ここまでに比べた回数
  swaps: number; // ここまでに入れ替えた回数
};

// バブルソートを最後まで進め、1回比べるごとの様子を配列にして返す
export function bubbleSortSteps(input: Bar[]): Step[] {
  const bars = [...input];
  const n = bars.length;
  let compares = 0;
  let swaps = 0;
  const steps: Step[] = [
    { bars: [...bars], comparing: null, swapped: false, sortedFrom: n, compares, swaps },
  ];
  for (let end = n - 1; end > 0; end--) {
    for (let i = 0; i < end; i++) {
      compares++;
      const swapped = bars[i].value > bars[i + 1].value;
      if (swapped) {
        [bars[i], bars[i + 1]] = [bars[i + 1], bars[i]];
        swaps++;
      }
      steps.push({ bars: [...bars], comparing: [i, i + 1], swapped, sortedFrom: end + 1, compares, swaps });
    }
  }
  steps.push({ bars: [...bars], comparing: null, swapped: false, sortedFrom: 0, compares, swaps });
  return steps;
}

// 1〜n の値を Fisher–Yates で混ぜた棒を作る
export function shuffledBars(n: number): Bar[] {
  const values = Array.from({ length: n }, (_, i) => i + 1);
  for (let i = n - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [values[i], values[j]] = [values[j], values[i]];
  }
  return values.map((value, id) => ({ id, value }));
}

手の数（最初と最後を含む）: 47
比べた回数: 45  入れ替えた回数: 22  転倒数（別に数えた値）: 22
最後の並び: 1 2 3 4 5 6 7 8 9 10
最初の5手:
  5 9 2 7 1 8 3 10 6 4 null 
  5 9 2 7 1 8 3 10 6 4 [ 0, 1 ] 
  5 2 9 7 1 8 3 10 6 4 [ 1, 2 ] 入れ替え
  5 2 7 9 1 8 3 10 6 4 [ 2, 3 ] 入れ替え
  5 2 7 1 9 8 3 10 6 4 [ 3, 4 ] 入れ替え
  5 2 7 1 8 9 3 10 6 4 [ 4, 5 ] 入れ替え
入力はそのまま: 5 9 2 7 1 8 3 10 6 4

import { useEffect, useMemo, useState, type CSSProperties } from 'react';
import { bubbleSortSteps, shuffledBars, type Bar } from './sortSteps';

const SLOT = 32; // 1本ぶんの横幅（px）
const DELAY = 400; // 1手を表示しておく時間（ms）

type Props = { initial?: Bar[]; count?: number };

export function SortVisualizer({ initial, count = 10 }: Props) {
  const [bars, setBars] = useState<Bar[]>(() => initial ?? shuffledBars(count));
  const steps = useMemo(() => bubbleSortSteps(bars), [bars]);
  const [index, setIndex] = useState(0);
  const [playing, setPlaying] = useState(false);

  const step = steps[index];
  const done = index === steps.length - 1;
  const max = Math.max(...bars.map((b) => b.value));

  // 再生中は、DELAY ごとに1手ずつ進める
  useEffect(() => {
    if (!playing || done) return;
    const timer = setTimeout(() => setIndex((i) => i + 1), DELAY);
    return () => clearTimeout(timer);
  }, [playing, done, index]);

  const handlePlay = () => {
    if (done) setIndex(0);
    setPlaying(true);
  };
  const handleShuffle = () => {
    setBars(shuffledBars(count));
    setIndex(0);
    setPlaying(false);
  };

  // id から「いま何番目にあるか」を引けるようにする
  const position = new Map(step.bars.map((b, i) => [b.id, i]));

  return (
    <div className="sv">
      <div className="sv-chart" style={{ width: bars.length * SLOT }}>
        {/* DOM の並びは id の順のまま変えず、位置は transform だけで動かす */}
        {bars.map((bar) => {
          const i = position.get(bar.id)!;
          const state =
            step.comparing?.includes(i) ? 'comparing' : i >= step.sortedFrom ? 'sorted' : 'idle';
          const style: CSSProperties = {
            height: `${(bar.value / max) * 100}%`,
            width: SLOT - 6,
            transform: `translateX(${i * SLOT}px)`,
          };
          return (
            <div key={bar.id} className="sv-bar" data-state={state} style={style}>
              <span>{bar.value}</span>
            </div>
          );
        })}
      </div>

      <p className="sv-status">
        比べた回数 {step.compares}、入れ替えた回数 {step.swaps}
        <br />
        {done ? '並べ終わりました。' : step.swapped ? '入れ替えました。' : ''}
      </p>

      <div className="sv-buttons">
        {playing && !done ? (
          <button type="button" onClick={() => setPlaying(false)}>一時停止</button>
        ) : (
          <button type="button" onClick={handlePlay}>{done ? 'もう一度再生' : '再生'}</button>
        )}
        <button type="button" onClick={() => setIndex((i) => i + 1)} disabled={playing || done}>
          1手進める
        </button>
        <button type="button" onClick={handleShuffle}>並べ直す</button>
      </div>
    </div>
  );
}

.sv { display: grid; gap: 12px; font-size: 15px; color: #1f2a30; }
.sv-chart { position: relative; height: 200px; border-bottom: 2px solid #1f2a30; }
.sv-bar {
  position: absolute; left: 3px; bottom: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background: #00c8e8; border-radius: 4px 4px 0 0;
  transition: transform 300ms ease, background-color 150ms;
}
.sv-bar span { font-size: 12px; padding-bottom: 4px; }
.sv-bar[data-state='comparing'] { background: #d85878; }
.sv-bar[data-state='sorted'] { background: #067a98; color: #fff; }
.sv-status { margin: 0; min-height: 3em; line-height: 1.5; }
.sv-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-buttons button { padding: 8px 14px; font: inherit; }
@media (prefers-reduced-motion: reduce) {
  .sv-bar { transition: none; }
}