#72 jQueryを使わないでという案件

2023年4月15日 21:48

掲題の件があった。困った。そんな時はChatGPTにコンバートしてもらおう。

ワイ「次のjQueryはJavaScriptで、どう書きますか。$('.nav a').on('click', function(){alert(0)});」

ChatGPT

document.querySelectorAll('.nav a').forEach(function(link) {
  link.addEventListener('click', function() {
    alert(0);
  });
});

上記のコードでは、querySelectorAllを使用して、.nav aというセレクタに一致するすべての要素を取得し、forEachメソッドを使用して各要素にイベントリスナーを追加しています。イベントリスナーは、クリックされたときにalert(0)を実行します。

すごい解説までしてくれる。学びがはかどる！GPTさんの解説をさらにひも解いてみる

querySelectorAll：複数のクラスにアクセスできる
例）document.querySelectorAll('.nav a')
これは簡単

次はforEach。これはforとの違いを見てみる。

forで書いた例
for文：取得した要素の数だけ反復処理

const menu = document.querySelectorAll('.nav_for a');
//for文:取得した要素の数だけ反復処理
for (let i = 0; i < menu.length; i++) {
	const element = menu[i];
  // コンソールに要素のテキストを出力
	console.log(element.textContent);
}

forEachで書いた例
forEach()メソッド：配列のそれぞれの要素に対して1度ずつ関数を実行

const menuForEach = document.querySelectorAll('.nav_forEach a');
//forEach()メソッド:配列のそれぞれの要素に対して1度ずつ関数を実行
menuForEach.forEach(function(element) {
  console.log(element.textContent);
});

forEachメソッドの引数elementは、for文でやっていた代入処理
const element = menu[i];　要素の中身をindex分入れるに相当する。

こうしてみるとforEachメソッド使った方が楽なのかな。
複数のelementに処理をさせたいときは、下記を覚えようかなと。
変数.forEach(function(引数)){ 処理 });
上記の引数は変数のそれぞれのDOMを代入したもの。このメソッド内だけでのみ値を持つ。

デモ

addEventListner
これはjQueryのonに似ているなぁと

jQueryの場合

$('.nav a').on('click', function(){
　alert(0)
});

Vanilla.jsの場合

document.querySelectorAll('.nav a').forEach(function(link) {
  link.addEventListener('click', function() {
    alert(0);
  });
});

このlinkという引数。ここで先ほどのGPTさんの解説、
forEachメソッドを使用して各要素にイベントリスナーを追加しています。
この各要素が引数 link だったんですね。addEventListenerはonに読み替えても文法的に同じ。文法的には、1番目の引数にはイベントの種類（'click' など)。 2番目の引数にはイベントハンドラとしてコールバック関数を指定します。

イベントハンドラ：イベントが発生したときに呼び出される処理
上記の場合、click

コールバック関数：引数として関数に渡す処理のまとまり（関数）
引数で関数に渡したい関数。

＜参考＞

https://wa3.i-3-i.info/word11493.html

https://wa3.i-3-i.info/word12295.html

ちなみにES6のアロー関数にした場合

ES5の書き方　forEach編

menuElements.forEach(function(element) {
  console.log(element.textContent)
});

ES6の書き方　forEach編

menuElements.forEach(element =>
 console.log(element.textContent)
);

ES5ではfunction(引数)だったけど、ES6は引数の中に、引数1=>引数2（処理）が入っている。

ES5の書き方　イベント操作編

let button = document.getElementById('xxx');
button.addEventListener('click', function(){
    let d = new Date();
    console.log(d.toString());
});

ES6の書き方　イベント操作編

let button = document.getElementById("xxx");
button.addEventListener('click', () => {
    console.log('Hello');
});

ES6だと、引数1にイベント、引数2にコールバック関数内の引数（この場合空っぽ=>処理　かな。今度、仕様をちゃんと読むか。

＜参考＞

ヘッダー画像は　歌川広重が描いた24枚の揃物『二十四孝童子鑑』（にじゅうしこうどうじかがみ）。中国古来の代表的な孝子24人（二十四孝）の童子の物語を集めた揃物（シリーズもの）。

この記事が気に入ったらサポートをしてみませんか？