完成イメージ
ボタンをクリックしたら、ボタンの上のメッセージが変化されるようなプログラムを作成してみましょう。
今回のテーマ
ユーザーの操作（クリックやマウス操作など）に反応して、画面の表示を変える方法を学びます。
その基本となるのが addEventListener() です。
目的
addEventListener()の基本構文を理解する- ボタンをクリックしたときに画面のテキストが変わる動きを体験する
- DOM要素の取得とイベント追加を組み合わせて使えるようになる
作成ファイル・保存場所
js-dom フォルダに以下のファイルを作成してください。
| ファイル名 | 内容 |
|---|---|
| js-dom02.html | ボタンクリックの動作練習用HTML/js |
| js-dom__02.html | ステップアップ練習用HTML/js |
練習するHTMLは下記からコピーしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントリスナー練習</title>
</head>
<body>
<h1>ボタンをクリックしてみよう</h1>
<p id="output">ここが変化します</p>
<button id="btn">クリック！</button>
<hr>
<button id="btn_2">ボタン中の文字列が変化</button>
<hr>
<button id="btn_3">背景色を変える</button>
<script>
// 1) ボタンと出力先の要素を取得
// 2) イベントリスナーを追加（クリックに反応）
// ボタン2：自分自身の文字列を変更
// ボタン3：bodyの背景色をstyleプロパティを使って変更
</script>
</body>
</html>
👉 JavaScriptは <script> タグ内に直接記述してください（内部JS）
チェックポイント
addEventListener('click', () => { … })の構文が書ける- ボタンをクリックしたときだけ、指定したテキストに書き換えられる
- DOM取得 → イベント追加 の流れを自分で再現できる
JavaScript基礎トレーニング
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントリスナー練習</title>
</head>
<body>
<h1>ボタンをクリックしてみよう</h1>
<p id="output">ここが変化します</p>
<button id="btn">クリック！</button>
<hr>
<button id="btn_2">ボタン中の文字列が変化</button>
<hr>
<button id="btn_3">背景色を変える</button>
<script>
// 1) ボタンと出力先の要素を取得
const btn = document.getElementById('btn');
const output = document.getElementById('output');
const btn_2 = document.getElementById('btn_2');
const btn_3 = document.getElementById('btn_3');
// 2) イベントリスナーを追加（クリックに反応）
btn.addEventListener('click', () => {
output.textContent = 'ボタンがクリックされました！';
});
// ボタン2：ボタン自身の文字列を変更する場合
btn_2.addEventListener('mouseover', (e) => {
e.currentTarget.textContent = 'マウスが乗った';
});
btn_2.addEventListener('mouseout', (e) => {
e.currentTarget.textContent = 'マウスが離れた';
});
// ボタン3：bodyの背景色をstyleプロパティを使って変更
btn_3.addEventListener('click', () => {
document.body.style.backgroundColor = 'lightyellow';
//document.body.style.fontSize = '3rem';
//document.body.style.color = 'red';
});
</script>
</body>
</html>
ボタン2で使われているe はイベントの情報が入った箱（オブジェクト）です。e.currentTarget と書くと、「このイベントが起きた場所（＝ボタンなど）」を指します。
実は e は好きな名前でOKです（たとえば event や evt でも動きます）。
ただし、一般的にはe をよく使っているので、真似しておくと読みやすくなります。
.style プロパティとは？
element.style は、その要素に直接スタイル（CSS）を追加・変更するためのプロパティです。
document.body.style.backgroundColor = 'lightyellow';
これは、HTMLの <body> タグに CSSの background-color: lightyellow; を JavaScript で書き込んでいるのと同じ意味です。
CSSプロパティとJavaScriptの違い
JavaScriptでは、ハイフン（-）を使えないので、小文字→大文字に変えてつなげる「キャメルケース」で書きます。
| CSSでの書き方 | JavaScriptでの書き方 |
|---|---|
background-color | backgroundColor（キャメルケース） |
font-size | fontSize |
text-align | textAlign |
border-radius | borderRadius |
よく使う .style の例
element.style.color = 'red'; // 文字色 element.style.fontSize = '24px'; // 文字サイズ element.style.textAlign = 'center'; // 文字の中央揃え element.style.border = '1px solid #000'; // 枠線 element.style.padding = '10px'; // 余白
.style プロパティを使えば、CSSを書き換えずに見た目を変えられるようになります。
ただし、クラスを切り替える方法（classList）と違って、1つずつスタイルを個別に指定する必要があるのが特徴です。
addEventListener() とは？
addEventListener() は、HTMLの要素に「ユーザーの操作に反応する処理（イベント）」を追加するためのメソッド(関数）です。たとえば、次のように書くことで「ボタンがクリックされたときに実行する処理」を登録できます。
element.addEventListener('click', () => {
// ボタンがクリックされたときに行いたい処理
});
- ‘click’ 対象となるイベントのタイプ（ここではクリック）
- () => { … } イベントが発生したときに実行される関数（処理内容）
よく使うイベントタイプ一覧
| イベントタイプ | 説明 |
|---|---|
'click' | クリックされたとき |
'mouseover' | マウスが上に乗ったとき |
'mouseout' | マウスが離れたとき |
'keydown' | キーボードのキーを押したとき |
'keyup' | キーボードのキーを離したとき |
'change' | 入力フォームなどの値が変更されたとき |
'submit' | フォームが送信されたとき |
実際には数十種類ありますが、まずは「クリック」と「マウス操作」から体験してみましょう！
addEventListener の中にある関数は？
button.addEventListener('click', () => {
console.log('クリックされました');
});
この中の () => { ... } の部分は「コールバック関数」と呼ばれます。
コールバック関数とは？
あとで呼び出される関数のことです。
addEventListener() のような命令は、「クリックされたときに、この関数を呼んでね」と JavaScriptにお願いしておく処理です。そのため、実行されるのは あと（＝クリックされたとき） になります。
JavaScriptステップアップトレーニング
DOM取得・テキスト変更・スタイル変更の基礎を活かして、もう少し発展的な操作を練習します。
クリックするたびに違うメッセージを表示
↓配列にいくつかメッセージを用意し、click ごとにランダムに1つ表示してみよう。
背景色を変更
クリック時に document.body.style.backgroundColor を使って、背景色をランダムに変えてみよう。
複数のボタンで別々の動きをつける
もう1つボタンを追加し、別のテキストやスタイル変更を行うイベントを登録してみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントリスナー応用</title>
</head>
<body>
<h1>応用トレーニング-ボタンをクリックしてみよう</h1>
<p id="output">ここにランダムなメッセージが表示されます</p>
<button id="btn">ランダムメッセージの表示</button>
<hr>
<button id="colors">背景が変わります</button>
<hr>
<p id="key_message">キーボード押したキーの名前</p>
<script>
// DOMの取得をまとめて行う
// 1. ランダムメッセージの表示
const messages = ['こんにちは！', '元気ですか？', 'JavaScript楽しいね！', 'また会いましょう！'];
// 2. 背景色をランダムに変更
const colors = ['lightblue', 'lightgreen', 'lightpink', 'lavender', 'beige'];
// 3. 何かしらのキーボードを押した時のキーボード名
//また、エンターキーとエスケープキーが押された時はメッセージを変更
</script>
</body>
</html>
色指定は、下記の記述でも可能です。
const colors = ['#ff0000', '#00ccff', '#ffff99', '#99ff99', '#cc99ff'];
解答例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントリスナー応用</title>
</head>
<body>
<h1>応用トレーニング-ボタンをクリックしてみよう</h1>
<p id="output">ここにランダムなメッセージが表示されます</p>
<button id="btn">ランダムメッセージの表示</button>
<hr>
<button id="colors">背景が変わります</button>
<hr>
<p id="key_message">キーボード押したキーの名前</p>
<script>
// DOMの取得
const output = document.getElementById('output');
const btn = document.getElementById('btn');
const colorsBtn = document.getElementById('colors');
const keyMessage = document.getElementById('key_message');
// 1. ランダムメッセージの表示
const messages = ['こんにちは！', '元気ですか？', 'JavaScript楽しいね！', 'また会いましょう！'];
btn.addEventListener('click', () => {
const index = Math.floor(Math.random() * messages.length);
output.textContent = messages[index];
});
// 2. 背景色をランダムに変更
const colors = ['lightblue', 'lightgreen', 'lightpink', 'lavender', 'beige'];
colorsBtn.addEventListener('click', () => {
const index = Math.floor(Math.random() * colors.length);
document.body.style.backgroundColor = colors[index];
});
// 3. 何かしらのキーボードを押した時のキーボード名
//また、エンターキーとエスケープキーが押された時はメッセージを変更
document.addEventListener('keydown', (e) => {
keyMessage.textContent = `押されたキー：${e.key}`;
if (e.key === 'Enter') {
output.textContent = 'Enterキーが押されました！';
} else if (e.key === 'Escape') {
output.textContent = 'Escキーが押されました！';
}
});
</script>
</body>
</html>
よく使うキーの値（e.key）
| キー | 値 |
|---|---|
| Enter（改行） | 'Enter' |
| Tab（タブ移動） | 'Tab' |
| Space（空白） | ' '（半角スペース） |
| Shift | 'Shift' |
| Ctrl | 'Control' |
| Esc | 'Escape' |
| 矢印（上） | 'ArrowUp' |
| 矢印（下） | 'ArrowDown' |