JavaScript

Increments a number on each click and updates the DOM.

counter

ボタンをクリックするたびに数値を1ずつ増やし、変数への代入とDOM更新の流れを確認します。

このページでできるようになること

最小デモ：まず動かす

現在のカウント：

0

JavaScript

const countBtn = document.querySelector('#countBtn');
const countValue = document.querySelector('#countValue');

let count = 0;

countBtn.addEventListener('click', () => {
	count += 1;
	countValue.textContent = String(count);
});

HTML

<div class="counter-box">
	<p>現在のカウント：</p>
	<p class="counter-value" id="countValue">0</p>
	<button type="button" class="counter-btn" id="countBtn">+1</button>
</div>

CSS

.counter-box {
	display: grid;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(0,0,0,.05);
	max-width: 320px;
}

.counter-btn {
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,.2);
	background: #fff;
	cursor: pointer;
}

.counter-value {
	font-size: 1.4rem;
	font-weight: bold;
}

基本の流れ（3ステップ）

  1. 要素を取得する（querySelector）
  2. クリック時の処理を登録する（addEventListener）
  3. 変数を更新し、textContent で表示を書き換える

仕様として押さえるポイント

let count = 0;
再代入するので const ではなく let を使います。
count += 1;
count = count + 1; と同じ意味です。
textContent
文字列として表示されます。数値は自動的に文字列へ変換されますが、明示的に String(count) とすると安全です。

よくある間違い

addEventListener('click', handler()) として即実行してしまう問題

addEventListener('click', handler()) を「即実行してしまう」問題は、イベントに“関数そのもの”を渡すべきところに、関数の“実行結果”を渡してしまうのが原因です。

何が起きているか（1行で）

addEventListener が欲しいのは 「後で呼ぶための関数」 なので、handler() と書くとズレます。

ダメな例：登録したつもりが、登録できてない

JavaScript

const handler = () => {
	console.log('clicked');
};

button.addEventListener('click', handler()); // ❌
実際の流れ
  1. handler() が その場で実行される（クリックしてないのにログが出る）
  2. handler() の戻り値は undefined（多くの関数は戻り値なし）
  3. 結果として addEventListener('click', undefined) のようになり、クリック時に呼ぶものがない
  4. ブラウザによっては TypeError（「listener が関数じゃない」）になることもある
正しい例：関数を“渡す”

JavaScript

const handler = () => {
	console.log('clicked');
};

button.addEventListener('click', handler); // ✅

これで クリックされた瞬間に handler が呼ばれる、期待通りの挙動になります。

例外：引数を渡したいとき（ここで () を付けたくなる）

「handler に引数を渡したいから handler(10) と書きたい」→ そのまま書くと即実行です。

正しい書き方（関数を“包む”）

JavaScript

const handler = (step) => {
	console.log(step);
};

button.addEventListener('click', () => handler(10)); // ✅ クリック時に実行
試験・ひっかけとしての見分け方

試験で狙われるポイント

まとめ