jQueryって便利

どうも。フロントエンドエンジニアの杉原睦弘です。
jQueryって便利ですよね。
私もいつもjQuery先輩にはお世話になっています。
でも、jQueryをどうしても使えないという状況は間々あるわけです。
本記事ではjQueryをPureなJavaScriptに書き換えてみたいと思います。

jQueryのサンプルコード

以下のコードを前提に書き換えていこうと思います。

HTMLの構造

<a class="demo-btn" href="javascript:void(0);">ボタン0</a>
<a class="demo-btn" href="javascript:void(0);">ボタン1</a>
<a class="demo-btn" href="javascript:void(0);">ボタン2</a>

jQueryのコード

$('.demo-btn').on('click', function() {
    alert($(this).index());
});

非常にシンプルですね。
demo-btnクラスの要素をクリックしたら、その要素が何番目の要素であるかをアラートで表示するコードです。

実際に触れるサンプルは以下のものです。

jQueryのボタンクリックのサンプル

JavaScriptに書き換える

jQueryのサンプルコードを作ったので、次はJavaScriptに書き換えていきます。

// .demo-btn を取得
var btnEl = document.querySelectorAll('.demo-btn');
// .demo-btn の数だけ回す
for (var i = 0; i < btnEl.length; i++) {
    // 各 .demo-btn にクリックイベントを付与
    btnEl[i].addEventListener('click', function(){
        alert(i); // 何番目の要素であるかを表示
    });
}

demo-btnクラスの要素を取得して、for文で回してそれぞれにクリックイベントを付与しています。
for文のイテレータが、その要素が何番目かを表しているので、alertには変数iを指定しています。

サンプルは以下のものです。
クリックしてみてください。

JavaScriptのボタンクリックのサンプル

どうですか？
アラートに表示される数字が全部3になっていますよね？
JavaScript先輩はそう簡単にイテレータを扱わせてはくれません。

何故アラートがすべて3で表示されたかというと、
クリックイベントのコールバック関数のクロージャに閉じ込めた変数iは、
イベントが作成された当時の値ではなく、変数への参照だからです。

変数iはイベント作成の後に、for文の最終的な値である3に更新されてしまったのです。
そのため、アラートには常に3が表示されていました。

もう少し、コードを改良していきましょう。

JavaScriptのボタンクリックのサンプル２

var btnEl = document.querySelectorAll('.demo-btn');
for (var i = 0; i < btnEl.length; i++) {
    // 即時関数でラップし、引数として変数jを新たに定義する
    (function(j){
        btnEl[j].addEventListener('click', function(){
           alert(j);
        });
    })(i);
}

今度はどうでしょうか。
以下のサンプルをクリックして確認してみてください。

今度は意図した通りの数字が表示されているはずです。
改良したコードでは、即時関数を使って数値を制御しました。
即時関数にも引数は指定できるので、引数として新たな変数を定義し、
クロージャにすることで、意図した通りの数値を扱うことができます。

最後に

パフォーマンスの面から、jQuery不要論は耳にしますが、私はシンタックスシュガーとして使いたい気持ちが強いです。
JavaSriptの面倒な部分を吸収してくれる恩恵は捨てがたいものがあります。
jQueryとJavaScriptのコードの比較がしやすいように、下記にまとめました。

// jQuery
$('.demo-btn').on('click', function() {
    alert($(this).index());
});

// JavaScript
var btnEl = document.querySelectorAll('.demo-btn');
for (var i = 0; i < btnEl.length; i++) {
    (function(j){
        btnEl[j].addEventListener('click', function(){
           alert(j);
        });
    })(i);
}

やっぱり、jQueryは便利！
ではでは