JavaScriptのきほん「イベントリスナー」

JavaScript（JS）は、軽量でインタープリター型のプログラミング言語で、主にWebページをインタラクティブにするために使用される。

イベントリスナーは、特定のイベントが発生したときに実行される関数を指定するための仕組みである。Web開発において、ユーザーの操作やブラウザの動作に応じて動的に処理を行うために使用される。

イベントリスナーの基本

イベント
ユーザーのクリック、キー入力、ページの読み込みなど、さまざまなイベントがある。
リスナー
イベントが発生したときに実行される関数である。

イベントリスナーの特徴

複数のリスナー
同じイベントに対して複数のリスナーを追加することができる。
削除
removeEventListener メソッドを使用して、リスナーを削除することもできる。

使用方法

イベントリスナーを追加するには、addEventListener メソッドを使用する。
以下は、クリックイベントのリスナーを追加する例である。

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

このコードでは、myButton という ID を持つボタンがクリックされたときに、アラートが表示される。

実際にWebページで実行できるように作成してみよう。

HTML（sample.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Button Click Example</title>
</head>
<body>
    <button id="myButton">Click me!</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

sample.htmlを実行すると、表示されたボタンをクリックしたときに「Button clicked!」というアラートが表示される。

なお、JavaScriptのコードをHTMLファイルから別のファイルに分けることには、いくつかのメリットがある。主なメリットを挙げてみよう。

コードの再利用性
同じJavaScriptコードを複数のHTMLファイルで使用する場合、別ファイルにしておくと再利用が簡単になる。
メンテナンスの容易さ
JavaScriptコードが別ファイルにあると、コードの修正や更新がしやすくなる。HTMLとJavaScriptが分かれていることで、どちらか一方を変更する際に他方に影響を与えるリスクが減る。
読みやすさと整理整頓
HTMLファイルがJavaScriptコードでごちゃごちゃしないため、HTMLの構造が見やすくなる。また、JavaScriptファイルも独立しているため、コードの整理がしやすくなる。
キャッシュの利用
ブラウザは外部JavaScriptファイルをキャッシュすることができるため、同じファイルを再度読み込む必要がなくなり、ページの読み込み速度が向上する。
セキュリティ
外部ファイルにすることで、コードの一部を非公開にしやすくなる。例えば、サーバーサイドでJavaScriptファイルを生成することで、動的に内容を変更することができる。

これで、より効率的で管理しやすいWeb開発が可能になる。