1. 基本のカウントアップ

解説： クリックするたびに数値が増えていくカウントアップボタンを作ってみましょう。
シンプルな例ですが、イベントリスナーとDOM更新の基礎を学ぶのに最適です。
まずは最小限のHTMLとJavaScriptで、ボタンを押すたびに1ずつ数値が増える仕組みを実装します。

● 基本構造（HTMLとJavaScript）

まずはボタンと数値表示用の要素を用意します。

<!-- HTML -->
<button id="countBtn">クリックしてカウント</button>
<div id="counter">0</div>

<!-- JavaScript -->
<script>
  const btn = document.getElementById('countBtn');
  const counter = document.getElementById('counter');
  let count = 0;

  btn.addEventListener('click', () => {
    count++;
    counter.textContent = count;
  });
</script>

このコードの流れは以下の通りです。

• getElementById でボタンと表示用の要素を取得
• let count = 0 でカウンター変数を準備
• addEventListener('click', …) でクリックを監視
• textContent = count で表示を更新

● 実行例（デモ）

下のボタンをクリックして、数値が増えるのを確認してください。

● ポイント整理

• addEventListener でクリックイベントを登録できる
• count 変数がクリックのたびに増える
• textContent に代入すれば表示が更新される

2. イベントリスナーの書き方比較

解説： JavaScriptでクリックイベントを設定する方法は、主にonclickプロパティとaddEventListenerの2種類があります。
どちらも「クリックすると処理を実行する」点は同じですが、書き方や拡張性に違いがあります。

● onclickプロパティを使う場合

ボタン要素の onclick プロパティに直接関数を代入する方法です。
シンプルで書きやすい反面、1つの処理しか登録できない制限があります。

<button id="btn1">onclickでカウント</button>
<div id="result1">0</div>

<script>
  const btn1 = document.getElementById('btn1');
  const result1 = document.getElementById('result1');
  let count1 = 0;

  btn1.onclick = () => {
    count1++;
    result1.textContent = count1;
  };
</script>

● addEventListenerを使う場合

addEventListener を使うと、同じイベントに複数の処理を追加できます。
さらに、イベントの削除やオプション設定（例：{ once: true }）も可能です。
そのため、実務や応用では addEventListener の利用が推奨されます。

<button id="btn2">addEventListenerでカウント</button>
<div id="result2">0</div>

<script>
  const btn2 = document.getElementById('btn2');
  const result2 = document.getElementById('result2');
  let count2 = 0;

  // 1つ目のイベント
  btn2.addEventListener('click', () => {
    count2++;
    result2.textContent = count2;
  });

  // 2つ目のイベント（同時に登録可能）
  btn2.addEventListener('click', () => {
    console.log('クリックされました！');
  });
</script>

● 実行例（デモ）※chromeならここからconsole確認できる！

● まとめ

• onclick：シンプルに書けるが、1つしか登録できない
• addEventListener：複数登録可能で、削除やオプション指定もできる
• 実務や応用では addEventListener を使うのが一般的

3. 機能追加（リセット／−1／＋10）

解説： 基本のカウントアップに、リセット・−1・＋1・＋10 の4機能を追加して、 複数ボタンとイベント処理、表示更新のパターンを練習します。
ボタンが増えても、処理のコアはカウント変数の更新と表示の更新の2点だけです。

● 基本構造（HTML）

4つのボタンと、現在値を表示する要素を用意します。

<div class="counter-extend">
  <div class="counter-display" id="counterEx">0</div>
  <div class="counter-actions">
    <button type="button" id="btnMinus">−1</button>
    <button type="button" id="btnPlus1">+1</button>
    <button type="button" id="btnPlus10">+10</button>
    <button type="button" id="btnReset">リセット</button>
  </div>
</div>

● 振る舞い（JavaScript）

クリックされたボタンごとにカウントを更新し、最後に表示を変更します。
表示更新は関数にしておくと、再利用しやすくなります。

// 要素取得
const counterEl = document.getElementById('counterEx');
const btnMinus  = document.getElementById('btnMinus');
const btnPlus1  = document.getElementById('btnPlus1');
const btnPlus10 = document.getElementById('btnPlus10');
const btnReset  = document.getElementById('btnReset');

let count = 0;

// 表示更新の共通関数
function render() {
  counterEl.textContent = count;
}

// 各ボタンの処理
btnMinus.addEventListener('click', () => {
  count -= 1;
  render();
});

btnPlus1.addEventListener('click', () => {
  count += 1;
  render();
});

btnPlus10.addEventListener('click', () => {
  count += 10;
  render();
});

btnReset.addEventListener('click', () => {
  count = 0;
  render();
});

// 初期表示
render();

● 実行例（デモ）

下のデモで、各ボタンの挙動を試せます。
−1 / +1 / +10 / リセットの各ボタンが、それぞれの機能で動作します。

● よくある拡張

• 最小値や最大値を決めて、範囲外なら更新しない（ガード節を入れる）
• ボタンをまとめて扱うために、親要素にイベントを1つだけ付ける（イベントデリゲーション）
• ボタン連打に備え、一定時間で入力を間引く（例：debounce や throttle）

● まとめ

• ボタンが増えても、やることは値の更新と表示の更新の2つだけ
• 表示更新は関数にまとめると再利用しやすく、保守性が上がる
• 応用として、最小値・最大値やデリゲーションを取り入れて拡張できる

4. 条件付きの動作（偶数／奇数で色分け）

解説： カウントアップに「条件分岐」を使うと、値に応じた動作の切り替えを実装できます。
ここでは「偶数なら青、奇数なら赤」と背景色を変える例を紹介します。
単純な処理ですが、if文による条件分岐やスタイル操作を練習する題材に最適です。

● 基本構造（HTMLとJavaScript）

ボタンをクリックするとカウントが増え、偶数か奇数かで色が変わるようにします。

<!-- HTML -->
<button id="btnColor">カウントアップ</button>
<div id="counterColor">0</div>

<!-- JavaScript -->
<script>
  const btn = document.getElementById('btnColor');
  const counter = document.getElementById('counterColor');
  let count = 0;

  function render() {
    counter.textContent = count;
    if (count % 2 === 0) {
      counter.style.background = '#e6f2ff'; // 偶数（青系）
      counter.style.color = '#004080';
    } else {
      counter.style.background = '#ffe6e6'; // 奇数（赤系）
      counter.style.color = '#800000';
    }
  }

  btn.addEventListener('click', () => {
    count++;
    render();
  });

  render();
</script>

● 実行例（デモ）

下のボタンをクリックすると、数値が1ずつ増え、
偶数のときは青系、奇数のときは赤系の背景と文字色に変化します。

● 応用ポイント

• 条件を増やせば「3の倍数で緑」「10以上で灰色」など簡単に拡張できる
• if文だけでなく switch文 や 三項演算子 も使える
• CSSクラスを付け替える方法にするとスタイル管理がしやすい

● まとめ

• 条件分岐を組み合わせることで、単なるカウントから表現の幅が広がる
• if文で数値ごとに動作を変えるのが基本形
• CSSクラス操作に切り替えるとコードが整理される

5. localStorageで保存する応用

解説： これまで作ったカウントアップは、ページをリロードすると値がリセットされてしまいました。
そこで、ブラウザにデータを保存できるlocalStorageを使い、前回の続きからカウントできるようにします。
localStorageはブラウザに永続的に保存されるため、セッションが切れても値を保持できます。

● 基本構造（HTMLとJavaScript）

保存した値を起動時に読み込み、更新のたびに保存する処理を追加します。

<!-- HTML -->
<button id="btnStorage">カウントアップ</button>
<div id="counterStorage">0</div>

<!-- JavaScript -->
<script>
  const btn = document.getElementById('btnStorage');
  const counter = document.getElementById('counterStorage');

  // 保存された値を取得（なければ0）
  let count = Number(localStorage.getItem('count') || 0);

  function render() {
    counter.textContent = count;
    // 表示更新と同時に保存
    localStorage.setItem('count', count);
  }

  btn.addEventListener('click', () => {
    count++;
    render();
  });

  // 初期表示
  render();
</script>

● 実行例（デモ）

下のボタンをクリックしてカウントを進めてみてください。
ページをリロードしても、前回のカウント値から再開されます。

● 応用ポイント

• キー名を変えれば、複数のカウンターを保存できる
• localStorageは文字列しか保存できないため、オブジェクトは JSON.stringify / JSON.parse で変換する
• 一時的な保存なら sessionStorage を使うと、タブを閉じたら消える

● まとめ

• localStorageを使うと、リロードしても値を保持できる
• setItem / getItem で保存と取得を行う
• removeItem で特定のキーを削除、clear で全削除が可能
• JSON化すれば配列やオブジェクトも保存できる

● 補足：localStorage と sessionStorage の違い

Web Storage には localStorage と sessionStorage の2種類があります。
どちらもキーと値のペアを文字列で保存しますが、保持期間に違いがあります。

カウントアップ：ミニゲーム