ボタンをクリックしてカウントダウン！0でアラートを出す方法

「ボタンをクリックしたら数字が減っていく」──そんなシンプルな動作は、JavaScriptの基本だけで実現できます。

この記事では、JavaScript入門として「ボタンクリックでカウントダウンする方法」をわかりやすく解説します。
基本的な文法を一通り学んだけれど、実際に動くものを作ったことがない方に向けて、丁寧にステップごとに解説しています。
実際に動かしながら学べるので、ぜひ一緒に試してみてください！

✅ まずは実際に動かしてみましょう！
✅ はじめに
✅ コードを書いてみよう
1. HTML：ボタンと表示エリアを用意する
2. JavaScript：ボタンを押したときの動きを作る
✅ おまけ：見た目を少し整えたい方へ
1. スタイリングのコード（CSS）
✅ もっと本格的に学びたい方へ
関連リンク

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

最初は、赤いボタンに「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については深く解説していません。興味がある方は、ぜひご自身でいろいろ試してみてください！

👇 次に紹介するUdemyの講座では、HTML・CSSの基礎から学べます。