Reactで、ラップタイムを記録できるストップウォッチを作る方法

import { useEffect, useState } from 'react';

type Watch = {
  running: boolean;
  base: number;      // 止めるまでに計った時間の合計（ミリ秒）
  startedAt: number; // 動かし始めた時刻（performance.now()）
  splits: number[];  // ラップを押した時点の通算（ミリ秒）
};
const initial: Watch = { running: false, base: 0, startedAt: 0, splits: [] };

export function useStopwatch() {
  const [watch, setWatch] = useState<Watch>(initial);
  const [now, setNow] = useState(0);

  // 動いている間は、画面を描くたびに現在時刻を入れ直す
  useEffect(() => {
    if (!watch.running) return;
    let id = requestAnimationFrame(function tick() {
      setNow(performance.now());
      id = requestAnimationFrame(tick);
    });
    return () => cancelAnimationFrame(id);
  }, [watch.running]);

  const elapsed = watch.running ? watch.base + Math.max(0, now - watch.startedAt) : watch.base;

  const start = () => {
    if (watch.running) return;
    const t = performance.now();
    setNow(t);
    setWatch({ ...watch, running: true, startedAt: t });
  };
  const stop = () => {
    if (!watch.running) return;
    setWatch({ ...watch, running: false, base: watch.base + performance.now() - watch.startedAt });
  };
  // 押した瞬間の時刻で通算を出す。now もそろえておく（画面に出ている値は、最大で1コマ分古い）
  const lap = () => {
    if (!watch.running) return;
    const t = performance.now();
    setNow(t);
    setWatch({ ...watch, splits: [...watch.splits, watch.base + t - watch.startedAt] });
  };
  const reset = () => {
    setWatch(initial);
    setNow(0);
  };

  return { running: watch.running, elapsed, splits: watch.splits, start, stop, lap, reset };
}

// ミリ秒を、1/100秒（センチ秒）単位の整数に切り捨てる
export const toCentis = (ms: number) => Math.floor(ms / 10);

// 1/100秒の整数を「分:秒.1/100秒」にする。1時間以上なら頭に時間を付ける
export function formatCentis(cs: number): string {
  const h = Math.floor(cs / 360000);
  const m = Math.floor(cs / 6000) % 60;
  const s = Math.floor(cs / 100) % 60;
  const c = cs % 100;
  const pad = (n: number) => String(n).padStart(2, '0');
  const text = `${pad(m)}:${pad(s)}.${pad(c)}`;
  return h > 0 ? `${h}:${text}` : text;
}

--- formatCentis ---
       0 00:00.00
       9 00:00.00
      10 00:00.01
     999 00:00.99
   59999 00:59.99
   60000 01:00.00
 3599999 59:59.99
 3600000 1:00:00.00
 4523456 1:15:23.45

import { toCentis } from './time';

export type Lap = { no: number; lap: number; total: number }; // lap と total は 1/100秒

// 押した時点の通算（ミリ秒）の並びから、ラップを出す。
// 先に通算を 1/100秒に切り捨ててから引くので、ラップを足すと表示中の通算と一致する
export function toLaps(splits: number[]): Lap[] {
  const totals = splits.map(toCentis);
  return totals.map((total, i) => ({ no: i + 1, total, lap: total - (i === 0 ? 0 : totals[i - 1]) }));
}

// 最速と最遅のラップの値。ラップが2つ未満か、全部同じなら null
export function lapRange(laps: Lap[]): { min: number; max: number } | null {
  if (laps.length < 2) return null;
  const values = laps.map((l) => l.lap);
  const min = Math.min(...values);
  const max = Math.max(...values);
  return min === max ? null : { min, max };
}

押した時点の通算(ms): 1005, 2004, 3003, 4002
通算の表示          : 00:04.00
先に引いてから切り捨て: 00:01.00 00:00.99 00:00.99 00:00.99  合計 00:03.97
切り捨ててから引く    : 00:01.00 00:01.00 00:01.00 00:01.00  合計 00:04.00

$ node test/real.mjs
  1 | 00:00.35（最速） | 00:00.35
  2 | 00:00.37 | 00:00.72
  3 | 00:00.37 | 00:01.09
  4 | 00:00.37 | 00:01.46
  5 | 00:00.38 | 00:01.84
  6 | 00:00.38 | 00:02.22
  7 | 00:00.40（最遅） | 00:02.62
  8 | 00:00.40（最遅） | 00:03.02
表示されたラップの合計(1/100秒): 302  最後のラップの通算(1/100秒): 302

now をそろえる:
  押す直前の表示 00:01.20 → 途中のラップの行: 2 | 00:00.00 | 00:01.20
  押す直前の表示 00:02.19 → 途中のラップの行: 3 | 00:00.00 | 00:02.20
now をそろえない:
  押す直前の表示 00:01.20 → 途中のラップの行: 2 | 00:00.00 | 00:01.20
  押す直前の表示 00:02.19 → 途中のラップの行: 3 | -1:-1.-1 | 00:02.19

--- lapRange ---
1つだけ      : null
全部同じ     : null
1.20/0.90/1.50: { min: 90, max: 150 }

import { lapRange, toLaps } from './laps';
import { formatCentis, toCentis } from './time';
import { useStopwatch } from './useStopwatch';

export function Stopwatch() {
  const { running, elapsed, splits, start, stop, lap, reset } = useStopwatch();
  const total = toCentis(elapsed);
  const laps = toLaps(splits);
  const range = lapRange(laps);
  const current = total - (laps.at(-1)?.total ?? 0); // 計っている途中のラップ
  const idle = !running && elapsed === 0;

  return (
    <div>
      <p className="time">{formatCentis(total)}</p>
      {running ? (
        <>
          <button onClick={lap}>ラップ</button>
          <button onClick={stop}>停止</button>
        </>
      ) : (
        <>
          <button onClick={reset} disabled={idle}>リセット</button>
          <button onClick={start}>{idle ? '開始' : '再開'}</button>
        </>
      )}
      <table>
        <thead>
          <tr><th>ラップ</th><th>タイム</th><th>通算</th></tr>
        </thead>
        <tbody>
          {!idle && (
            <tr className="current">
              <td>{laps.length + 1}</td><td>{formatCentis(current)}</td><td>{formatCentis(total)}</td>
            </tr>
          )}
          {[...laps].reverse().map((l) => {
            const mark = l.lap === range?.min ? 'fastest' : l.lap === range?.max ? 'slowest' : undefined;
            return (
              <tr key={l.no} className={mark}>
                <td>{l.no}</td>
                <td>{formatCentis(l.lap)}{mark === 'fastest' ? '（最速）' : mark === 'slowest' ? '（最遅）' : ''}</td>
                <td>{formatCentis(l.total)}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

開いた直後:
00:00.00 [リセット(押せない) 開始]
「開始」を押した（時計で 0.000秒）:
00:00.00 [ラップ 停止]
  1 | 00:00.00 | 00:00.00  <current>
ラップを押す前（時計で 1.205秒）: 00:01.20
「ラップ」を押した（時計で 1.205秒）:
00:01.20 [ラップ 停止]
  2 | 00:00.00 | 00:01.20  <current>
  1 | 00:01.20 | 00:01.20
「ラップ」を押した（時計で 2.204秒）:
00:02.20 [ラップ 停止]
  3 | 00:00.00 | 00:02.20  <current>
  2 | 00:01.00（最速） | 00:02.20  <fastest>
  1 | 00:01.20（最遅） | 00:01.20  <slowest>
「ラップ」を押した（時計で 3.703秒）:
00:03.70 [ラップ 停止]
  4 | 00:00.00 | 00:03.70  <current>
  3 | 00:01.50（最遅） | 00:03.70  <slowest>
  2 | 00:01.00（最速） | 00:02.20  <fastest>
  1 | 00:01.20 | 00:01.20
「停止」を押した（時計で 4.000秒）:
00:04.00 [リセット 再開]
  4 | 00:00.30 | 00:04.00  <current>
  3 | 00:01.50（最遅） | 00:03.70  <slowest>
  2 | 00:01.00（最速） | 00:02.20  <fastest>
  1 | 00:01.20 | 00:01.20
停止して3秒後: 00:04.00
「再開」を押した（時計で 7.000秒）:
00:04.00 [ラップ 停止]
  4 | 00:00.30 | 00:04.00  <current>
  3 | 00:01.50（最遅） | 00:03.70  <slowest>
  2 | 00:01.00（最速） | 00:02.20  <fastest>
  1 | 00:01.20 | 00:01.20
「ラップ」を押した（時計で 8.100秒）:
00:05.10 [ラップ 停止]
  5 | 00:00.00 | 00:05.10  <current>
  4 | 00:01.40 | 00:05.10
  3 | 00:01.50（最遅） | 00:03.70  <slowest>
  2 | 00:01.00（最速） | 00:02.20  <fastest>
  1 | 00:01.20 | 00:01.20
「停止」を押した（時計で 8.500秒）:
00:05.50 [リセット 再開]
  5 | 00:00.40 | 00:05.50  <current>
  4 | 00:01.40 | 00:05.10
  3 | 00:01.50（最遅） | 00:03.70  <slowest>
  2 | 00:01.00（最速） | 00:02.20  <fastest>
  1 | 00:01.20 | 00:01.20
「リセット」を押した（時計で 8.500秒）:
00:00.00 [リセット(押せない) 開始]
エラーと警告: なし