なぜ調べたいと思ったか
「ナビゲーションメニューの項目を押すとサブメニューが出てくる」
「スクロールするとポップアップ広告が表示される」
多くのWebサイトを閲覧して、上記の機能を目にすることが多く、調べてみて内部でイベント処理が動いているのが分かった。
・クリックやスクロール以外にどんなイベントがあるか？
・イベント処理の上手く活用するには？
を解決したくて、イベント処理を更に調べようと思った。
イベントの種類について
図表の参照元URL：https://ict-skillup.com/javascript/1402/
イベントは、Webブラウザで何かが起きた時に知らせる信号を指す。Webサイトでのユーザー操作に関するものが多く、イベント発生後にサブメニューやポップアップ広告の表示などの動的処理を実現できる。
イベント処理を上手く活用するには？
①部品にどんな変化を付けたいかを明確にして、マークアップ言語やスクリプト言語などを使い分ける
「メニューボタンにカーソルを乗せた後、そのボタンの色を変える」
上記の機能はCSSのtransitionプロパティで実現でき、動的処理を行っている様にも見える。そこで気づいたのが、「部品の動きの変化(アニメーション効果)」ではなく「部品の装飾の変化」であること。
「メニューボタンのカーソルを乗せた後、それに関連するサブメニューを表示する」
の機能の場合は、Webサイトの装飾に特化したCSSでは実現できない。
「部品にどんな変化をつけたいか」「その変化を実現できる言語は何か」を明確にしないと、イベント処理を実装中に頭を抱えることになる。
②イベントを使ってWebサイトにどんな動きを付けたいかを明確にする
動きのパターンは非常に多いので、どのパターンが想定している「動きの変化」に適しているかの判断が重要になってくる。
https://coco-factory.jp/ugokuweb/
https://baigie.me/offihttps://baigie.me/officialblog/2021/02/25/css-tips-1/
Webサイトの動きを意識して開発したことがない場合は、イベント処理を使って様々な動きのパターンを体験して欲しい。