第10回:イベント処理とDOM操作の基本

2024-08-31

JavaScriptを使ってWebページに動きを加えるためには、DOM（Document Object Model）の操作とイベント処理が欠かせません。
DOMを操作することで、HTML要素を動的に変更したり、ユーザーの操作に応じて動作を変えることができます。
またイベント処理を理解することで、クリックやキーボード入力などのユーザーのアクションに対して反応するインタラクティブなWebページを作成することができます。

DOMとは何か？

DOM（Document Object Model）とは、HTMLやXMLドキュメントをプログラムで扱えるようにするためのモデルのことです。WebブラウザはHTML文書を読み込むと、この文書を元にDOMツリーと呼ばれる木構造を内部に生成します。このDOMツリーは、JavaScriptを使って操作できるため、Webページの内容や構造を動的に変更することができます。

DOMの基本構造

DOMは文書全体をルートとして、各HTML要素がノード（節・枝）となり、ツリー状に配置されています。
例えば以下のような簡単なHTML文書を考えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは！</h1>
  <p>これはサンプルページです。</p>
</body>
</html>

このHTML文書は、以下のようなDOMツリーとして表現されます。

html
- head
  - title
- body
  - h1
  - p

各HTML要素（html、head、body、h1、pなど）はDOMツリーのノードとして扱われます。
ノードは親ノードと子ノードの関係を持ち、親ノードが子ノードを持つことでツリーが構成されます。

DOMの操作

JavaScriptを使うと、このDOMツリーを操作して、Webページの内容を動的に変更することができます。
DOM操作には主に以下のようなメソッドが使われます。

document.getElementById()
指定したIDを持つ要素を取得します。
document.querySelector()
指定したCSSセレクタに一致する最初の要素を取得します。
document.createElement()
新しい要素を作成します。
element.appendChild()
指定した要素を、別の要素の子要素として追加します。
element.removeChild()
指定した要素を、親要素から削除します。

以下のような感じで使います。

// DOM要素の取得
const heading = document.getElementById('myHeading');

// 新しい要素の作成
const newParagraph = document.createElement('p');
newParagraph.textContent = 'これは新しく追加された段落です。';

// 要素の追加
document.body.appendChild(newParagraph);

// 要素の削除
const oldParagraph = document.querySelector('p');
document.body.removeChild(oldParagraph);

この例ではまずIDがmyHeadingの要素を取得し、次に新しいp要素を作成して、それをbody要素の最後に追加しています。
最後に、最初のp要素をbodyから削除しています。

補足：DOM操作は非常に強力ですが、その分パソコンやスマホに負荷をかけます。
大規模な操作を行うとパフォーマンスに影響を与えることがあるので、効率的な操作を心がけることが重要です。

イベントとは何か？

イベントとはユーザーの操作やブラウザの状態変化によって発生する出来事のことです。
例えばボタンがクリックされたり、ページが読み込まれたりするとイベントが発生します。
JavaScriptではこれらのイベントに対して処理を実行することで、動的でインタラクティブなWebページを作成することができます。

イベントの種類

イベントにはさまざまな種類があります。
以下はよく使うイベントの種類です。

クリックイベント
ユーザーが要素をクリックしたときに発生します。
clickイベントとして扱われます。
キーボードイベント
ユーザーがキーボードのキーを押したり離したりしたときに発生します。
keydown、keypress、keyupイベントとして扱われます。
マウスイベント
ユーザーがマウスを操作したときに発生します。
mouseover、mouseout、mousemoveイベントなどがあります。
フォームイベント
ユーザーがフォームに入力したり、送信したりしたときに発生します。
submit、change、focus、blurイベントなどがあります。
ウィンドウイベント
ページの読み込みや、ウィンドウのサイズ変更など、ブラウザウィンドウに関連するイベントです。
load、resize、scrollイベントなどがあります。

イベントリスナーの設定

イベントに対して処理を行うためには、イベントリスナーを設定します。
イベントリスナーは特定のイベントが発生したときに実行される関数です。
イベントリスナーを設定するためには、以下のようにaddEventListenerメソッドを使用します。

// ボタン要素を取得
const button = document.getElementById('myButton');

// イベントリスナーを追加
button.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

この例ではボタンがクリックされたときにalertメッセージが表示されるようにイベントリスナーを設定しています。
addEventListenerメソッドは、どのイベントに対して、どの関数を実行するかを指定するために使われます。

イベントオブジェクト

イベントリスナーの関数にはイベントオブジェクトが自動的に渡されます。
このオブジェクトにはイベントに関する情報が含まれており、例えばクリックされた位置や、押されたキーの情報などを取得することができます。
以下のコードを見てください。

document.addEventListener('click', function(event) {
  const x = event.clientX;
  const y = event.clientY;
  console.log('クリック位置:', x, y);
});

この例ではclickイベントが発生したときに、クリックされた位置の座標（clientX、clientY）がコンソールに表示されます。
eventオブジェクトにはイベントに関連するさまざまなプロパティが含まれています。

補足：function(event)でクリックされた要素に「event」という名前を付けて、{ }の中で使用できるようにすることがコツです。
実務では「event」もしくは「e」という名前を付けられることが多いです。
この「event」は、このaddEventListener({ })の中でのみ使えるので、他のaddEventListener({ })で同じ名前を使っても問題ありません。

実際にDOM操作とイベントを組み合わせてみよう

ここまで学んだことを基に、簡単なインタラクティブなWebページを作成してみましょう。

それではタスク管理Webアプリを作成してみます。
このWebアプリでは新しいタスクを追加したり、既存のタスクを削除したりすることができます。

HTML構造

<!DOCTYPE html>
<html>
<head>
  <title>タスク管理アプリ</title>
</head>
<body>
  <h1>タスク管理</h1>
  <input type="text" id="taskInput" placeholder="タスクを入力してください">
  <button id="addTaskButton">タスクを追加</button>
  <ul id="taskList"></ul>
  <script src="script.js"></script>
</body>
</html>

JavaScriptコード

// 必要な要素を取得
const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');

// タスクを追加する関数
function addTask() {
  const taskText = taskInput.value;
  if (taskText === '') {
    alert('タスクを入力してください');
    return;
  }

  // 新しいリスト項目を作成
  const newTask = document.createElement('li');
  newTask.textContent = taskText;

  // タスクをリストに追加
  taskList.appendChild(newTask);

  // 入力フィールドをクリア
  taskInput.value = '';

  // タスクをクリックで削除するイベントを追加
  newTask.addEventListener('click', function() {
    taskList.removeChild(newTask);
  });
}

// イベントリスナーを設定
addTaskButton.addEventListener('click', addTask);

// Enterキーでもタスクを追加できるようにする
taskInput.addEventListener('keypress', function(event) {
  if (event.key === 'Enter') {
    addTask();
  }
});

このサンプルアプリでは、ユーザーがタスクを入力し、「タスクを追加」ボタンをクリックすることで、新しいタスクがリストに追加されます。
またEnterキーを押すことでもタスクを追加できます。
追加されたタスクはクリックすることで削除することができます。

補足：このコードではタスクをクリックすることで削除できますが、間違ってクリックした場合にも削除されてしまいます。
実務では確認のダイアログを表示するなど、ユーザーの誤操作を防ぐ工夫が必要です。

DOM操作とイベント処理のポイント

DOM操作とイベント処理は、JavaScriptを使ったWeb開発において非常に重要なスキルです。
これらを組み合わせることで、ユーザーと対話できるインタラクティブなWebページを作成することができます。

DOMツリーの理解と操作方法
各種イベントの種類とその発生タイミング
イベントリスナーの設定とイベントオブジェクトの利用
実際のWebページでの応用方法

まとめ

DOM操作とイベント処理をマスターすることで、ユーザーの操作に反応しない静的なWebページから、ユーザーと対話できるダイナミックなWebページを作成できるようになります。
初めは難しく感じるかもしれませんが、繰り返し実践することで確実にスキルが向上します。
特にイベントの種類やタイミングを理解し、適切なタイミングでDOMを操作することで、ユーザーにとって使いやすいWebページを構築することができます。
これからも繰り返し学び、より深い理解を目指していきましょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！