広告 Write

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ふりがなプログラミング」から学んだことを網羅的にまとめました。

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 | イベントリファレンス

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

<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の記述例を書いていきます。

<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( )で出力します。

整理します。

  1. querySelector( )メソッドで#btn(ボタンのidセレクタ)を見つけ、変数btnに格納
  2. イベントセットのために「変数btn要素がクリックされたらどう処理するか」を書く
  3. createElement( )メソッドで pタグ要素を作る
  4. innerHTML( )メソッドで 'クリックされた'を追加
  5. querySelector( )メソッドで#content(div タグのidセレクタ)を見つけ、変数targetに格納
  6. appendChild( )メソッドで変数target(#contentの場所)に変数html要素(pタグの 'クリックされた')を出力

innerHTMLとは、HTML要素の中身を変えられる機能です。

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

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

応用的な記述例

「ブラウザのボタンをクリックしたら、そのままブラウザに『クリックした時点の西暦、日時、秒、曜日』を出力したい」の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入門】初心者向けに「基礎文法」を完全まとめ

以上です。

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

関連記事職業訓練校のWebデザイン授業についていけない【3つの解決策】
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由

-Write