カウントアップアニメーションの作り方

(Sample)

今回は「数字のカウントアップアニメーション」について、新人エンジニアさんにもわかりやすく解説していきます。

例えば「100点満点中◯点！」という表示が、0からスッと増えていく演出を見たことはありませんか？これ、シンプルなJavaScriptだけで作ることができます。

アニメーションの技術を学ぶ第一歩にぴったりなので、ぜひ一緒にマスターしていきましょう！

どんなものを作るの？

ブラウザ上にこういった文字が表示されます：

テストの結果は 0点 でした！

これがスーッと0→100まで増えていく演出です。

HTMLの役割：土台をつくる

<div id="counter">
  テストの結果は<span id="score">0</span>点でした！
</div>

ポイント解説

• #counter：全体を囲む要素
• #score：アニメーションで数字が変わる部分

HTMLでは、「ここに数字を動かしたいよ！」という場所を指定しておくイメージです。

CSSの役割：見た目を整える

#counter {
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
}
#score {
  font-size: 2em;
}

• font-size: 2em：文字を2倍の大きさに
• text-align: center：中央に寄せる
• margin-top: 50px：上に余白を追加

ぱっと目につく数字にするためのスタイルです。

JavaScriptの役割：数字をなめらかに増やす！

コードの全体像

document.addEventListener("DOMContentLoaded", function () {
  const counter = document.querySelector("#score");
  const targetNumber = 100;
  const duration = 2000;
  const increment = targetNumber / ((duration / 1000) * 60);

  let currentNumber = 0;
  let interval = setInterval(() => {
    currentNumber += increment;
    if (currentNumber >= targetNumber) {
      currentNumber = targetNumber;
      clearInterval(interval);
    }
    counter.textContent = Math.floor(currentNumber);
  }, 1000 / 60);
});

キーワードと数式の意味を知ろう

1. setIntervalとは？

一定間隔ごとに処理を繰り返す関数です。今回は60回／秒（=60fps）で動かしています。

setInterval(() => { ... }, 1000 / 60);

• 1000 / 60：約16.67msおきに1回処理

2. incrementの計算式

const increment = targetNumber / ((duration / 1000) * 60);

分解してみると…

• duration / 1000：アニメーション時間を秒に変換（2秒）
• × 60：60フレーム分に分割
• targetNumber ÷ フレーム数＝1フレームあたりに増やす値

つまり、なめらかに指定時間内でゴールするための増分を計算しているわけですね。

動きのイメージを図で確認！

現在の数値 = 0
↓
60回/秒で `+1.6` ずつ増える
↓
2秒後にぴったり 100 に！

よくある質問

Q. もっと速くしたい／ゆっくりにしたい！

const duration = 1000; // 1秒にしてみる

この数字を変えるだけで調整できます！

Q. 小数も表示したいときは？

score.textContent = currentNumber.toFixed(1); // 小数1桁まで表示

カウントアップの活用シーン

応用アイデア

今後の学習ステップ

今回の実装で学べたことは：

• setInterval() の使い方
• フレーム数の考え方（60fps）
• 数字アニメーションのロジック構築

次は以下のステップに挑戦してみましょう！

• requestAnimationFrame を使ってアニメーションをさらに滑らかにする
• 数値だけでなく棒グラフや円グラフと連動させて可視化
• JavaScriptライブラリ（CountUp.jsなど）との比較・活用

数字が動くだけで、ページが一気にインタラクティブに見えますよ！どんどん試して、動きのあるUIを作ってみましょう！質問も気軽にどうぞ。

以上。