1.イベントとは？
イベント（event）とは、「ユーザーが何か操作したときに起きる出来事」のことです。
たとえば、次のような操作はすべて「イベント」です
- ボタンをクリックする
- キーボードを押す
- マウスを動かす
- 画面が読み込まれる
- 入力フォームに文字を入れる
イベントを使うと何ができるの？
JavaScriptでは、イベントが起きたタイミングで関数を実行することができます。
つまり「クリックされたら何かを表示する」「キーを押したら何かが起きる」といったインタラクティブな動きを作れるんです。
例：クリックイベントのイメージ
ボタンをクリックしたときにメッセージを表示する処理は、こんな感じで書けます
document.getElementById("myButton").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});ここで重要なのは、「click というイベントが起きたときに、関数が実行される」という点です。
このしくみを使って、動くWebページを作っていくことができます。
次のセクションでは、実際にHTMLとJavaScriptを使ってクリックイベントを実装してみましょう！
2.クリックイベントの使い方
イベントの中でも最もよく使われるのが「クリックイベント」です。
ここでは、HTMLのボタンをクリックしたときに、JavaScriptで処理を実行する方法を学びます。
HTMLでボタンを用意しよう
まずは、HTMLでボタンを1つ用意します。
<button id="myButton">クリックしてね</button>このボタンには id="myButton" がついているので、JavaScriptからこのボタンを簡単に見つけられます。
JavaScriptでクリックを検知する
次に、JavaScriptでこのボタンがクリックされたときの処理を定義します。
document.getElementById("myButton").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});🔍 どういう意味？
document.getElementById("myButton")→ HTMLの中からidが「myButton」の要素を探す.addEventListener("click", function() {...})→ 「クリックされたときに、この関数を実行してね」と登録する
✅ 実際の動き
このコードが実行されると、ボタンをクリックした瞬間に alert() が表示されます。
💡 関数を分けて書くこともできる
処理が長くなってきたら、関数を別に用意しておくとコードがスッキリします。
function showMessage() {
alert("こんにちは！");
}
document.getElementById("myButton").addEventListener("click", showMessage);このように「関数」＋「イベント」の組み合わせで、クリックしたら反応するページが作れるようになります！
3.関数とイベントの組み合わせでできること
関数とイベントを組み合わせると、ユーザーの操作に反応して自由な動きを作ることができます。
たとえば以下のようなことが、すべて関数×イベントで実現できます
1. 背景色を変える
<button id="colorBtn">背景を変える</button>function changeBackground() {
document.body.style.backgroundColor = "lightblue";
}
document.getElementById("colorBtn").addEventListener("click", changeBackground);📌 ボタンをクリックすると、ページ全体の背景色が変わります。
2. テキストを切り替える
<p id="message">こんにちは！</p>
<button id="changeTextBtn">メッセージを変更</button>function changeText() {
document.getElementById("message").textContent = "こんばんは！";
}
document.getElementById("changeTextBtn").addEventListener("click", changeText);📌 表示されているテキストがクリックで切り替わります。
こんにちは！
3. クラスを付けてスタイルを変更
<button id="toggleBtn">スタイル切り替え</button>
<div id="box">ここを変えたい！</div>
<style>
#box.active {
background-color: pink;
color: white;
padding: 10px;
}
</style>function toggleStyle() {
document.getElementById("box").classList.toggle("active");
}
document.getElementById("toggleBtn").addEventListener("click", toggleStyle);📌 .classList.toggle() を使うことで、クリックするたびにON/OFFの切り替えができます。
このように、イベントをトリガーとして関数を使うと、Webページが一気に「動きのあるもの」になります。
4.初心者がよくハマるミスや注意点
JavaScriptでイベントを扱うとき、初心者がつまずきやすいポイントがいくつかあります。ここで事前に知っておけば、あとで「動かない！なんで！？」と悩まずにすみます！
ミス1：ボタンが見つからない（nullになる）
document.getElementById("myButton").addEventListener("click", function() {
alert("クリックされた！");
});🔸 上のコードを HTMLのボタンより前に書いていると、JavaScriptがボタンをまだ読み込んでいないためエラーになります。
✅ 解決方法：スクリプトはHTMLの最後に書く、もしくは以下のようにする：
<script>
window.addEventListener("DOMContentLoaded", function() {
document.getElementById("myButton").addEventListener("click", function() {
alert("クリックされた！");
});
});
</script>ミス2：関数に () をつけてしまう
// ❌ これはすぐ実行されてしまう
element.addEventListener("click", myFunction());🔸 () をつけると関数がすぐに実行されてしまうので、イベントが発生していないのに動いてしまいます。
✅ 正しい書き方：
element.addEventListener("click", myFunction); // ← () をつけないミス3：関数名のつけ忘れ or スペルミス
関数を定義したのに、addEventListener で 違う名前を使っているとエラーになります。
function showMsg() {
alert("OK!");
}
document.getElementById("btn").addEventListener("click", showMessage); // ❌ showMsgじゃない！🔸 JavaScriptではスペルミスもすべて「別の名前」として扱われるため、動きません。
✅ ミスを防ぐコツ
- スクリプトはHTMLの下か、
DOMContentLoadedを使う ()をつけるのは関数を「今すぐ実行」したいときだけ- 関数名・ID名はコピペや自動補完を活用してミスを防ごう
5.まとめ
今回は、JavaScriptでボタンをクリックして処理を実行する方法を、初心者向けにじっくり解説しました。
📝 今回のポイントをおさらい！
- イベントとは、ユーザーの操作（クリックなど）に反応する“きっかけ”
addEventListener()を使って、イベントが起きたときに関数を実行できる- 関数をうまく使えば、処理の再利用・整理整頓ができてコードも見やすくなる
- HTML＋JavaScriptだけで、背景変更やテキスト切り替えなど動きのあるUIが作れる
- よくあるミス（関数の
()つけ忘れ・IDの取得ミス）に注意！
🎯 練習してみよう！
最後に、自分でボタンや関数を少し変えてみて、「クリックしたら色がランダムに変わる」などの練習をしてみるのがおすすめです！
JavaScriptのイベントと関数を使いこなせるようになると、あなたのWebページは一気にインタラクティブになります。小さな一歩から、大きな成長へ！💪
コメント