あかつきのお宿

jQueryがオワコンだと言われて何年経ったか分かりませんが、最近はjQueryを使わずとも同等のことがネイティブのJavaScriptでもある程度はできるようになったので、そろそろ本当にオワコンの気配が漂い始めている気がしなくもないですね。

とはいえがっつりjQueryで作り込んだサイトからjQeuryを取り除くのは大変なので、古いサイトの運用を続けている人の中には未だにバリバリjQueryをこき使ってるぞという方もいると思います（私のことです）

そんなjQueryに関するちょっとした小話なんですが、jQueryにはtriggerというメソッドがありますよね。任意のイベントを発動させるメソッドです。例えばtrigger(‘click’)を実行すれば、実際にクリックしなくてもクリックイベントを発動できます。これを利用すれば擬似的にリンクをクリックしたりもできることになりますね。

<a href="https://norm-nois.com">リンク</a>

<script>
  $('a').trigger('click');
</script>

だいぶざっくりと書いちゃってますが、このtriggerを任意のタイミングで発動させればユーザーがリンクをクリックしなくてもリンクを踏ませることができます。

でも実際にやってみると分かるんですが、この方法ではリンク先のURLに飛んでくれません。triggerは問題なく発動してるんですが何も起こらないという状態になります。

どうやらこのjQueryのtriggerによって動作するのはイベントハンドラに設定されている処理だけらしいです。つまりonclickに何かしらの処理を書いていればtrigger(‘click’)で発動できるんですが、別ページにジャンプするとかページ内のアンカーに移動する動きはonclickの中でやっていることではないので発動してくれないんですね。

なのでこういうときはjQueryのtriggerではなく、ネイティブなJSのクリックイベントを発動するように書いてやる必要があります。

<a href="https://norm-nois.com">リンク</a>

<script>
  $('a').get(0).click();
</script>

一例を挙げるとこんな感じです。jQueryを使わずにquerySelectorなどで要素を取ってきてクリックイベントを発動させても良いです。ようはtrigger以外の方法ならいけるってことですね。



僕も長年jQueryにはお世話になっておりますが、しかし上記のようにjQueryを使わない方が良い場面も確かに増えてきている印象はあります。だからオワコンだと言われても否定はできません。まあそれでも僕はjQueryは便利だと思っているので、どう考えても使うことにデメリットしかないという状況にならない限りは今後もお世話にはなると思いますけどね。

おまけ（stopImmediatePropagation）

これはjQueryに限った話ではないんですが、同じ要素に対して複数のイベントが書いてある場合。

<a href="https://norm-nois.com">リンク</a>

<script>
  $('a').on('click', function() {
    alert('1回目');
  });

  $('a').on('click', function() {
    alert('2回目');
  });
</script>

例えば上記の場合、リンクをクリックすれば「1回目」「2回目」とアラートが出ますよね。

これを1回目だけ出して2回目以降の処理はキャンセルしたいという場合は「stopImmediatePropagation」を使えば実現できます。

<a href="https://norm-nois.com">リンク</a>

<script>
  $('a').on('click', function(event) {
    event.stopImmediatePropagation();
    alert('1回目');
  });

  $('a').on('click', function() {
    alert('2回目');
  });
</script>

これでリンクをクリックしたときは「1回目」だけが発動し「2回目」のアラートは出ません。addEventListenerで追加した場合も同様です。