【Next.js】数字のカウントアップの作り方を解説｜画面に入ったら1回だけ動かす

// components/CountUp.tsx
  "use client";

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

  type Props = {
    value: number;
    suffix?: string;
    decimals?: number;
    duration?: number;
  };

  export function CountUp({ value, suffix = "", decimals = 0, duration = 1200 }: Props) {
    const ref = useRef<HTMLSpanElement>(null);
    const [display, setDisplay] = useState(value);

    const format = (n: number) =>
      new Intl.NumberFormat("ja-JP", {
        minimumFractionDigits: decimals,
        maximumFractionDigits: decimals,
      }).format(n);

    useEffect(() => {
      const el = ref.current;
      if (!el) return;
      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

      setDisplay(0);
      let frame = 0;
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (!entry.isIntersecting) return;
          observer.disconnect();
          const start = performance.now();
          const tick = (now: number) => {
            const t = Math.min((now - start) / duration, 1);
            const eased = 1 - Math.pow(1 - t, 3);
            setDisplay(value * eased);
            if (t < 1) frame = requestAnimationFrame(tick);
          };
          frame = requestAnimationFrame(tick);
        },
        { threshold: 0.6 },
      );
      observer.observe(el);

      return () => {
        observer.disconnect();
        cancelAnimationFrame(frame);
      };
    }, [value, duration]);

    return (
      <span ref={ref} className="tabular-nums">
        <span className="sr-only">
          {format(value)}
          {suffix}
        </span>
        <span aria-hidden="true">
          {format(display)}
          {suffix}
        </span>
      </span>
    );
  }

// components/StatsSection.tsx
  import { CountUp } from "./CountUp";

  const stats = [
    { value: 1200, suffix: "社", label: "導入企業数（2026年9月時点）" },
    { value: 98.2, suffix: "%", label: "サポート満足度（導入企業アンケート）", decimals: 1 },
    { value: 40, suffix: "時間", label: "1社あたりの月間削減時間（平均）" },
  ];

  export function StatsSection() {
    return (
      <section className="mx-auto max-w-5xl px-6 py-24">
        <dl className="grid gap-10 text-center sm:grid-cols-3">
          {stats.map((s) => (
            <div key={s.label} className="flex flex-col-reverse">
              <dt className="mt-2 text-sm text-zinc-500">{s.label}</dt>
              <dd className="text-5xl font-semibold tracking-tight">
                <CountUp value={s.value} suffix={s.suffix} decimals={s.decimals} />
              </dd>
            </div>
          ))}
        </dl>
        <p className="mt-10 text-center text-xs text-zinc-400">
          出典：自社調べ（2026年9月）
        </p>
      </section>
    );
  }