Dash Boardに『ライブ感』を。数値をダイナミックに演出する方法

はじめに

個人開発をしていると、数字の変化を肌で感じることがモチベーション維持に重要だと感じています。

「MAU 23人」「月間PV 212」「月間収益 ¥0」——これらの数字が静止したまま表示されるのと、0からカウントアップされるのとでは、見た目のワクワク感が全く違いました。

後者の方が「サービスが動いている」「データが更新されている」という実感が湧き、ページを開いた時の嬉しさがアップします。

今回は、Next.jsで構築したdash boardに、react-countupを使って数値のカウントアップアニメーションを実装した記録を残します。

使用したライブラリ

react-countup を選んだ理由

数値のカウントアップアニメーションを実装するライブラリはいくつかありますが、今回は**react-countup**を選択しました。

選んだ理由：

• ✅ 軽量: バンドルサイズが小さく、パフォーマンスへの影響が少ない
• ✅ シンプル: APIが直感的で、数行のコードで実装できる
• ✅ カスタマイズ性: イージング、区切り文字、プレフィックス/サフィックスなど細かく調整可能
• ✅ TypeScript対応: 型定義が充実しており、開発体験が良い

インストール

npm install react-countupこれだけで準備完了です。

技術的な課題と解決策

課題：単位付き文字列の扱い

実装時に直面した課題は、スプレッドシートから取得したデータが「¥1,000」や「23 人」のように単位付きの文字列として渡ってくることでした。

// 実際のデータ例
value={data.mau.toLocaleString()}        // "23"
value={`¥${data.mr.toLocaleString()}`}   // "¥0"

react-countupのCountUpコンポーネントは、endプロパティに数値を渡す必要があります。そのため、文字列のままではアニメーションできません。

解決策：数値抽出とprefix/suffixの分離

この課題を解決するため、正規表現で数値部分のみを抽出し、prefix（数値の前の文字）とsuffix（数値の後の文字）を分離する関数を作成しました。

/**
 * 文字列から数値部分を抽出し、prefix/suffixを分離する
 * @param value 文字列または数値
 * @returns { numericValue: number, prefix: string, suffix: string }
 */
function parseValue(value: string | number): {
  numericValue: number;
  prefix: string;
  suffix: string;
} {
  // 数値の場合はそのまま返す
  if (typeof value === "number") {
    return { numericValue: value, prefix: "", suffix: "" };
  }

  // 文字列の場合、数値部分を抽出
  const numericMatch = value.match(/[\d,]+/);
  if (!numericMatch) {
    return { numericValue: 0, prefix: value, suffix: "" };
  }

  const numericValue = parseFloat(numericMatch[0].replace(/,/g, ""));

  // prefix（数値の前の文字）を抽出
  const prefixMatch = value.match(/^[^\d]*/);
  const prefix = prefixMatch ? prefixMatch[0] : "";

  // suffix（数値の後の文字）を抽出
  const numericIndex = numericMatch.index ?? 0;
  const numericEndIndex = numericIndex + numericMatch[0].length;
  const suffix = value.substring(numericEndIndex);

  return { numericValue, prefix, suffix };
}

この関数の動作例：

• "23" → { numericValue: 23, prefix: "", suffix: "" }
• "¥1,200" → { numericValue: 1200, prefix: "¥", suffix: "" }
• "23 人" → { numericValue: 23, prefix: "", suffix: " 人" }

これにより、見た目の整合性（単位や記号の表示）とアニメーションを両立できました。

実装コードの解説

Before: 静止した数値表示

実装前のコードは、シンプルに数値を表示するだけでした。

export function KPICard({
  title,
  value,
  description,
  metric,
  isSelected,
  onClick,
}: KPICardProps) {
  return (
    <Card>
      <CardContent className="p-6">
        <p className="text-sm font-medium text-slate-600">{title}</p>
        <p className="mt-2 text-3xl font-bold text-slate-900">{value}</p>
        {description && (
          <p className="mt-1 text-xs text-slate-500">{description}</p>
        )}
      </CardContent>
    </Card>
  );
}

問題点：

• 数値が突然表示される（アニメーションなし）
• 「サービスが動いている」という実感が湧きにくい

After: カウントアップアニメーション付き

実装後のコードでは、CountUpコンポーネントを使用して、数値が0から目標値までカウントアップされます。

import CountUp from "react-countup";

export function KPICard({
  title,
  value,
  description,
  metric,
  isSelected,
  onClick,
}: KPICardProps) {
  const { numericValue, prefix, suffix } = parseValue(value);

  return (
    <Card>
      <CardContent className="p-6">
        <p className="text-sm font-medium text-slate-600">{title}</p>
        <p className="mt-2 text-3xl font-bold text-slate-900">
          {prefix}
          <CountUp
            start={0}
            end={numericValue}
            duration={2.5}
            separator=","
            useEasing={true}
          />
          {suffix}
        </p>
        {description && (
          <p className="mt-1 text-xs text-slate-500">{description}</p>
        )}
      </CardContent>
    </Card>
  );
}

実装のポイント：

1. start={0}: 0から開始することで、数値が「生まれる」感覚を演出
2. end={numericValue}: 抽出した数値までカウントアップ
3. duration={2.5}: 2.5秒かけてアニメーション（臨場感を出すため少し長めに設定）
4. separator=",": 3桁区切りのカンマを自動で挿入（例: 1,234）
5. useEasing={true}: イージングを有効化（最初は速く、最後はゆっくり止まる）

イージングによる「心地よい止まり方」

useEasing={true}を設定することで、数値が自然に止まる動きになります。

• 最初: 速くカウントアップ（ユーザーの注意を引く）
• 最後: ゆっくりと目標値に近づく（「ここで止まる」という予測が立てやすい）

この「心地よい止まり方」が、ダッシュボードの体験を大きく向上させます。

実際の動作例

実装後のダッシュボードでは、以下のように動作します：

• MAU: 0 → 23 までカウントアップ（2.5秒）
• MPV: 0 → 212 までカウントアップ（2.5秒）
• MR: ¥0 → ¥1,200 までカウントアップ（2.5秒、¥は固定表示）
• Active Project: 0 → 2 までカウントアップ（2.5秒）

ページを読み込むたびに、すべての数値が同時にカウントアップされるため、視覚的にインパクトがあります。

完全な実装コード

参考までに、完全な実装コードを掲載します。

"use client";

import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/src/lib/utils";
import CountUp from "react-countup";

interface KPICardProps {
  title: string;
  value: string | number;
  description?: string;
  metric: "mau" | "pv" | "mr";
  isSelected: boolean;
  onClick: () => void;
}

/**
 * 文字列から数値部分を抽出し、prefix/suffixを分離する
 */
function parseValue(value: string | number): {
  numericValue: number;
  prefix: string;
  suffix: string;
} {
  if (typeof value === "number") {
    return { numericValue: value, prefix: "", suffix: "" };
  }

  const numericMatch = value.match(/[\d,]+/);
  if (!numericMatch) {
    return { numericValue: 0, prefix: value, suffix: "" };
  }

  const numericValue = parseFloat(numericMatch[0].replace(/,/g, ""));

  const prefixMatch = value.match(/^[^\d]*/);
  const prefix = prefixMatch ? prefixMatch[0] : "";

  const numericIndex = numericMatch.index ?? 0;
  const numericEndIndex = numericIndex + numericMatch[0].length;
  const suffix = value.substring(numericEndIndex);

  return { numericValue, prefix, suffix };
}

export function KPICard({
  title,
  value,
  description,
  metric,
  isSelected,
  onClick,
}: KPICardProps) {
  const { numericValue, prefix, suffix } = parseValue(value);

  return (
    <Card
      className={cn(
        "transition-all cursor-pointer hover:shadow-md",
        isSelected && "ring-2 ring-blue-600 shadow-md"
      )}
      onClick={onClick}
    >
      <CardContent className="p-6">
        <p className="text-sm font-medium text-slate-600">{title}</p>
        <p className="mt-2 text-3xl font-bold text-slate-900">
          {prefix}
          <CountUp
            start={0}
            end={numericValue}
            duration={2.5}
            separator=","
            useEasing={true}
          />
          {suffix}
        </p>
        {description && (
          <p className="mt-1 text-xs text-slate-500">{description}</p>
        )}
      </CardContent>
    </Card>
  );
}

まとめ

わずか数行の追加で体験が変わった

react-countupを導入し、わずか数行のコードを追加するだけで、ダッシュボードの体験が大きく変わりました。

Before（静止した数値）:

• 数値が突然表示される
• 「サービスが動いている」という実感が湧きにくい

After（カウントアップアニメーション）:

• 数値が0から目標値までカウントアップされる
• 「サービスが動いている」「データが更新されている」という実感が湧く
• 視覚的にインパクトがあり、モチベーションが上がる

次のステップ

今回の実装で、ダッシュボードに「ライブ感」を加えることができました。今後は以下のような拡張も検討しています：

• Framer Motionとの組み合わせ: カード全体のフェードインアニメーション
• スクロール連動: 画面に表示されたタイミングでカウントアップを開始
• リアルタイム更新: WebSocketなどでデータが更新された際に、再度カウントアップ

個人開発のダッシュボードは、数字の変化を肌で感じることで、開発のモチベーションが維持されます。ぜひ、あなたのプロジェクトにも取り入れてみてください！

参考リンク

• react-countup公式ドキュメント
• Next.js公式ドキュメント