【JavaScript】ボタンをクリックして数字を減らす

「ボタンをクリックしたら数字が減っていく」というシンプルな動作は、JavaScriptの基本だけで実現できます。
この記事では、JavaScript入門として「ボタンクリックでカウントダウンする方法」をステップごとに解説します。
コードを動かしながら確認できる内容になっています。

まずは実際に動かしてみましょう！

最初は赤いボタンに「PUSH」と表示されています。
ボタンをクリックすると、数字が1ずつ減ります。
数字が0になると、ボタンの文字が「終了」に変わり、アラートで「数字を10に戻す」と通知されます。
OKを押すと、数字とボタンは最初の状態に戻ります。

👉 JavaScriptの「イベント」と「条件分岐」を使えば、こうした動きは簡単に作れます。

コードを書いてみよう

「ボタンをクリックすると数字が減る」
これだけのシンプルな動きでも、JavaScriptの基本が学べます。

• イベント：クリックに反応させる
• 条件分岐：数字が0になったら処理を止める
• DOM操作：画面上の数字を更新する

初心者にとって、最初のステップとして取り組みやすい題材です。
この後は、HTMLとJavaScriptのコードを実際に書きながら確認していきます。

HTML：ボタンと表示エリアを用意する

<div class="countDown">
  <p class="count"></p>
  <button class="btn">PUSH</button>
</div>

<p>タグに現在の数字を表示します。

<button>タグを押すと数字が減ります。

JavaScript：ボタンを押したときの動きを作る

  <script>
    const count = document.querySelector('.count');
    const btn = document.querySelector('.btn');

    let num = 10;
    count.textContent = num;

    function reset() {
      num = 10;
      count.textContent = num;
      btn.textContent = 'PUSH';
      btn.disabled = false;
    }

    btn.addEventListener('click', () => {
      num--;
      count.textContent = num;

      if (num === 0) {
        btn.textContent = '終了';
        btn.disabled = true;

        setTimeout(() => {
          alert('数字を10に戻す');
          reset();
        }, 100);
      }
    });
  </script>

今回のコードは <script> タグの中に直接書いていますが、
実際の開発では、外部ファイルにまとめて読み込む方法が一般的です。

<script src="app.js"></script>

このように JavaScript を別ファイル（たとえば app.js）に分けて、
</body> タグの直前に読み込むのが基本的な書き方です。

なぜなら、HTMLの要素（ボタンや表示部分など）がすべて読み込まれたあとにJavaScriptを実行することで、エラーが起きにくくなるからです。

それでは、コードを詳しく説明していきます。

数字（10）を num に入れて、画面に表示

let num = 10;
count.textContent = num;

let num = 10; で数字のスタート値を用意して、
count.textContent = num; でその数字を画面に表示しています。
ここでの count.textContent は、HTMLの <p> タグの中身を変更するために使っています。

addEventListener を使ってクリックに反応

btn.addEventListener('click', () => {
  // クリックされたときの処理
});

addEventListener は、「このボタンがクリックされたら、〇〇をしてね」とJavaScriptに教える命令です。
今回は、「ボタンをクリックしたときに数字を1つ減らす」という動きになります。

条件分岐で「0になったときだけ」特別な動き

if (num === 0) {
  btn.textContent = '終了';
  btn.disabled = true;
  ...
}

if は「もし～なら」という意味。
ここでは、「数字が 0 になったら ‘終了’ と表示して、ボタンを押せなくする」という命令です。

ちなみに === は「厳密な比較」を意味していて、「数値の0と完全に一致するか？」をチェックしています。

reset() 関数で元の状態に戻す

function reset() {
  num = 10;
  count.textContent = num;
  ...
}

reset() は、「数字を10に戻して、ボタンをもう一度押せるようにする」ための関数です。
カウントが0になると一度「終了」と表示されますが、少し時間をおいて reset() が実行されることで、また最初からやり直せるようになっています。

おまけ：見た目を少し整えたい方へ

せっかくなら、見た目もちょっとカッコよくしたいですよね。
CSS を使えば、簡単にスタイリングできます！

スタイリングのコード（CSS）

.countDown {
  padding: 30px;
  text-align: center;
}
.count {
  font-size: 3em;
  margin-bottom: 20px;
}
.btn {
  display: inline-block;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 40px;
  color: #ffffff;
  background-color: #ff0000;
  box-shadow: 1px 10px #800000;
  cursor: pointer;
}
.btn:active {
  box-shadow: 1px 5px #800000;
  position: relative;
  top: 5px;
}

※この記事では、見た目を整えるCSSについては深く解説していません。興味がある方は、ぜひご自身でいろいろ試してみてください！

🎯 カウントダウン機能を使った自作アプリ👇