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

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

本記事では、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)
})

最後に

今回概算料金をシミュレーションするサイトを制作する機会があり、演算結果の数値をカウントアップで表示する処理を一から構築してみました。もっと良いスクリプトがあるとは思いますが、要件はクリアできたので良しとしています。

制作したサイトは本記事でご紹介したようなボタンクリックで固定値を加算するのではなく、複数の項目の中から一つを選択して次のステップに進んでいく形式のシミュレーションサイトでした。まだ公開していないサイトなのでしばらくは難しいですが、ある程度時間が経過したらそちらもご紹介できればなと思います。

以上、JavaScriptで演算結果の数値をカウントアップで表示する方法のご紹介でした！