【意外と知らない】jQuery.fn.on()の引数にドットを用いて名前空間を表現する方法

廃れそうで廃れないjQueryですが、まだまだ知らないことが多かったりしませんか？？今回はjQuery.fn.on()のイベントに名前空間を付けて管理できるという少々上級者向きな内容になります。

悩見坂 楓

名前空間って何よ、ネカフェの店名か？

著者

はいはい、そうですね、そうですね

on()の基本形をおさらい $(‘セレクタ’).on(”click”, function(){});

on()を利用することのできるイベントをおさらいしておきましょう。本件とはあまり関係がありませんが、出来ることを再確認ってことで。

この中で最も分かりやすいのはやはりclickだと思うので、clickに名前空間を付けてみましょう。

そもそも名前空間って何か？

バックエンドのプログラム言語に精通している方は、名前空間と聞いてすんなりうなずくことが出来るかと思います。ただ、JavaScriptしか知らない方には初耳かもしれません。

名前空間というのは、英語でズバリ「Namespace」と表します。これだけだとなんのこっちゃ？ですね。プログラム内で意図しない衝突を避けるときに使う住所みたいなものです。参照に用いられます。

？？？とさらになった方も多いはずなので、とりあえず例を見てみましょう。次の例は、clickイベントに「playstation5」という名前空間を付けたものです。

$(function(){
  $('.sample-class').on('click.playstation5', function(){
    // sample-classをクリックしたときの処理
  });
});

on('click'...ではなく、on('click.playstation5'...となっているのがミソですね。名前空間は「イベント名.（ドット）名前空間名称」という形で記述することが出来るのです。簡単ですね。

で、名前空間って結局何？という説明になりますが、上の例でいうclickというイベントに名前をつけちゃおうってことです。

先ほど「参照に使います」と書きましたが、実際これは他のclickイベントと区別するために付けます。個人的にはその昔、参照アドレスは住所みたいなもの、と教わった経験があるので、僕はどちらかというと住所かなって感覚がいまだに抜けません……まぁ名前でも住所でも他との識別を明確に出来るという点では一緒なので、あまり大きな問題ではないでしょう。

この名前空間を付けるメリットはもう少し先にお伝えするとして、click.playstation5というのはplaystation5という名前のclickイベントということになりますね。playstation5に住んでいるclickイベントと考えてもOKです（僕だけか……）

ドットを使って名前空間を付けるメリットは？？

ここからが重要です。そもそもイベントに名前を付ける必要性が見当たらないのではないでしょうか。

ただ、規模の大きなプロジェクトではon()を多用し、管理が煩雑になってしまい、意図しないイベントの衝突が起きることが稀にあります。

そこで、イベントにも名前を付与してあげて、その名前のイベントでのみ処理するコードを記述してやれば、意図しない場所でイベントがキャンセルされたり、発火してしまったりする可能性をほぼゼロにすることが出来るのです。

有名な例では、off()との併用でしょう。次の例を見てください。クリックイベントを別の形で2回記述してしまっています。プログラマーが違う場合、こういった二重記述も考えられます。

$('button').click(function() { // クリックの処理（1）
    alert('click()イベントだよ');
})
$('button').on('click', function() { // クリックの処理(2)
    alert('on("click")イベントだよ');
})
 ＜中略＞
// クリックイベントの解除
$('button').off('click');

このサンプルプログラムの最後ではclickイベントを消去する必要がある、と仮定しています。しかしこれだと（1）も（2）もclickイベントが解除されてしまって、思わぬ不具合が発生する確率MAXです。

そこで登場するのが名前空間です。名前空間を使えば上記サンプルコードを大幅に作り直す必要がなくなり、工数の削減が見込まれます。

2番目のon('click')イベントだけ解除するには次のように書き換えます。

$('button').click(function() { // クリックの処理（1）
    alert('click()イベントだよ');
})
$('button').on('click.playstation5', function() { // クリックの処理(2)
    alert('on("click")イベントだよ');
})
 ＜中略＞
// クリックイベントの解除
$('button').off('click.playstation5');

たったこれだけです。名前空間をちょちょっと付け足してあげるだけで片方だけのclickイベントを解除することが出来ました。

ただ、.click()の方を解除したい場合は、（1）をon('click'...に書き直してあげる必要があるのでそこだけ注意してください。

ではでは、名前空間を知っておけば、全面改修を免れる可能性もありますので、是非覚えておいて効率的なプログラムを書いて楽をしちゃいましょう。