2020年2月3日シェアツイートシェアブックマークプログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのDOMのイベントの学習ポイントについて紹介します。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、DOMのイベントについて理解を深めてゆきましょう。イベント引数ってなんだニャ?前回の記事では、イベントについて概要を取り上げました。今回は、イベント実行時に活用することができる、イベント引数について見てゆきます。前回の例で、ボタンクリック時のイベント登録の処理では、イベント引数は用いていません。引数を記載する丸カッコの中は空になっていますね。{});ですが、もしも、イベント引数を用いる場合は、引数を記載することで、利用する事が可能になります。引数名は任意の文言をつけることができますが、イベント情報を受け取るので、基本的には、「event」や、略して「e」などと命名されます。{});イベント引数に入っている情報は何ニャ?イベント引数には、イベントに関連する情報が沢山入っています。ここでは、大きく2つの観点から見てゆきます。1つ目として、「イベントを実行したDOM要素の取得」を見てゆきましょう。今回の例では、ボタンがクリックされた際の意へ処理なので、「イベント引数.target」から、そのクリックイベントが実施されたボタンのDOM要素を取得出来ます。`${num}に1増やすニャ`;});では、他の例でも見てみましょう。以下には入力された文字を「たぬき(た抜き)言葉(例:「ねこ」→「ねたこた」※ここでは、文字の後に必ず「た」を表示する形式で対応してゆきます)」で表示してゆくコードを記載してゆきます。HTML側はこちらです。src="script.js"></script></body></html>次に、JavaScript(script.js)のコードはこちらです。tanuki;});「event.target.value」で、idがmessageになっている入力エリアに入力された値を取得していますね。追加でDOMを取得しなくても、イベント引数を活用することで、そのイベントが紐づけられているDOMに容易にアクセスできることを確認してゆきました。次に2つ目として、「イベントの伝播制御」について見てゆきましょう。イベントの伝播ってどういうことニャ例えばボタンのクリックイベントは、HTMLの構成によっては、クリックイベントにとどまらず、別のイベントに伝播してゆきます。具体例から見てゆきましょう。HTML側は下記のようになります。src="script.js"></script></body></html>先程のHTMLでは用いていなかったform要素が追加されているのが確認できますね。入力エリアに適当な文字を入力したあとボタンを押すと、入力エリアに入力された文字を下に表示するというHTMLの構成になっているのが確認できると思います。その挙動を実現しようとしたJavaScript(script.jsの中身)はこちらです。※まずは参考として、イベントの伝播を考慮していないコードになっています。動かないパターンとして見てゆきましょう。document.getElementById("test").value;});適当に入力エリアに文字を入れて、その上でボタンをクリックしてみても、出力部分に値が表示されないという動きを確認できると思います。(動体視力を活用することで、一瞬だけ出力エリアに表示されるというのを確認できているかもしれませんが。!)ボタンを押したあと、ブラウザの再読込マークの部分を注視していると、一瞬のことですが、再読込がされているというのを判別できるかもしれません。form要素はその内側に配置された入力エリアに入力された情報を、裏方に送る目的で用いられる要素なので、ボタンクリックイベントが、その親である、form要素に伝播され、form要素のsubmitイベントを引き起こし、その結果画面の再読込が発生しているという動きになっています。JavaScriptの処理は正常に実行され、その結果出力エリアに入力された文字は表示されていますが、すぐに画面再読込が行われることにより、画面表示時に戻っているという動きになっていたのですね。イベント伝播の制御方法について教えてニャイベントの伝播を制御するには、イベント引数の持っている「preventDefaultメソッド」を活用してゆきましょう。シンプルで、そのメソッドを呼び出せば、イベントの伝播における既定の振る舞い(ここでは、ボタンクリックイベントの伝播先のform要素におけるsubmitイベント)を止めることができます。document.getElementById("test").value;});上記のように書き換えた状態で実行したら、入力エリアに入力した文字がボタンを押したあとも下に表示されているのを確認できるでしょう。この例ではイベント処理の先頭で「event.preventDefault()」を実行していますが、実行する位置は特に問題になりません。一度でも「event.preventDefault()」が呼び出されれば、イベントの伝播における既定の振る舞いは実行されなくなるので、例えば、イベント処理の最後に書いたとしても同様に動作するというのがポイントですね。CodeCamp提供のWebマスターコース当メディアを運営しているCodeCampではWebマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。実際にWebサービスをを開発するのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\Webサイト担当者としてのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!最後にDOMのイベント引数について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。イベント引数を活用したい場合には、イベント処理に引数を追加するニャ特に用いない場合は、イベント引数は書かなくてOKニャ引数名は、イベント引数であることがわかる名前をつけてゆくニャイベント引数には有用な機能や情報がもり沢山だニャ(ここでは特に以下の2つを見ていったニャ)イベントが実行された要素をイベント引数経由で取得可能ニャ「イベント引数.target」で取得できるニャわざわざ追加でDOM要素を取得しなくても、イベント引数を記載しさえすれば活用できるのは便利ニャイベントには伝播の仕組みがあり、イベント引数を活用するとその伝播の仕組みを制御してゆくことが可能ニャ「イベント引数.preventDefault()」でイベント伝播における既定の振る舞いを防ぐことができるニャDOMに関連して、5つ目の記事として、DOMのイベント引数について学びました。JavaScriptの本領発揮としてのDOM関連の処理を学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。DOMに関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。家事も仕事もプログラミングも。2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。