【JS基礎-5】変数とif文の総決算！色が変わる「カウンターアプリ」を作ろう

2026.01.03

HTML/CSS/JS基礎編、最後の課題へようこそ！
これまでの知識を総動員して、実際に動くアプリケーションを作ります。

今回作るのは「高性能カウンター」です。

ただ数字を増やすだけではありません。
以下の機能を実装します。

  1. 「＋」ボタンで数字が増える。
  2. 「－」ボタンで数字が減る。
  3. 「リセット」ボタンで0に戻る。
  4. 数字が10を超えたら、文字が「赤」になる（ここ重要！）。

重要な考え方：「状態（ステート）」を持つ

コードを書く前に、とても大切なルールをひとつ覚える必要があります。
それは「変数を宣言する場所」です。

// ❌ ダメな例
button.addEventListener("click", function() {
    let count = 0; // クリックされるたびに「0」にリセットされちゃう！
    count = count + 1;
});

関数の中で変数を作ると、ボタンを押すたびに変数が作り直されてしまい、いつまで経っても数字が「1」から増えません。

数字を積み上げていきたい場合は、関数の外側で変数を作る必要があります。
これを「グローバル変数（状態を持つ）」と言います。

// ⭕️ 正しい例
let count = 0; // 最初に1回だけ作っておく

button.addEventListener("click", function() {
    count = count + 1; // 外にある変数を増やす
});

実践：コードを書いてみよう

では、HTMLとJSを組み合わせてみましょう。
数字を増減させる計算式 count++（インクリメント）にも注目してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        body { padding: 50px; text-align: center; font-family: sans-serif; }
        
        /* 数字の見た目 */
        #count-text {
            font-size: 80px;
            font-weight: bold;
            margin: 20px 0;
            color: #333;
        }

        /* 10を超えた時用のクラス */
        .danger { color: red !important; }

        /* ボタン */
        button {
            padding: 10px 30px;
            font-size: 20px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>カウンターアプリ</h1>
    <div id="count-text">0</div>

    <button id="minus-btn">－</button>
    <button id="reset-btn">リセット</button>
    <button id="plus-btn">＋</button>

    <script>
        // === 1. 要素を取得 ===
        const countText = document.querySelector("#count-text");
        const plusBtn = document.querySelector("#plus-btn");
        const minusBtn = document.querySelector("#minus-btn");
        const resetBtn = document.querySelector("#reset-btn");

        // === 2. 状態（データ）を管理する変数 ===
        let count = 0; 

        // === 3. 画面を更新する関数（共通処理） ===
        function updateCounter() {
            // 文字を書き換える
            countText.textContent = count;

            // ★もし10より大きかったら赤くする
            if (count > 10) {
                countText.classList.add("danger");
            } else {
                countText.classList.remove("danger");
            }
        }

        // === 4. イベント処理 ===
        
        // プラスボタン
        plusBtn.addEventListener("click", function() {
            count++; // 1増やす（ count = count + 1 と同じ ）
            updateCounter(); // 画面更新
        });

        // マイナスボタン
        minusBtn.addEventListener("click", function() {
            count--; // 1減らす
            updateCounter(); // 画面更新
        });

        // リセットボタン
        resetBtn.addEventListener("click", function() {
            count = 0; // 0に戻す
            updateCounter(); // 画面更新
        });

    </script>
</body>
</html>

解説：プロの工夫ポイント

① updateCounter() という関数を作った理由

プラス、マイナス、リセット…どのボタンを押しても、「画面の数字を更新して、色をチェックする」という作業は同じですよね？

同じコードを3回も書くのは面倒ですし、修正が大変になります。
だから、共通の作業を「関数（レシピ）」としてまとめておき、各ボタンから呼び出すようにしています。
これが「DRY（Don’t Repeat Yourself：繰り返しを避ける）」というプロの鉄則です。

② count++ と count--

プログラミングで頻出する書き方です。

  • 変数++ (インクリメント)： 1増やす。
  • 変数-- (デクリメント)： 1減らす。

まとめ：基礎編クリアおめでとう！

これで「JavaScript基礎編」は完走です！

  • 画面の要素を掴んで (querySelector)
  • イベントを待ち受けて (addEventListener)
  • 変数を計算して (count++)
  • 条件によって見た目を変える (if / classList)

この流れさえ掴めれば、もう立派なプログラマーの仲間入りです。

次からは【応用編】に突入します。
配列を使って「商品リストを自動生成」したり、APIを使って「天気予報データ」を取得したり。
より実用的でモダンな開発手法を学んでいきましょう！

📝 今日のミニテスト

クリックで答え合わせ！

Q1. 変数 num を「1増やす」書き方として正しいものは？

正解：num++ （または num = num + 1）
ちなみに num-- だと1減ります。

Q2. クリックしても変数がリセットされないようにするには、どこで変数を宣言すべき？

正解：イベント処理（addEventListener）の外側
関数の外で作った変数は、処理が終わってもデータが消えずに残ります。

Q3. 実践問題：変数 score が 80以上の時だけ、クラス “pass” をつけるコードを完成させてください。 
if ( score ① 80 ) {
    element.classList.②("pass");
}

// 答え
// ① >= （以上）
// ② add
ホーム
WEBプログラミング-TOP
JavaScript
タイトルとURLをコピーしました