JavaScript超入門⑧ カウンターアプリを完成させよう

最終回では、ボタンで数字を増減できるカウンターアプリを作ります。

完成したコード

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>カウンター</title>
    <style>
      body {
        font-family: sans-serif;
        text-align: center;
        padding: 40px;
      }

      #value {
        font-size: 48px;
      }

      button {
        padding: 10px 18px;
        margin: 4px;
      }
    </style>
  </head>
  <body>
    <h1>カウンター</h1>
    <p id="value">0</p>

    <button id="decrease">-1</button>
    <button id="reset">リセット</button>
    <button id="increase">+1</button>

    <script>
      let count = 0;
      const value = document.querySelector("#value");

      function updateDisplay() {
        value.textContent = count;

        if (count < 0) {
          value.style.color = "red";
        } else {
          value.style.color = "black";
        }
      }

      document.querySelector("#increase")
        .addEventListener("click", () => {
          count++;
          updateDisplay();
        });

      document.querySelector("#decrease")
        .addEventListener("click", () => {
          count--;
          updateDisplay();
        });

      document.querySelector("#reset")
        .addEventListener("click", () => {
          count = 0;
          updateDisplay();
        });
    </script>
  </body>
</html>

状態を変数へ保存する

let count = 0;

現在の数字をcountへ保存します。ボタンを押すたびに変わるため、constではなくletを使います。

表示を関数へ分ける

updateDisplay関数は、countの値を画面へ反映します。

countが0より小さい場合は、if文で文字色を赤へ変えます。

ボタンごとに処理を登録する

3個のボタンへ、それぞれクリックイベントを登録しています。

increaseはcountを1増やす
decreaseはcountを1減らす
resetはcountを0へ戻す

値を変えた後は、必ずupdateDisplayを呼びます。

改造してみよう

+5と-5のボタンを追加する
10以上になったら緑色にする
最大値と最小値を決める
ボタンを押した回数を別に表示する

模範解答

最大値を10、最小値を-10にした例です。元のHTMLのbodyを、次の内容へ置き換えます。

<body>
  <h1>カウンター</h1>
  <p id="value">0</p>
  <p>操作回数: <span id="clickCount">0</span>回</p>

  <button data-change="-5">-5</button>
  <button data-change="-1">-1</button>
  <button id="reset">リセット</button>
  <button data-change="1">+1</button>
  <button data-change="5">+5</button>

  <script>
    const MIN = -10;
    const MAX = 10;
    let count = 0;
    let clicks = 0;

    const value = document.querySelector("#value");
    const clickCount = document.querySelector("#clickCount");

    function updateDisplay() {
      value.textContent = count;
      clickCount.textContent = clicks;

      if (count >= 10) {
        value.style.color = "green";
      } else if (count < 0) {
        value.style.color = "red";
      } else {
        value.style.color = "black";
      }
    }

    document.querySelectorAll("[data-change]").forEach((button) => {
      button.addEventListener("click", () => {
        const change = Number(button.dataset.change);
        count = Math.max(MIN, Math.min(MAX, count + change));
        clicks++;
        updateDisplay();
      });
    });

    document.querySelector("#reset").addEventListener("click", () => {
      count = 0;
      clicks++;
      updateDisplay();
    });
  </script>
</body>

解説

data-changeへ各ボタンの増減量を保存し、同じ処理を5つのボタンで再利用しています。Math.minで最大値を、Math.maxで最小値を超えないようにしています。clicksはどの操作ボタンを押しても1増え、updateDisplayで画面へ反映されます。

まとめ

変数に現在の状態を保存できます。
DOMとイベントで、利用者の操作に反応できます。
関数へ表示処理をまとめると、同じ処理を再利用できます。

前の記事：JavaScript超入門⑦ DOMとクリックイベントを使おう

最初から復習する：JavaScript超入門① 最初のプログラムを書いて動かそう

JavaScriptシリーズの記事をまとめて見る