Webサイトのボタンをクリックしたり、マウスを重ねたりしたときに何かが起こるのはなぜでしょう？それはJavaScriptの「イベント」と「関数」が密接に連携しているからです。Webサイトにインタラクティブな動きを与えたい、ユーザー操作に反応するページを作りたいと考えているなら、この二つの概念は避けて通れません。
この記事では、JavaScript初心者の方でも理解できるよう、イベントと関数の基本から、それらを組み合わせてWebサイトを動かす具体的な方法まで、分かりやすく解説します。読み終える頃には、あなたのWebサイトに命を吹き込むための第一歩を踏み出せるはずです。
イベントとは？ユーザーの行動をキャッチする！
「イベント」とは、Webページ上で発生する様々な出来事のことです。例えば、ユーザーがボタンをクリックする、キーボードのキーを押す、ページが完全に読み込まれる、などがイベントにあたります。JavaScriptはこれらのイベントを「監視」し、特定のイベントが発生したときに決められた処理を実行することができます。
主なイベントの例をいくつか見てみましょう。
click: 要素がクリックされたときmouseover: マウスポインタが要素の上に乗ったときkeydown: キーボードのキーが押されたときsubmit: フォームが送信されたときload: ページや画像などのリソースが完全に読み込まれたとき
エンジニアイベントは、ユーザーがWebサイトとどう関わっているかをJavaScriptが知るための「合図」のようなものだね。この合図を受け取って、JavaScriptが何かアクションを起こすんだ。
デザイナーなるほど！じゃあ、クリックしたら色が変わるとか、画像をホバーしたら説明が出るとか、そういう動きは全部イベントがきっかけなんですね！
関数とは？処理をまとめる賢い箱
次に「関数」についてです。関数とは、特定の処理をひとまとまりにしたもので、必要なときにいつでも呼び出して実行できるように定義しておきます。これにより、同じ処理を何度も書く手間が省け、コードが読みやすく、管理しやすくなります。
関数の基本的な形は以下の通りです。
// 関数を定義する
function myFunctionName() {
// ここに関数で実行したい処理を書く
console.log("関数が実行されました！");
}
// 関数を呼び出す
myFunctionName(); // -> "関数が実行されました！" がコンソールに出力される
関数を使うメリットは多岐にわたります。
- 再利用性：一度書いたコードを何度も使える
- 保守性：修正が必要な場合、関数の中身だけを変更すれば良い
- 可読性：コードが機能ごとに整理され、読みやすくなる
エンジニア関数は言わば「命令のレシピ」だね。「このボタンがクリックされたら、このレシピ通りに料理（処理）してね」とJavaScriptに伝えるイメージだよ。
デザイナーなるほど！複雑な動きも、関数で処理をまとめておけば、イベントが起きたときにその関数を呼び出すだけで済むから、すごく便利なんですね！
イベントと関数の連携：Webサイトに動きを！
イベントと関数がどのように連携してWebサイトに動きを与えるのか、最も一般的な方法の一つがaddEventListener()メソッドを使うことです。
addEventListener()は、特定のHTML要素に対して「このイベントが発生したら、この関数を実行してね」という指示を出す役割を果たします。
// 1. HTML要素を取得する
const myButton = document.getElementById("myButton");
// 2. 実行したい関数を定義する
function handleClick() {
alert("ボタンがクリックされました！");
}
// 3. 要素にイベントリスナー（イベントと関数の連携）を追加する
myButton.addEventListener("click", handleClick);
上記のコードでは、「myButton」というIDを持つ要素が「click」イベントを受け取った際に、「handleClick」という関数が実行されます。これにより、ユーザーがボタンをクリックすると「ボタンがクリックされました！」というアラートが表示されるようになります。
エンジニアaddEventListener()が、イベントと関数を結びつける「接着剤」のような役割を果たすんだ。これで、ユーザーの操作に合わせてWebサイトが反応するようになる。
デザイナーこれはすごい！これでユーザーがサイトをもっと楽しく使えるようになりますね。私もデザインを考えるときに、どんなイベントでどんな関数を動かすか、もっと意識できるようになります！
簡単な実装例：ボタンをクリックするとメッセージを表示
実際に、簡単なHTMLとJavaScriptで動作を確認してみましょう。
HTML (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>イベントと関数のデモ</title>
</head>
<body>
<button id="myInteractiveButton">ここをクリック！</button>
<p id="messageDisplay"></p>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
// ボタン要素とメッセージ表示要素を取得
const interactiveButton = document.getElementById("myInteractiveButton");
const messageParagraph = document.getElementById("messageDisplay");
// ボタンがクリックされたときに実行する関数
function showGreetingMessage() {
messageParagraph.textContent = "こんにちは！ボタンがクリックされました！";
}
// ボタンにクリックイベントリスナーを追加
interactiveButton.addEventListener("click", showGreetingMessage);
このコードをローカルで実行してみてください。ボタンをクリックすると、「こんにちは！ボタンがクリックされました！」というメッセージが表示されるはずです。
まとめ
JavaScriptにおける「イベント」と「関数」の基本を理解することは、Webサイトに動的な要素を取り入れるための最初の、そして最も重要なステップです。それぞれの役割と連携の仕方をマスターすれば、ユーザーにとってより魅力的で使いやすいWebサイトを構築できるようになります。
- イベント：ユーザーの操作（クリック、ホバーなど）やブラウザの状態変化を指す
- 関数：特定の処理をひとまとまりにしたコードブロックで、必要なときに呼び出して実行できる
- 連携：
addEventListener()を使って、特定のイベントが発生したときに指定の関数を実行する - 重要性：これらを組み合わせることで、Webサイトにインタラクティブな動きを与え、ユーザー体験を向上させることができる
まずは簡単なボタンのクリックイベントから試してみて、少しずつ複雑な動きにも挑戦してみましょう。Web開発の世界がさらに面白くなること間違いなしです！
チャンネル登録 よろしくお願いします
こんにちわ！JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。
