JavaScriptイベントを理解すれば、動くWebページが作れるようになる！

こんにちは、とまだです。

「JavaScriptでボタンをクリックしたら何か動かしたいけど、どうすればいいの？」 「イベントハンドラって聞くけど、何それ？」

こんな風に悩んでいませんか？

私も最初はイベント処理の仕組みがさっぱりわからず、コードをコピペしても思った通りに動かなくて挫折しかけました。でも実は、JavaScriptのイベントって**日常生活の「きっかけ」と「反応」**と同じ仕組みなんです。

今回は、JavaScriptイベントの基本から実践的な使い方まで、初心者でも確実に理解できるように解説していきます。

JavaScriptのイベントとは？「きっかけ」と「反応」で理解する

JavaScriptの「イベント」って聞くと難しそうですよね。

でも実は、ドアのチャイムと同じ仕組みなんです。

想像してみてください。

• 訪問者がチャイムを押す（きっかけ）
• チャイムが鳴る（反応）
• あなたがドアを開ける（処理）

JavaScriptのイベントも全く同じです。

// ボタンがクリックされたら（きっかけ）
button.addEventListener('click', function() {
  // アラートを表示する（反応・処理）
  alert('ボタンがクリックされました！');
});

この「きっかけ」のことをイベント、「反応する仕組み」をイベントハンドラと呼びます。

なぜイベント処理が必要なのか

「HTMLとCSSだけじゃダメなの？」

そう思うかもしれません。

HTMLとCSSだけだと、ページは静的です。つまり、ユーザーが何をしても変化しません。

でもイベント処理を使えば：

• フォームの入力チェックができる
• 画像のスライドショーが作れる
• メニューの開閉ができる
• ゲームだって作れる

つまり、ユーザーの操作に反応する生きたWebページが作れるんです。

覚えておきたい主要なイベント10選

JavaScriptには数多くのイベントがありますが、最初は以下の10個を覚えれば十分です。

マウス関連のイベント

1. click（クリック）

// ボタンをクリックしたとき
button.addEventListener('click', function() {
  console.log('クリックされました');
});

2. mouseover（マウスを乗せる）

// 要素にマウスを乗せたとき
element.addEventListener('mouseover', function() {
  this.style.backgroundColor = 'yellow';
});

3. mouseout（マウスを外す）

// 要素からマウスを外したとき
element.addEventListener('mouseout', function() {
  this.style.backgroundColor = 'white';
});

キーボード関連のイベント

4. keydown（キーを押す）

// キーボードのキーを押したとき
input.addEventListener('keydown', function(event) {
  console.log('押されたキー：' + event.key);
});

5. keyup（キーを離す）

// キーボードのキーを離したとき
input.addEventListener('keyup', function() {
  console.log('キーが離されました');
});

フォーム関連のイベント

6. change（値の変更）

// セレクトボックスの値が変わったとき
select.addEventListener('change', function() {
  console.log('選択された値：' + this.value);
});

7. submit（フォーム送信）

// フォームが送信されるとき
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 送信を止める
  console.log('フォームが送信されました');
});

8. focus（フォーカス）

// 入力欄にフォーカスが当たったとき
input.addEventListener('focus', function() {
  this.style.borderColor = 'blue';
});

ページ関連のイベント

9. load（読み込み完了）

// ページの読み込みが完了したとき
window.addEventListener('load', function() {
  console.log('ページが完全に読み込まれました');
});

10. scroll（スクロール）

// ページをスクロールしたとき
window.addEventListener('scroll', function() {
  console.log('スクロール位置：' + window.scrollY);
});

イベント処理の3つの書き方：どれを使うべき？

実は、JavaScriptでイベント処理を書く方法は3つあります。

それぞれにメリット・デメリットがあるので、状況に応じて使い分けましょう。

1. HTML属性に直接書く方法（非推奨）

<button onclick="alert('クリックされました')">クリック</button>

メリット：

• 簡単に書ける
• HTMLを見ただけで動作がわかる

デメリット：

• HTMLとJavaScriptが混在して保守しづらい
• 複雑な処理が書きにくい
• 現在は推奨されない方法

2. onclickプロパティを使う方法

const button = document.getElementById('myButton');
button.onclick = function() {
  alert('クリックされました');
};

メリット：

• HTMLとJavaScriptを分離できる
• 理解しやすい

デメリット：

• 同じイベントに複数の処理を設定できない
• 上書きされる危険がある

3. addEventListenerを使う方法（推奨）

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('クリックされました');
});

メリット：

• 同じイベントに複数の処理を設定できる
• 削除も簡単（removeEventListener）
• 現在の標準的な方法

デメリット：

• 古いIE（IE8以下）では使えない（でも今は気にしなくてOK）

初心者の方は、最初からaddEventListenerを使う習慣をつけることをおすすめします。

実践！よくある使用例5パターン

1. ボタンクリックで色を変える

const changeColorBtn = document.getElementById('changeColor');
const targetDiv = document.getElementById('target');

changeColorBtn.addEventListener('click', function() {
  // ランダムな色を生成
  const colors = ['red', 'blue', 'green', 'yellow', 'purple'];
  const randomColor = colors[Math.floor(Math.random() * colors.length)];

  targetDiv.style.backgroundColor = randomColor;
});

2. フォームの入力チェック

const form = document.getElementById('myForm');
const emailInput = document.getElementById('email');

form.addEventListener('submit', function(event) {
  // メールアドレスの形式をチェック
  if (!emailInput.value.includes('@')) {
    event.preventDefault(); // 送信を止める
    alert('正しいメールアドレスを入力してください');
  }
});

3. マウスオーバーでツールチップ表示

const helpIcon = document.getElementById('help');
const tooltip = document.getElementById('tooltip');

helpIcon.addEventListener('mouseover', function() {
  tooltip.style.display = 'block';
});

helpIcon.addEventListener('mouseout', function() {
  tooltip.style.display = 'none';
});

4. リアルタイム文字数カウント

const textarea = document.getElementById('message');
const counter = document.getElementById('counter');
const maxLength = 100;

textarea.addEventListener('input', function() {
  const remaining = maxLength - this.value.length;
  counter.textContent = `残り${remaining}文字`;

  if (remaining < 10) {
    counter.style.color = 'red';
  } else {
    counter.style.color = 'black';
  }
});

5. スクロールで要素を表示

const fadeInElements = document.querySelectorAll('.fade-in');

window.addEventListener('scroll', function() {
  fadeInElements.forEach(function(element) {
    const elementTop = element.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    if (elementTop < windowHeight * 0.8) {
      element.classList.add('visible');
    }
  });
});

イベントオブジェクトを使いこなそう

イベントが発生すると、自動的にイベントオブジェクトが渡されます。

これには、イベントに関する詳細な情報が含まれています。

button.addEventListener('click', function(event) {
  // event がイベントオブジェクト
  console.log(event.type);        // 'click'
  console.log(event.target);      // クリックされた要素
  console.log(event.clientX);     // マウスのX座標
  console.log(event.clientY);     // マウスのY座標
});

よく使うイベントオブジェクトのプロパティ

event.preventDefault() デフォルトの動作を止めます。

// リンクのクリックでページ遷移を止める
link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('リンクがクリックされましたが、遷移しません');
});

event.stopPropagation() イベントの伝播を止めます。

// 親要素へのイベント伝播を止める
childDiv.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('子要素だけで処理します');
});

event.key（キーボードイベント） 押されたキーの情報を取得します。

input.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('Enterキーが押されました');
  }
});

よくあるつまずきポイントと解決法

1. 要素が取得できない

問題：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  // エラー: Cannot read property 'addEventListener' of null
});

原因： JavaScriptがHTMLより先に実行されて、要素がまだ存在しない。

解決法：

// DOMContentLoadedイベントを使う
document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    console.log('クリックされました');
  });
});

2. thisの参照が変わる

問題：

const obj = {
  name: 'ボタン',
  handleClick: function() {
    console.log(this.name); // undefined
  }
};

button.addEventListener('click', obj.handleClick);

解決法：

// bindを使う
button.addEventListener('click', obj.handleClick.bind(obj));

// またはアロー関数を使う
button.addEventListener('click', () => obj.handleClick());

3. 動的に追加した要素にイベントが効かない

問題：

// 最初のボタンには効く
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// 後から追加したボタンには効かない
const newBtn = document.createElement('button');
newBtn.className = 'btn';
document.body.appendChild(newBtn);

解決法：

// イベントデリゲーションを使う
document.body.addEventListener('click', function(event) {
  if (event.target.classList.contains('btn')) {
    handleClick(event);
  }
});

実践演習：簡単なTODOリストを作ってみよう

ここまでの知識を使って、簡単なTODOリストを作ってみましょう。

<div id="todoApp">
  <input type="text" id="todoInput" placeholder="タスクを入力">
  <button id="addBtn">追加</button>
  <ul id="todoList"></ul>
</div>

document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('todoInput');
  const addBtn = document.getElementById('addBtn');
  const todoList = document.getElementById('todoList');

  // タスクを追加する関数
  function addTodo() {
    const text = input.value.trim();

    if (text === '') {
      alert('タスクを入力してください');
      return;
    }

    // リストアイテムを作成
    const li = document.createElement('li');
    li.textContent = text;

    // 削除ボタンを作成
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '削除';
    deleteBtn.addEventListener('click', function() {
      li.remove();
    });

    // クリックで完了/未完了を切り替え
    li.addEventListener('click', function() {
      this.classList.toggle('completed');
    });

    li.appendChild(deleteBtn);
    todoList.appendChild(li);

    // 入力欄をクリア
    input.value = '';
  }

  // 追加ボタンのクリックイベント
  addBtn.addEventListener('click', addTodo);

  // Enterキーでも追加できるように
  input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      addTodo();
    }
  });
});

まとめ：イベント処理ができれば可能性は無限大

JavaScriptのイベント処理について、基礎から実践まで解説してきました。

最初は難しく感じるかもしれませんが、基本的な仕組みは「きっかけ」と「反応」というシンプルなものです。

ポイントをおさらいすると、このようになります。

• イベント = ユーザーの操作（クリック、入力など）
• イベントハンドラ = イベントに反応する処理
• addEventListener = イベント処理を設定する推奨方法
• イベントオブジェクト = イベントの詳細情報

これらを理解すれば、インタラクティブなWebページが作れるようになります。

もっと体系的にJavaScriptを学びたい方は、Learning NextのJavaScriptコースがおすすめです。イベント処理だけでなく、DOM操作から非同期処理まで、実践的な練習問題を解きながら段階的に学べます。特に「DOM操作とイベント」のチャプターでは、今回紹介した内容をさらに深く、豊富な演習問題で身につけることができます。

イベント処理は、JavaScriptプログラミングの醍醐味です。ユーザーの操作に反応する生きたWebページを作る楽しさを、ぜひ体験してください！