[Javacript] プログラミング初心者が使わないイベント処理のdispatch

仕事9.9、遊び0.1という、ユゲタです。 ストレス？なんですかその言葉は？見たことも聞いたことも無いですね・・・ 毎日ぐっすり眠れるし、風邪なんかココ数年経験していないので、感覚を忘れてしまいましたwww でも、サラリーマン時代は、よく病気をしてましたね。 やはり自由って、人にとってとても重要なクスリだったのかもしれません。

プログラミングとの付き合い方

こういう生活を送ることができるのも、プログラミングっていうしっかりとした技術を持っているからという事は自分でもよく認識しています。 でも、プログラミングってやってもやってもゴールの無いモノなので、プログラミング習得をゴールに考えている人は必ずと行っていいほど挫折してしまいます。 普段使っている日本語も、ゲネレーションギャップと同時に世代言語という新たな言葉がどんどん生まれるように、プログラミングも新しい言語も生まれるし同じ言語でも、 新しい機能が生まれたり、これまで使えていた機能が使えなくなったりと、どんどん変化をしていきます。 これがしんどいと思ったらやはりプログラミングとはうまく付き合っていくことはできないということなんですね。 今回は普段使い慣れているjavascriptで、dispatch機能をこれまで使わなかったんですが、使ってみたら結構いいかもと思ったので、ブログで解説、紹介、自分論を書いておきたいと思います。

javascriptのdispatchってどういう機能？

まずリファレンスサイトのURLです。 mdn web docs : EventTarget.dispatchEvent()

dispatchEvent() は EventTarget のメソッドで、 Event をそのオブジェクトへ送り、関連する EventListener を（同期的に）適切に起動させます。 通常のイベント処理ルール（キャプチャとオプションのバブリングフェーズを含む）は dispatchEvent() で手動で配信されたイベントにも適用されます。

これを読んだだけでは、「なんじゃそりゃ！」と感じますが、自分が理解している言葉に変換してみると

dispatchという機能は、要素で実行するイベント処理をカンタンに実行することができる処理

と言ったほうがわかりやすいと思いました。 dispatchは、直訳すると「発車」みたいな意味なんだそうですからね。ちなみにアイキャッチのロケット発射はdispatchからイメージして探してみました。

コードを書いて理解

でも、言葉だけの説明で理解できるほど、プログラミングは甘くありません。 ということで、dispatchの簡単なプログラムを書いてみました。 まずは、サンプルのHTMLとして３つのボタンを用意しました。 <button class='a'>A</button> <button class='b'>B</button> <button class='c'>C</button> これにそれぞれイベントをセットしてみます。 <script> document.querySelector('.a').onclick = (e => alert('A')) document.querySelector('.b').addEventListener('click' , (e => alert('B'))) document.querySelector('.c').addEventListener('foo' , (e => alert('C'))) const event_foo = new Event('foo') document.querySelector('.c').dispatchEvent(event_foo) </script> AとBは、それぞれ普通にclickイベントセットで、on...と、addEventListenerの２つのタイプで書いてみました。（addEventListenerの方が複数のイベントセットができて便利です） これに、今回はfooという新たなイベントを作ってみて、それをCボタンに対してイベントセットしています。 ※新しいイベントなので new Eventをセットしてますが、clickなどの通常イベントの場合は、この設定は不要です。 それを"dispatchEvent"という命令で、強制実行することができるという内容になっています。

デモ

ABC アラートだと、ブログページで扱いづらいので、結果表示欄に表示するようにしました。 あと、Cボタンは、clickイベントではないので、実際にクリックしてもfooイベント以外では処理は実行されないという特殊イベントを作ることができましたね。

最後に

今回、dispatchというイベント処理を理解すると、これまで、 element.click() と直接要素に対して処理を実行していたのが、dispatchEvent関数で実行することができるので、処理に応じてマウスアップなどのイベントを強制的に実行することが可能になります。 element.click()と書いたほうが遥かに楽なのに、何故dispatchEventって、めんどくさい書き方をしないといけないのか、これが分かるようになるとプログラミングスキルがアップした感覚が持てるようになると思います。 めんどくさい人は、自分が思う簡単な書き方でプログラミングすればいいだけなんですよね。 自分の背丈にあったプログラミングを楽しんでやることが、結果的に自分のスキルアップに繋がるという今回の機能紹介を兼ねた、ユゲ式プログラミング学習法でした。