カウントアップ・カウントダウンを自由に制御！JavaScriptで作る高度なカウンター

Webサイトやアプリ開発の中で、数値を増減させる「カウンター」はよく使われる機能の一つです。例えば、訪問者数を表示するカウンターや、クリック数を計測するボタン、ゲームのスコアカウントなど、さまざまな用途で活用できます。

本記事では、JavaScriptを使ってカウントアップ・カウントダウンを自由に制御できる高度なカウンターを作る方法を詳しく解説します。初心者から大人までが理解しやすいように、基本的なコードから応用編まで順番に説明します。

1 JavaScriptのカウンターとは？
2 基本的なカウンターの作り方
- 2.1 HTMLの基本構造
- 2.2 JavaScriptでカウンターを制御する
3 高度なカウンターの実装
4 まとめ

JavaScriptのカウンターとは？

カウンターとは、ある数値を一定のルールに基づいて増減させるプログラムのことです。たとえば、ボタンを押すたびに「+1」ずつ増えるような動作をイメージしてください。

JavaScriptを使うと、画面に表示されている数値を変更することができます。例えば、ゲームのスコア、訪問者数、クリック回数などをリアルタイムで更新するために利用されます。

初心者向けに説明すると、カウンターを作るために最低限必要なものは次の3つです。

変数（数値を保存する）
イベント（ボタンをクリックしたら何かが起こる）
画面の更新（数値をHTMLに反映する）

次のセクションでは、実際に動作するシンプルなカウンターを作ってみましょう。

基本的なカウンターの作り方

まずは、カウンターの基本構造を作ります。

「増やす」ボタンを押すと、数値が増え、「減らす」ボタンを押すと数値が減るプログラムです。

See the Pen Untitled by yuki (@yuki_web) on CodePen.

HTMLの基本構造

HTMLとは、Webページを作るための言語です。ここでは、シンプルなカウンターを作るために、以下のようなコードを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウンター</title>
</head>
<body>
    <h1>カウンター</h1>
    <p id="counter">0</p>
    <button id="increase">増やす</button>
    <button id="decrease">減らす</button>
    <script src="script.js"></script>
</body>
</html>

このコードでは、現在のカウントを表示する<p>タグと、カウントを増やしたり減らしたりするためのボタンが用意されています。

JavaScriptでカウンターを制御する

次に、カウントを増減させるためのJavaScriptコードを作成します。

let count = 0;
const counterElement = document.getElementById("counter");
const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

increaseButton.addEventListener("click", () => {
    count++;
    counterElement.textContent = count;
});

decreaseButton.addEventListener("click", () => {
    count--;
    counterElement.textContent = count;
});

ボタンをクリックすると、countの値が増減し、その結果が画面に表示される仕組みになっています。

高度なカウンターの実装

基本のカウンターが完成したので、次にもっと便利な機能を追加していきます。

先ほどのコードでは、最大値を設定していないので、「増やす」ボタンを押すと押した分だけ数値が増えていきます。
また、「減らす」ボタンを押すと、押した分だけ「マイナス」の値まで数値が減っていきます。

今回のコードでは、最大値を「10」最小値を「0」とした高度なカウンターの実相を行います。

See the Pen Untitled by yuki (@yuki_web) on CodePen.

カウントの最大値・最小値の設定

カウントがあまりにも増減しすぎないように、最大値と最小値を設定することができます。

let count = 0;
const min = 0;
const max = 10;

const counterElement = document.getElementById("counter");
const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

increaseButton.addEventListener("click", () => {
    if (count < max) {
        count++;
        counterElement.textContent = count;
    }
});

decreaseButton.addEventListener("click", () => {
    if (count > min) {
        count--;
        counterElement.textContent = count;
    }
});

これにより、0から10の間でカウントが変化するようになります。

自動カウント機能の追加

1秒ごとに自動でカウントが増え「10」でカウントが止まります。
リセットボタンを押すことで数値が「0」になり、再度カウントが始まる機能を追加します。

HTMLを下記コードに書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウンター</title>
</head>
<body>
    <h1>カウンター</h1>
    <p id="counter">0</p>
    <button id="reset">リセット</button>
    <script src="script.js"></script>
</body>
</html>

Javascriptも下記コードに書き換えます。

let count = 0;
const max = 10;

const counterElement = document.getElementById("counter");
const resetButton = document.getElementById("reset");

setInterval(() => {
    if (count < max) {
        count++;
        counterElement.textContent = count;
    }
}, 1000);

resetButton.addEventListener("click", () => {
    count = 0; // カウントをリセット
    counterElement.textContent = count;
});

これを実装すると、1秒ごとに自動でカウントが増えていきます。

See the Pen Untitled by yuki (@yuki_web) on CodePen.

ローカルストレージを活用してデータを保存

カウントの値をページをリロードしても保持したい場合、ローカルストレージ（localStorage）を使います。

const counterElement = document.getElementById("counter"); 
const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

let count = localStorage.getItem("count") ? Number(localStorage.getItem("count")) : 0;
counterElement.textContent = count;

increaseButton.addEventListener("click", () => {
    count++;
    counterElement.textContent = count;
    localStorage.setItem("count", count);
});

decreaseButton.addEventListener("click", () => {
    count--;
    counterElement.textContent = count;
    localStorage.setItem("count", count);
});

このコードを追加すると、ページを閉じてもカウントの値が記録されるため、次回開いたときにリセットされません。

See the Pen ローカルストレージを活用してデータを保存 by yuki (@yuki_web) on CodePen.