Reactで、数字が数え上がるアニメーションを作る方法

import { useEffect, useRef, useState } from 'react';

// 最初は速く、最後はゆっくり止まる動き（t は 0〜1）
const easeOutCubic = (t: number) => 1 - (1 - t) ** 3;

type Options = {
  duration?: number; // 何ミリ秒で数え終えるか
  start?: boolean; // false の間は数え始めない
};

export function useCountUp(target: number, { duration = 1500, start = true }: Options = {}) {
  const [value, setValue] = useState(0);
  const valueRef = useRef(0); // いま表示している値。次に数え直すときの出発点にする

  useEffect(() => {
    if (!start) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const ms = reduce ? 0 : duration; // 動きを減らす設定なら、最初のフレームで目標の値にする
    const from = valueRef.current;
    let startTime: number | undefined;
    let frame = requestAnimationFrame(function step(now) {
      startTime ??= now;
      // 経過した時間から進み具合を出す（フレームの数では数えない）
      const t = ms === 0 ? 1 : Math.min((now - startTime) / ms, 1);
      const next = from + (target - from) * easeOutCubic(t);
      valueRef.current = next;
      setValue(next);
      if (t < 1) frame = requestAnimationFrame(step);
    });
    return () => cancelAnimationFrame(frame);
  }, [target, duration, start]);

  return value;
}

経過 0ms: 0
経過 100ms: 1,872
経過 250ms: 4,746
経過 500ms: 8,463
経過 750ms: 10,714
経過 1000ms: 11,819
経過 1250ms: 12,275
経過 1500ms: 12,345
経過 2000ms: 12,345

値 1147.601234: 指定なし 1,147.601 / maximumFractionDigits: 0 1,148
値 12344.6: 指定なし 12,344.6 / maximumFractionDigits: 0 12,345

.count-up {
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえ、横に揺れないようにする */
}

Inter 48px 太字、5桁（カンマ入り6文字）になってからの幅: tabular-nums 1 通り（168.05〜168.05px） / 指定なし 51 通り（131.38〜162.80px）
Noto Sans CJK JP 48px 太字、5桁（カンマ入り6文字）になってからの幅: tabular-nums 1 通り（157.20〜157.20px） / 指定なし 1 通り（157.20〜157.20px）

import { useEffect, useRef, useState } from 'react';
import { useCountUp } from './useCountUp';

type Props = {
  to: number;
  duration?: number;
  decimals?: number; // 小数点以下の桁数
};

export function CountUp({ to, duration, decimals = 0 }: Props) {
  const ref = useRef<HTMLSpanElement>(null);
  const [visible, setVisible] = useState(false);

  // 画面に半分以上入ったら数え始める（一度入ったら、あとは見張らない）
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.5 },
    );
    observer.observe(ref.current!);
    return () => observer.disconnect();
  }, []);

  const value = useCountUp(to, { duration, start: visible });
  const format = new Intl.NumberFormat('ja-JP', {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });

  return (
    <span ref={ref} className="count-up">
      {/* 動いている数字は読み上げず、最後の値だけを読み上げてもらう */}
      <span aria-hidden="true">{format.format(value)}</span>
      <span className="visually-hidden">{format.format(to)}</span>
    </span>
  );
}

画面の外のまま 3000ms: 0
スクロールして 100ms: 1,872
スクロールして 2000ms: 12,345

小数1桁: 250ms 37.9 / 500ms 67.6 / 1000ms 94.4 / 1500ms 98.6

経過 600ms: 766
500 にしてから 50ms ごと: 750 → 718 → 697 → 677 → 658 → 640 → 624 → 610 → 596 → 580
500 にしてから 2500ms: 500

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

経過 500ms の表示: 8,463
アクセシビリティツリー:
- text: 12,345

reduce 20ms: 12,345

レンダー回数: {"page":1,"counter":1,"commits":89}

Direct: コールバック 95 回 / 時刻の間隔 16ms / 2000ms 後の表示 12,345
Direct StrictMode: コールバック 95 回 / 時刻の間隔 16ms / 2000ms 後の表示 12,345
DirectNoCleanup: コールバック 95 回 / 時刻の間隔 16ms / 2000ms 後の表示 12,345
DirectNoCleanup StrictMode: コールバック 190 回 / 時刻の間隔 0, 16ms / 2000ms 後の表示 12,345