【JavaScript】演算結果の数値をカウントアップで表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで演算結果の数値をカウントアップで表示する方法をご紹介しています。

JavaScriptで演算した結果の数値をカウントアップで表示したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

下記のデモの内容を作成します。緑色のボタンをクリックすると、赤い文字で表示されている数値が100ずつカウントアップで表示されます。（デモのため連続クリックには対応していません。）

See the Pen 7327 by ryohei (@intotheprogram) on CodePen.

デモではボタンクリックで固定の値を加算してカウントアップで表示していますが、要素から取得した値などに置き換えて実装することも可能です。カンマ区切りに対応していますので、シミュレーション等で使いやすいカウントアップになっています。

演算結果の数値をカウントアップで表示する

演算結果の数値をカウントアップで表示する処理全体のソースです。ざっくりですがスクリプトにコメントを記載しておりますので、カスタマイズされる際に参考にしていただければと思います。

HTML

<div id="app">
    <span id="target">0</span>
    <span>円</span>
    <button id="btn">10,000円追加</button>
</div>

JavaScript

//テキストからカンマを除去して整数を返す
const format = (number)=>{
    return Number(number.replace(/,/g, ''))
}

//カウントアップ
const countUp = (target, add, increment)=>{
    //タイマーセット
    let timerId = setInterval(()=>{
        if(format(target.textContent) < add){
            //incrementの値を加算して代入
            target.textContent = format(target.textContent) + increment;
            //結果をカンマ区切りにして代入
            target.textContent = Number(target.textContent).toLocaleString()       
        } else {
            //タイマークリア
            clearInterval(timerId)
        }
    }, 10)
}

//演算に使用する要素を取得
const target = document.querySelector('#target')
//ボタン要素を取得
const btn = document.querySelector('#btn')
//加算する値
const add = 10000
//加算の増加量
const increment = 100

//イベントリスナー
btn.addEventListener('click', ()=>{
    //テキストコンテンツを取得
    let total = format(target.textContent)
    //テキストコンテンツにaddを加算
    total = Number(total) + add
    //カウントアップの処理を実行する
    countUp(target, total, increment)
})