読み飛ばして良いまえがき
jQueryは本当に便利で、全世界が脱Flashに夢中になっていた時代、お客さんに 「HTML5でFlashっぽいの作ってよ。」 と気軽に頼まれて 「静まれ…… 俺の右手よ！！！」 と心の中でつぶやいていたときに、僕を助けてくれたのはjQueryであることは間違いありません。
しかし、現在使用できるJavaScriptは、ブラウザの進化と淘汰が進み、かなり便利になっているためわざわざjQueryを持ち出さなくても良いかな…… というのと、せっかく労力をかけて勉強しているのであれば、採用や転職の時にサンプルコードを提出するときに、あまり良い顔をされないことが多くなっているjQueryを経由するというのはもったいないと思うので、脱jQueryの触りだけでもご紹介できればというのが今回です。
最初にjQueryのサンプル
li をクリックすると li 内に書かれたテキストをアラートで表示するというサンプルをjQueryで作りました。
例によってCodePenを用意していますので実際の動きはそちらで確認してください。
https://codepen.io/kaitou1192/pen/GREmOEB
肝の部分だけ抜き出します。
<ul>
<li>Clickテスト その1</li>
<li>Clickテスト その2</li>
<li>Clickテスト その3</li>
</ul>
$(function(){
$('li').on('click', function(event) {
alert(event.target.innerText);
});
});
DOMに簡単な処理をするという意味においては、とてもシンプルに書けて、わかりやすいので、やっぱりjQueryは良いですね。
次にJavaScriptで書いてみます
ほぼ同じ挙動のものを書いてみました。
https://codepen.io/kaitou1192/pen/PojmRrv
HTMLは同じなのでJS部分だけ。
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('li').forEach((element) => {
element.addEventListener('click', (event) => {
alert(event.target.innerText);
});
});
});
比較します
まず最初にDOMが整ったところで処理をさせるというのはこんな感じです。
//jQuery
$(function(){
});
↓
//JavaScript
window.addEventListener('DOMContentLoaded', () => {
});
すべての li というのはこんな感じ。
//jQuery
$('li')
↓
//JavaScript
document.querySelectorAll('li')
それぞれに click したら…… というのはこんな感じ。
//jQuery
$('li').on('click', function(event) {
});
↓
//JavaScript
document.querySelectorAll('li').forEach((element) => {
element.addEventListener('click', (event) => {
});
});
ここはJavaScriptの場合は forEach を経由して addEventListener click を設定することになるので、ちょっと面倒には感じるかもしれませんが、あまり違和感なく移行できると思います。
実際にアラートを出す処理に関しては同じコードになっているので割愛です。
これで脱jQueryの第一歩を踏み出しましたね。 👍🏻
では、なぜjQueryだったのか？
jQueryが一世を風靡するした時代があったのは間違いありません。その次代は、ブラウザの種類ごとにJavaScriptの書き方が異なっていたり、ブラウザのバージョンごとに使える機能が違ったりということで、FlashのようにActionScriptを覚えたら、大体どの環境でも同じように書けるという状況に比べるとかなりキツいものだったのは間違いありません。
また、当時書かれていたJavaScript…… ちょっと誇張気味になるかもしれませんが、サンプルを用意してみました。
https://codepen.io/kaitou1192/pen/vYZmjgM
肝のところだけ抜き出します。
window.onload = function() {
var li = document.getElementsByTagName('li');
for(var i = 0; i < li.length; i++) {
li[i].onmouseup = function() {
alert(this.innerText);
}
}
}
おそらくこんな感じだと思います。
jQueryや先ほどのJSのサンプルに比べて洗練されていないコード感が出ますね。
.onload や .onmouseup は、同じものに複数回指定できず、後勝ちになるので、それを気にして書かなければなりません。
また document.getElementsByTagName('li') は、先のサンプルたちのように $('#hoge li') や document.querySelectorAll('#hoge li')、 $('li[data-hoge]') や document.querySelectorAll('li[data-hoge]') みたいな書き方はできません。
こんなコードを書いていたときに登場したjQueryは、やっぱり輝いて見えたというのは間違いありません。
せっかくなので他の部分のワンポイント解説
今回はCodePenでjQueryを扱う方法です。
-
JSの右上の歯車（画像では赤枠で囲んであるところ）を選択
-
Add External Scripts/Pens の Search CDNjs 欄で検索するか、もしくは下のURLを入力する欄に直接URLを入力した後「Save & Close」を選択すると、jQuery使えるようになります。 😎