#72 jQueryを使わないでという案件
掲題の件があった。困った。そんな時は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人(二十四孝)の童子の物語を集めた揃物(シリーズもの)。
この記事が気に入ったらサポートをしてみませんか?