Web Design

JavaScriptのイベント処理の書き方【3つの手順/無名関数】

2021年7月19日

JavaScriptのイベント
  • JavaScriptのイベント処理について知りたい
  • 「querySelector、addEventListenerがよくわからない」
  • 「無名関数ってなんだ?基礎から使い方まで知っておきたい」

この記事はそんな方へ向けて書いています。

 この記事でわかること

JavaScriptのイベント処理の書き方【3つの手順】
querySelector、addEventListenerの使い方
無名関数の使い方、書き方の例文

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん
ブログ歴:2019年1月にWordPressで開設(月間最高62,000PV、52,000円)

JavaScriptを今までそこそこ順調に学習してきました。
しかし、querySelector、addEventListenerあたりから理解のスピードが遅くなりました。

「やはりJavaScriptには、ついていけないのかな」と思うほど。

本記事では、同じような気持ちの方向けにJavaScriptのイベントについて基礎から解説していきます。
職業訓練校やテキスト、書籍から学んだことを網羅的にまとめました。

この記事を読むことで、JavaScriptのイベント処理(querySelector、addEventListener)、無名関数について理解できます。

せっかくここまで学習してきたのですから、投げるには早いです。
一緒に勉強してきましょう。

※ 参考図書:JavaScriptのわかりやすい本
あいまいだった理解や疑問が解消した本です。本書なしでは本記事は書けなかったはず。この記事では書籍内容をまとめていますので購入の必要はないですが、Kindle Unlimitedで無料で読めるので会員の方はチェックしてみる価値はあると思います。
»『スラスラ読める JavaScriptふりがなプログラミング』

JavaScriptのイベント処理の書き方【3つの手順】

JavaScriptのイベント

イベントに反応するプログラムをつくります。

イベントとは

イベント=ユーザーの動作のタイミングに合わせて、処理を実行させること。

ユーザーの動作とは、たとえば以下など。

ボタンをクリック
フォームに入力する
マウスカーソルを動かした

ユーザーが何かしらの動作を行なったときにプログラムを動かすことを「イベントドリブン」といいます。

〇〇したら、XXをする。
例:ボタンをクリックしたら、YYをする。

「XXをする」の部分は、関数で指定します。
この関数は「リスナー関数」や「イベントリスナー」と呼ばれています。

こーいち
ユーザーの動きを見つつ(Listener)、実行したタイミングで関数を呼び出すからですね。

イベント実行までの手順3つ

おおまかに以下のとおり。

手順①:関数の定義
手順②:HTMLの取得
手順③:イベントのセット

手順①:関数の定義

イベントが発生したときに、実行したい内容を関数で定義します。
たとえば、以下のとおり。

const btn_click = ( ) => {
 console.log('ボタンがクリックされました');
}

手順②:HTMLの取得

HTMLを操作するには、対象となる要素を選ぶ必要があります。
そのために使うのが、querySelectorメソッド。

イベントを発生させる元のHTMlを取得し、querySelectorメソッドで変数に格納します。

let 変数 = document.querySelector( ' 文字列 ' )

HTMLの読み込みの順番に注意します。

なぜなら、もしイベントを発生させる元のHTMLの読み込み前に、javascriptを実行すると動かなくなるからです。
HTMLの読み込み後に処理が実行されるように、scriptを制御する必要があるのです。

書き方例が、以下。

let btn = document.querySelector('#btn');

documentファイル全体に対して、querySelectorを実行します(詳しくは後述)。

手順③:イベントのセット

イベントと対応する関数をつなげるには、addEventListenerメソッドを使います。

変数.addEventListener( ' イベントタイプ ' , 関数 );

たとえば、以下のとおり。

btn.addEventListener('click', btn_click);

HTMLが格納された変数btnに、イベントをセットします。

こーいち
関数については引数なしで書く「無名関数」の書き方もできます(詳しくは後述)。

querySelector()とは

querySelector()は、JavaScriptから任意のHTML要素を検出取得することができるメソッド。

querySelector()を使うとid属性class属性などを気にせずjQuery感覚でHTML要素をセレクタ指定できます。
つまり「querySelector()」だけであらゆるHTML要素を取得することができるのです。

 querySelectorの書き方

let 変数 = document.querySelector( ' 文字列 ' )

addEventListenerとは【使い方と、主なイベント一覧】

「addEventListener」メソッドは、ユーザーの操作(=Event)の監視役(Listener)を定義します。

ブラウザ上では、クリックやマウスホバー、キーボード入力などさまざまなイベントが発生。
addEventListenerで、イベントリスナー(イベントに合わせて実行する関数)を追加することで、発生したイベントに応じて指定した関数を実行させることができます。

たとえば、以下など。

送信前にアラートを出す
ボタンクリックで言葉をポップアップ
キーボード入力のたびにフォーム内容を確認

 addEventListenerの書き方

要素.addEventListener(イベントの種類, 処理);

主なイベントの種類の一覧

clickクリックした
dbclickダブルクリックした
keydownキーボードが押された
keypressキーボードが押し続けられている
keyupキーボードが押された状態から放された
mouseenterマウスカーソルが要素に触れた
mouseoverマウスカーソルが要素に触れ続けている
mousemoveマウスカーソルが動いた
mousedownマウスボタンをクリックした
mouseupマウスのボタンを放した

上記以外にも、さまざまなイベントがあります。
» 参考:MDN | イベントリファレンス

イベント処理の書き方【例:おみくじ】

index.html

<p class="btn"><button id="btn">ボタン</button></p>

<script>
 const btn_click = () => {
 const omikuzi_arr = ['大吉', '吉', '凶', '大凶'];
 const ram = Math.floor(Math.random() * 4); 
 console.log(omikuzi_arr[ram]);
 }

const btn = document.querySelector('#btn');
btn.addEventListener('click', btn_click);

</script>

【解説】
関数btn_clickを定義。
大吉、吉、凶、大凶を変数omikuzi_arrに格納。
Math.floorは小数点以下を切り捨てる。
Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返す(0は含む、1は含まない)。
0〜3までの4つの数字がランダムで出るようにする(4をomikuzi_arr.lengthに書き換えても可)
ここまでが関数定義です。

id=btnのボタン要素を変数btnに代入。
documentファイル全体からbtnを抜き出せ → 変数btnに入れる。
#btnはid btnのこと。
btnにイベントとリスナー関数を設定。
clickしたら、関数btn_clickを実行。

JavaScriptの無名関数の使い方【addEventListenerに入れる】

JavaScriptのイベント

無名関数とは【書き方】

名前のついていない関数のこと(別名:匿名関数)。

1度しか使わない関数を、直接処理の中に指定できます。
addEventListenerに、直接、関数(functionやアロー関数)を書いて、処理をまとめられるのです。

 無名関数の書き方

【functionを使った書き方】

要素.addEventListner( ' click ' , function( ){
 ここに処理を記述する
} );

【アロー関数を使った書き方】

要素.addEventListner( ' click ' , ( ) = > {
 ここに処理を記述する
} );

無名関数のメリット、デメリットは以下のとおり。

メリット:関数を定義せずに記述できるのでラク
デメリット:関数に名前をつけられないので使い回せない

基本的な記述例

「ブラウザのボタンをクリックしたら、そのままブラウザに『クリックされた』という文字を出力したい」
このようなHTMLの記述例を書いていきます。

index.html

<p class="btn"><button id="btn">ボタン</button></p>
<div class="inner" id="content"></div>

<script>

 let btn = document.querySelector('#btn');

 btn.addEventListener( ' click ' , ( ) => {
  let html = document.createElement('p');
  html.innerHTML = 'クリックされた';

  let target = document.querySelector('#content');
  target.appendChild(html);
});

</script>

【解説】
HTMLに要素を追加するときは、まず変数にdocument.createElement(タグ名)で要素を作成します。
ここではタグ名=pタグで、「pタグ要素をつくる」という意味です。
その後、「変数.innerHTML」で内容を記述します。
変数を出力したい場所のHTMLで取得し(ここではボタンタグの直下)、appendChild( )で出力します。

整理すると、以下のとおり。
① querySelector( )メソッドで#btn(ボタンのidセレクタ)を見つけ、変数btnに格納
② イベントセットのために「変数btn要素がクリックされたらどう処理するか」を書く
③ createElement( )メソッドで pタグ要素を作る
④ innerHTML( )メソッドで 'クリックされた'を追加
⑤ querySelector( )メソッドで#content(div タグのidセレクタ)を見つけ、変数targetに格納
⑥ appendChild( )メソッドで変数target(#contentの場所)に変数html要素(pタグの 'クリックされた')を出力

メモ:innerHTML

innerHTMLとは、HTML要素の中身を変えることができる機能です。

innerHTML → オブジェクト内のHTML
innerText → オブジェクト内の文字列のみ

こーいち
難しいですが、コツコツ取り組んでいきましょう。

応用的な記述例

「ブラウザのボタンをクリックしたら、そのままブラウザに『クリックした時点の西暦、日時、秒、曜日』を出力したい」
このようなHTMLの記述例を書いていきます。

index.html

<p class="btn"><button id="btn">ボタン</button></p>
<div class="inner" id="content"></div>

<script>
  const btn = document.querySelector('#btn')

  btn.addEventListener('click', () => {
   let p_elem = document.createElement('p');

   const week = ['日', '月', '火', '水', '木', '金', '土'];
   const today = new Date();
   const year = today.getFullYear();
   const month = today.getMonth(); 1; //getMonthは0スタート
   const date = today.getDate();
   const day = today.getDay();
   const hours = today.getHours();
   const minutes = today.getMinutes();
   const seconds = today.getSeconds();

   p_elem.innerHTML = year + '年' + month + '月' + date + '日(' + week[day] + ')' + hours + '時' + minutes + '分' + seconds + '秒';
   let target = document.querySelector('#content');
   target.appendChild(p_elem); 
   });
</script>

【解説】
id=btnのボタン要素を変数btnに代入。
btnにイベントとリスナー関数を設定。
リスナー関数は、あらかじめ定義するのではなく、無名関数で指定。
追加されるp要素をcreateElementで作成し、作った要素に文字を書く。
何年何月何日何曜日、何時何分何秒にクリックされたかの出力要素を作る。
要素を追加したい場所のHTMLをquerySelectorで取得。
要素を追加したい場所に、追加したい要素をappendChildで出力。
appendChildは「子要素を追加する」という意味。

まとめ:JavaScriptのイベント処理の書き方は難しい

JavaScriptのイベント

JavaScriptのイベント処理は、かなり難解に感じました。

「覚えなくてはいけない」と思ってしまうからです。
復習しつつ、ひとつひとつの理解に努めます。

職業訓練校の先生が言いました。

プログラミング言語の学習は、言葉の学習。
英語やフランス語の勉強に近いです。
近道はありません。
積み重ねが必要です。
JavaScriptも毎日使えば忘れません。
したがって、毎日使うのが大事です。

querySelector、addEventListener、innerHTML、appendChildあたりで訳がわからなくなります。
とりあえず、同じものが書けるように復習していきます。

最後に、JavaScript文法のまとめ記事を貼っておきます。
基礎理解が不十分な方向けの記事なので「基礎からちょっと復習したい」という方は、役立つところがあるかもしれません。

JavaScript基礎知識、文法
【JavaScript入門】初心者向けに基礎から文法をまとめました

こーいちより

P.S. JavaScriptの関数の書き方を習得しよう。

 参考図書


Kindle Unlimited会員の方は無料で読めます
※ 会員以外の方は、無料体験(30日)で読めます

関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】
関連記事【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.