JavaScriptのイベントを理解する

変数と関数を整理する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
同じ処理もJavaScripコードの書き方を変えることで、見やすく管理もしやすくなります。
講師:
06:20

字幕

このレッスンでは javascriptコードの 処理は変えずに 書き方を変えることによって 見やすく整理してみたいと思います 今画面には画像サムネールが 9つ並んでいますが そのどれかをクリックすると クリックしたものが htmlドキュメントから 消えることになっています これをクリックするとまた詰まっていって どんどん消すことができます すべてなくなりました この処理そのものは変えません けれども行動を整理することによって 見やすくまとめることができます ではhtmlドキュメントの方に 移ってみましょう ドリームウィーバーCCで htmlドキュメントを開きました このinitという関数が 最初に実行されるんですけれども そこでgridという クラス名のついた要素 ul要素です それを取り出して その要素に対して アドイベントリスナー クリックイベントが起こった時に この処理を行ってください という風になっています そしてクリックしたターゲットを調べ ターゲットがIMGの要素だったら その親の要素 ここではリスト要素になります li要素ですが これをさらにその親要素から 削除するということで 先ほどのような動きになりました まず1つ整理していきましょう 名前のない関数で アドイベントリスナーに リスナー関数を定義する これは書きやすくてよいんですが この中にさらにまた アドイベントリスナーが行われたり if文やfor文が入ってくるというと どんどん入れ子になって わかりにくくなります そういう場合には このファンクションを名前をつけて 分けてしまうと 見やすくなります ではファンクションの部分を 移動して そして改行ですね この中には名前を指定すれば いいので名前をつけましょう リムーブエレメントと という風にしてこの名前を アドイベントリスナーの 引数に 設定すればいいです 処理はもちろん変わりませんけれども この関数を実行するんだなと言って その関数が分かれてかいてありますので 構造が見やすくなります それからさらに見ていきましょう document.kdselector でこのgridのul要素を 取っているんですが 取った後さらに続けて アドイベントリスナーしていますね こうするとタイプの手間は 省けるんですけれども どんどんつなががってきてしまうと 何をしてるのかわかりにくくなる という面があります そういう時には 一旦変数にとっておくと 言う風にするとよいでしょう 名前をつけます コンテナーと そして そのコンテナーに対して アドイベントリスナーするんだなと いうことですね もちろん処理内容は変わりません セミコロンをつけましょう さて それからもう1つ 要素の親ノードを リムーブしましょうということで削除してます でその削除するのは この要素のさらに ペアレントノード、親ノードということで 親だ親だという風に言ってるんですけども そうするとどこまでさかのぼるのか いちいちこの htmlドキュメントの中をみて これの親はどれだという風に 確認しないといけなくなりますので わずらわしくなります この部分親の親っていう部分を 別の書き方にしてみましょう どうするかっていうと削除をして イベントオブジェクトを コピーして持ってきます そしてターゲットという風にすると イベントが起こった 画像をクリックすると今度はIMG要素が ターゲットとなるわけなんですが もう1つ違ったプロパティがあります currentTarget こうするとターゲットとは違います 何をしているターゲットかというと 処理をしてこのクリックのNoneに対して イベントリスナーを与えて 処理をしている この人ですね コンテナー というのはul要素でしたね ですからul要素から削除するということで 処理の内容は変わらないんですが こちらの方が イベントオブジェクトから取ってきてますから これ誰だっけ、と言った時に この リスナー関数を設定した あ、この人ね、ということで よりわかりやすくなります この辺でいったん確認しておきましょう ファイルを保存して ブラウザーでプレビューします クリックすると クリックした画像が除かれます もちろん動きはまったく変わりません スクリプトの構造が少し 見やすく変わったということです もうちょっと手を加えましょう イベントオブジェクトの カレントターゲットプロパティ これはターゲットと合わせてぜひ 覚えていただきたいプロパティなんですが 先ほど言った通り この人ですよね ではコンテナーという変数を 使ってしまえばいいでしょう その通りです ではこれをコピーして ペーストします そうするとコンテナーというのは これだなと それがここに来て ここにも来ていると この3つが同じものだということが はっきりわかりますね はじめのように 親の親の親とかっていう風な 参照の仕方をしてると いちいちこちらまで戻ってこなければ いけなかったんですが こうすることで 同じインスタンス オブジェクトが 1つの変数で参照されると 後また リスナー関数も名前がきちんとついて 分けられているということで 見やすくなったということがありました もちろんどれが正解ということでは ないんですが見やすさを考えるか タイプの手間を考えるかあるいは あるいは処理の速度を考えるかと どいう視点で スクリプトを含むかということによって 選択ができるという引き出しを 多くしておくということは とても大切だと思います このレッスンでは 同じjavascriptコードの処理を 違う書き方、しかも今回は 見やすさということから 整理をしてみました

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

2時間45分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月23日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。