【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)
})

最後に

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

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

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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍