Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© aratana.inc
とあるjQueryのコードレビュー
Miyazaki.js
ver.1.0.0【Miyazaki.js vol.2】
© aratana.inc
自己紹介
1
高見 和也(Takami Kazuya)
Twitter@miiitaka
Facebook@miiitaka
株式会社アラタナ
フロントエンドエンジニア
JavaScriptと友達です。
© aratana.inc
仕様
2
Question:
h2タグにクリックイベントを追加(IDで指定)
→ クリックで次要素のulタグ表示
→ 再度クリックでulタグが非表示
→ 500ミリ秒で開閉する
liタグにクリックのイベント追加
→ ...
© aratana.inc
基本のコードはこちら
3
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#c...
© aratana.inc
追記場所
4
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#click_t...
© aratana.inc
JavaScript だけ抜粋
5
$(function () {
$("h2").click(function () {
$("#click_trigger + ul > li").slideToggle(500)...
© aratana.inc
OH…
6
う、う………ん、まぁ、動くけどね。
© aratana.inc
改善その1:要素をキャッシュする
7
要素をキャッシュする
© aratana.inc
改善その1:要素をキャッシュする
8
要素は変数に保持してキャッシュ化しておきます。
その時の指定方法は、以下の通り。
idで指定する
タグ名で指定する
classで指定する
属性で指定する
jQuery独自拡張セレ...
© aratana.inc
改善その1:要素をキャッシュする
9
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<sty...
© aratana.inc
改善その1:要素をキャッシュする
10
$(function () {
$("h2").click(function () {
”use strict”;
var
click_trigger = $(”#click_...
© aratana.inc
改善その2:イベントのバインド
11
イベントのバインド
© aratana.inc
改善その2:イベントのバインド
12
jQuery1.7以上であれば、on(), off() でバインド(関連付け)しま
しょう。
$(function () {
”use strict”;
var
click_tr...
© aratana.inc
改善その2:イベントのバインド
13
.click(fn)は、.on("click", fn)のショートカットメソッドなので、良い
といえば良いが…
拡張性やメリットを考慮して .on(“click”, fn) を採...
© aratana.inc
改善その2:イベントのバインド
14
メリット①:複数のイベントタイプが設定できます。
$("#hoge").on("touchstart click", function () {
// 処理を書きます
});
© aratana.inc
改善その2:イベントのバインド
15
メリット②:複数のイベントハンドラが設定できます。
$("#hoge").on({
"mouseenter": function () {
},
"mouseleave": fu...
© aratana.inc
改善その2:イベントのバインド
16
メリット③:ロード後に追加した要素に対してイベントをバインド
できます。
※これは、この後のイベントデリゲートにところで。
© aratana.inc
改善その2:イベントのバインド
17
メリット④:イベントに引数を渡すことができます。
.on( events [, selector ] [, data ], handler(eventObject) );
© aratana.inc
改善その3:キュー構造の理解
18
アニメーションのキュー
© aratana.inc
改善その3:キュー構造の理解
19
liが対象になると、slideToggle()メソッドがliの数分発生するので無
駄な処理が動作してしまいます。
$(function () {
”use strict”;
var...
© aratana.inc
改善その3:キュー構造の理解
20
スライド(500ms) Click!キュー
(queue)
アニメーション処理がキュー
に保持
© aratana.inc
改善その3:キュー構造の理解
21
スライド(500ms)
Click!キュー
(queue)
アニメーションの時間、500
ミリ秒処理が実行される。
© aratana.inc
改善その3:キュー構造の理解
22
スライド(500ms)
Click!キュー
(queue)
500ミリ秒後、処理完了。
キューから削除される。
© aratana.inc
改善その3:キュー構造の理解
23
スライド(500ms)
Click!
Click!
Click!
Click!
Click!
Click!
キュー
(queue)
ものすごくClick!
スライド(500ms)
...
© aratana.inc
改善その3:キュー構造の理解
24
スライド(500ms)
Click!
Click!
Click!
Click!
Click!
Click!
キュー
(queue)
キューには終了していない処
理が待ち状態になる。...
© aratana.inc
改善その3:キュー構造の理解
25
スライド(500ms)
Click!
Click!
Click!
Click!
Click!
Click!
キュー
(queue)
500ミリ秒アニメーションが
順番に処理されてい...
© aratana.inc
改善その3:キュー構造の理解
26
スライド(500ms)
キュー
(queue)
スライド(500ms)
スライド(500ms)
スライド(500ms)
スライド(500ms)
スライド(500ms)
キューの中の...
© aratana.inc
改善その3:キュー構造の理解
27
キューのアニメーションを破棄してから次のアニメーションを動作
させます。
$(function () {
”use strict”;
var
click_trigger = $(”...
© aratana.inc
改善その3:キュー構造の理解
28
スライド(500ms)
キュー
(queue)
stop()でキューの中身が削除され
る。
スライド(500ms)
スライド(500ms)
スライド(500ms)
スライド(500...
© aratana.inc
改善その3:キュー構造の理解
29
キュー
(queue)
次のslideToggle()が格納される。
スライド(500ms)
© aratana.inc
改善その3:キュー構造の理解
30
キュー
(queue)
美しい。(^o^)
スライド(500ms)
© aratana.inc
改善その4:少ないアクセスで済ませる
31
イベントデリゲート
(イベントの委譲)
© aratana.inc
改善その4:少ないアクセスで済ませる
32
liをクリックするとalert()を動作させたい。
liにイベントを設定しているが、この設定対象を変えます。
$(function () {
”use strict”;
v...
© aratana.inc
改善その4:少ないアクセスで済ませる
33
liにアクセスするより、ID+ulセレクタにアクセスするほうが速い。
イベント設定対象が減る。
$(function () {
”use strict”;
var
clic...
© aratana.inc
改善その4:少ないアクセスで済ませる
34
window
document
h2h1 ul
li
liのclickを発動!
© aratana.inc
改善その4:少ないアクセスで済ませる
35
window
document
h2h1 ul
li
$(window).on(“click”, fn) が発動!
$(document).on(“click”, fn) ...
© aratana.inc
改善その4:少ないアクセスで済ませる
36
window
document
h2h1 ul
li
これをバブリングと
言います。
© aratana.inc
改善その4:少ないアクセスで済ませる
37
バブリングの発生を止めておきましょう。
$(function () {
”use strict”;
var
click_trigger = $(”#click_trigge...
© aratana.inc
改善その4:少ないアクセスで済ませる
38
<ul>
<li>メニュー01</li>
<li>メニュー02</li>
<li>メニュー03</li>
<li>メニュー04</li>
</ul>
要素を動的に増やすと
...
© aratana.inc
改善その4:少ないアクセスで済ませる
39
.on() でバインドしてイベントデリゲートにしておくと、動的に追
加した要素にも自動的にイベントが設定されます。
click_trigger.next("ul").on(...
© aratana.inc
ご清聴ありがとうございました。
40
ご清聴
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Miyazaki.js vol.2

Miyazaki.js vol.2 で登壇した内容スライド。イベントデリゲートやバブリングのお話。

  • Login to see the comments

Miyazaki.js vol.2

  1. 1. © aratana.inc とあるjQueryのコードレビュー Miyazaki.js ver.1.0.0【Miyazaki.js vol.2】
  2. 2. © aratana.inc 自己紹介 1 高見 和也(Takami Kazuya) Twitter@miiitaka Facebook@miiitaka 株式会社アラタナ フロントエンドエンジニア JavaScriptと友達です。
  3. 3. © aratana.inc 仕様 2 Question: h2タグにクリックイベントを追加(IDで指定) → クリックで次要素のulタグ表示 → 再度クリックでulタグが非表示 → 500ミリ秒で開閉する liタグにクリックのイベント追加 → クリックしたらalert()を表示 → alert()の内容はクリックした要素のテキストを表示
  4. 4. © aratana.inc 基本のコードはこちら 3 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click!</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html>
  5. 5. © aratana.inc 追記場所 4 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { // 記述ができるのはここだけ。ほかのコードは触らないで作りましょう (^o^) }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click!</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html>
  6. 6. © aratana.inc JavaScript だけ抜粋 5 $(function () { $("h2").click(function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
  7. 7. © aratana.inc OH… 6 う、う………ん、まぁ、動くけどね。
  8. 8. © aratana.inc 改善その1:要素をキャッシュする 7 要素をキャッシュする
  9. 9. © aratana.inc 改善その1:要素をキャッシュする 8 要素は変数に保持してキャッシュ化しておきます。 その時の指定方法は、以下の通り。 idで指定する タグ名で指定する classで指定する 属性で指定する jQuery独自拡張セレクタで指定する 速い 遅い 高速化の方法は様々あるが、DOM操作は一番パフォーマンスが左 右されるのでより高速にアクセスする方法を身につけておく。
  10. 10. © aratana.inc 改善その1:要素をキャッシュする 9 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click!</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html> IDが設定されている
  11. 11. © aratana.inc 改善その1:要素をキャッシュする 10 $(function () { $("h2").click(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.click(function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); }); 変数に保持してそれを 使いまわします。
  12. 12. © aratana.inc 改善その2:イベントのバインド 11 イベントのバインド
  13. 13. © aratana.inc 改善その2:イベントのバインド 12 jQuery1.7以上であれば、on(), off() でバインド(関連付け)しま しょう。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.click(function () { click_trigger.on("click", function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
  14. 14. © aratana.inc 改善その2:イベントのバインド 13 .click(fn)は、.on("click", fn)のショートカットメソッドなので、良い といえば良いが… 拡張性やメリットを考慮して .on(“click”, fn) を採用しましょう。
  15. 15. © aratana.inc 改善その2:イベントのバインド 14 メリット①:複数のイベントタイプが設定できます。 $("#hoge").on("touchstart click", function () { // 処理を書きます });
  16. 16. © aratana.inc 改善その2:イベントのバインド 15 メリット②:複数のイベントハンドラが設定できます。 $("#hoge").on({ "mouseenter": function () { }, "mouseleave": function () { } });
  17. 17. © aratana.inc 改善その2:イベントのバインド 16 メリット③:ロード後に追加した要素に対してイベントをバインド できます。 ※これは、この後のイベントデリゲートにところで。
  18. 18. © aratana.inc 改善その2:イベントのバインド 17 メリット④:イベントに引数を渡すことができます。 .on( events [, selector ] [, data ], handler(eventObject) );
  19. 19. © aratana.inc 改善その3:キュー構造の理解 18 アニメーションのキュー
  20. 20. © aratana.inc 改善その3:キュー構造の理解 19 liが対象になると、slideToggle()メソッドがliの数分発生するので無 駄な処理が動作してしまいます。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $("#click_trigger + ul > li").slideToggle(500); $(this).next("ul").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
  21. 21. © aratana.inc 改善その3:キュー構造の理解 20 スライド(500ms) Click!キュー (queue) アニメーション処理がキュー に保持
  22. 22. © aratana.inc 改善その3:キュー構造の理解 21 スライド(500ms) Click!キュー (queue) アニメーションの時間、500 ミリ秒処理が実行される。
  23. 23. © aratana.inc 改善その3:キュー構造の理解 22 スライド(500ms) Click!キュー (queue) 500ミリ秒後、処理完了。 キューから削除される。
  24. 24. © aratana.inc 改善その3:キュー構造の理解 23 スライド(500ms) Click! Click! Click! Click! Click! Click! キュー (queue) ものすごくClick! スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
  25. 25. © aratana.inc 改善その3:キュー構造の理解 24 スライド(500ms) Click! Click! Click! Click! Click! Click! キュー (queue) キューには終了していない処 理が待ち状態になる。 スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
  26. 26. © aratana.inc 改善その3:キュー構造の理解 25 スライド(500ms) Click! Click! Click! Click! Click! Click! キュー (queue) 500ミリ秒アニメーションが 順番に処理されていく。スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
  27. 27. © aratana.inc 改善その3:キュー構造の理解 26 スライド(500ms) キュー (queue) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) キューの中の処理が終わるま で処理は続く。
  28. 28. © aratana.inc 改善その3:キュー構造の理解 27 キューのアニメーションを破棄してから次のアニメーションを動作 させます。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
  29. 29. © aratana.inc 改善その3:キュー構造の理解 28 スライド(500ms) キュー (queue) stop()でキューの中身が削除され る。 スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms) スライド(500ms)
  30. 30. © aratana.inc 改善その3:キュー構造の理解 29 キュー (queue) 次のslideToggle()が格納される。 スライド(500ms)
  31. 31. © aratana.inc 改善その3:キュー構造の理解 30 キュー (queue) 美しい。(^o^) スライド(500ms)
  32. 32. © aratana.inc 改善その4:少ないアクセスで済ませる 31 イベントデリゲート (イベントの委譲)
  33. 33. © aratana.inc 改善その4:少ないアクセスで済ませる 32 liをクリックするとalert()を動作させたい。 liにイベントを設定しているが、この設定対象を変えます。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
  34. 34. © aratana.inc 改善その4:少ないアクセスで済ませる 33 liにアクセスするより、ID+ulセレクタにアクセスするほうが速い。 イベント設定対象が減る。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); click_trigger.next("ul").on("click", "li", function () { $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
  35. 35. © aratana.inc 改善その4:少ないアクセスで済ませる 34 window document h2h1 ul li liのclickを発動!
  36. 36. © aratana.inc 改善その4:少ないアクセスで済ませる 35 window document h2h1 ul li $(window).on(“click”, fn) が発動! $(document).on(“click”, fn) が発動! $(“ul”).on(“click”, fn) が発動!
  37. 37. © aratana.inc 改善その4:少ないアクセスで済ませる 36 window document h2h1 ul li これをバブリングと 言います。
  38. 38. © aratana.inc 改善その4:少ないアクセスで済ませる 37 バブリングの発生を止めておきましょう。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function (e) { e.stopPropagation(); $(this).next("ul").stop().slideToggle(500); }); click_trigger.next("ul").on("click", "li", function (e) { e.stopPropagation(); alert($(this).text()); }); });
  39. 39. © aratana.inc 改善その4:少ないアクセスで済ませる 38 <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> <li>メニュー04</li> </ul> 要素を動的に増やすと しましょう。 $("button").on("click", function (e) { e.stopPropagation(); var objLi = $("<li>").text("メニュー04"); click_trigger.next("ul").append(objLi); });
  40. 40. © aratana.inc 改善その4:少ないアクセスで済ませる 39 .on() でバインドしてイベントデリゲートにしておくと、動的に追 加した要素にも自動的にイベントが設定されます。 click_trigger.next("ul").on("click", "li", function (e) { e.stopPropagation(); alert($(this).text()); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); ○拡張ある記述 ×拡張性がない
  41. 41. © aratana.inc ご清聴ありがとうございました。 40 ご清聴 ありがとうございました。

×