更新日: 2019年8月7日
公開日: 2019年8月6日

Ne:Code道場～JavaScript DOM④（イベント①）の巻～

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのDOMのイベントの学習ポイントについて紹介します。

はじめに
イベントってなんだニャ？
ボタンクリックで数字を増やしてゆくニャ
イベント処理部分について教えてニャ
無名の関数ではなく、名前付き関数で書いてみるとどうなるニャ？
numがグローバル変数のままなのはなぜニャ？
最後に

はじめに

この記事ではJavaScriptのDOMのイベントについて、概要について取り上げつつ、躓きポイントを補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、DOMのイベントについて理解を深めてゆきましょう。

イベントってなんだニャ？

例えば、ボタンをクリックしたら、アラートを表示したり、また、入力テキスト欄に値を入力したら、連動してその値を別の場所に表示したり等、「ああしたら、こうする」のように、何かしらの操作を行った際に、処理を実行したいというシーンは多いかとおもいます。
その際に行われた「何かしらの操作」をイベントと呼びます。ここでは、そのイベントが発生した瞬間に処理を実行してゆく方法について見てゆきましょう。

ボタンクリックで数字を増やしてゆくニャ

まずは例として、ボタンが押された場合、0から始まる数字を1ずつ増やしてゆく処理を見てゆきましょう。
HTML側は下記のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <p>
    現在のカウントは
    <span id="output"></span>
    だニャ
  </p>
  <button id="btn">クリックするとカウントが増えるニャ♪</button>
  <script src="script.js"></script>
</body>
</html>

クリック操作を組み込みたいボタン要素と、その結果変更してゆく数字を表示するspan要素に、要素を一意に特定できるid属性がつけられているのがポイントですね。
上記のHTMLで読み込まれているJavaScript（script.jsの中身）はこちらです。

// spanのDOM要素を取得しているニャ
let output = document.getElementById("output");

// 画面に表示する数字の値を持っている変数だニャ
let num = 0;

// 画面が表示された時に、数字は初期値としての0が表示されるのを確認できるニャ
output.textContent = num;

// ボタンのDOM要素を取得し、クリック時の処理を組み込んでいるニャ
// 第二引数にはクリックされた時の処理を無名関数として渡しているニャ
document.getElementById("btn").addEventListener("click" , () => {
    // 表示する数字を一つ増やすニャ
    num++;
    // その数字を表示させているニャ
    output.textContent = num;
});

こちらを実行してみますと、まず初期表示の画面では数字は0と表示され、そこからボタンを押す度に、数字が1ずつ増えてゆくのを確認できるでしょう。

イベント処理部分について教えてニャ

まずはイベント登録の該当箇所のみピックアップします。

document.getElementById("btn").addEventListener("click" , () => {
    num++;
    output.textContent = num;
});

この部分を言葉で置き換えてみますと、以下のようになります。
　
イベントを登録したいDOM要素.addEventListener("登録したいイベント名（文字列）" , 登録したいイベント処理);
　
「登録したいイベント名（文字列）」には、実際にJavaScriptで利用することができるイベント名を記載することで、例えばclickならば、「イベントを登録したいDOM要素」がクリックされた瞬間に処理を差し込むことが可能になります。
「登録したいイベント処理」には、イベント実行時に行いたい処理を記載します。今回の例のように、無名関数を指定しても良いですし、もちろん、名前付き関数をもちいることもできます。

無名の関数ではなく、名前付き関数で書いてみるとどうなるニャ？

名前付き関数を用いるパターンでも見てゆきましょう。また合わせて、同じような処理は関数としてまとめてゆきたいとおもいます。

let num = 0;

// 画面に数字を表示する処理を呼び出しているニャ
display();

// 第二引数には下で定義している関数を渡しているニャ
// その際には、丸カッコを記載せず、関数そのものを渡しているのがポイントニャ
document.getElementById("btn").addEventListener("click" , clickButton);

// ボタンがクリックされた時の処理ニャ
function clickButton(){
    num++;
    // 画面に数字を表示する処理を呼び出しているニャ
    display();
}

// 画面に表示する処理をまとめたニャ
// 表示するDOM要素もこのタイミングで、関数内のローカル変数にしたニャ
function display(){
    let output = document.getElementById("output");
    output.textContent = num;
}

　
名前付きの関数としてclickButtonが宣言されており、それが、addEventListenerの引数に渡されているのが確認できます。
また、画面初期表示にカウントの初期値を表示し、その後ボタンが押された場合にもカウントの数字を表示するという処理でしたので、「表示する」という部分は同じようなことを実施しているため、その部分も関数にまとめられているのが確認できますね。

numがグローバル変数のままなのはなぜニャ？

最初のサンプルコードでは、2つの変数を宣言していましたね。outputとnumでした。このうち、出力用のspan要素を入れているoutput変数は、共通処理をまとめ、displayメソッドを設けたサンプルコードでは、displayメソッド内のローカル変数へと変更を加えましたが、numはそのまま、グローバル変数にしています。
なぜなら、numは、displayやclickButtonという複数の関数内で用いられていますし、且つ、clickButtonを押すごとに一つ前の値から加算した結果を取得する必要があるからです。
　
上記のような用途に用いる変数はグローバル変数として宣言しつつ、特定の範囲内でのみ利用するものはスコープを限定するようにしてゆきたいですね。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

最後に

DOMのイベントについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

イベント処理を組み込むことで動きのある処理を作ってゆくことができるニャ
1. ユーザーのアクションによって対話的に処理を組み込むことで、より使いやすさが向上してゆくニャ
イベントの実行時に渡すものは処理そのものになるニャ
1. 例えば名前付き関数を定義してそれをイベント実行時に実行したいのならば、丸カッコは不要ニャ。関数そのものを渡すのがポイントニャ
addEventListenerを用いる際には、第一引数の文字列を間違えずに記載してゆくニャ
1. どういうイベントの種類があるのかを把握しつつ、利用できるイベント名を間違えずに記載してゆくニャ

DOMに関連して、4つ目の記事として、DOMのイベントについて学びました。JavaScriptの本領発揮としてのDOM関連の処理を学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
DOMに関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。