jQueryを使う時に少しだけ気をつけてほしいところをまとめてみました。

1. jQuery
〜使う時に少しだけ気をつけてほしいこと〜

2. about me
増子 良太
（ますこ りょうた）
twitter
@rmasco
facebook
rmasco
得意な言語
Perl(MovableType)

3. はしれ！
ガタンゴトン
Androidアプリです！
無料です！

4. jQueryでできること

5. クロスブラウザ対応！
IEめ(>_<)。。。とか言わなくていい！
でもやっぱり言う時ありますが。。。

6. セレクタが超強力
#id、.class、[attribute]、:not、:eq、:empty、
:has、:hidden、:parent

7. DOMの操作がすごく楽！
append()、prepend()、after()、before()、
hide()、remove()、clone()、text()、html()

8. もうjQueryなくては
生きていけない！

9. NO LIFE,
NO jQuery

10. そんなjQueryだからこそ

11. 書く時に気をつけないと、
可読性だったり、
パフォーマンスの悪いソースコードが
できあがってしまいます

12. 本当にあった怖い話
そんなに複雑に書かなくても。。。

13. $(‘#id #id2 .class #id3’);
$(‘#id’).filter(‘#id2’).filter(‘.class’).filter(‘#id3’);
$(‘#id > #id2 > .class > #id3’);
$(‘#id4’).parents().filter(‘#id3’);

15. セレクタを複雑化させない

16. IDはHTML内に同じ名前が複数出てこない
$(‘#id3’)

17. 必要であればHTMLをいじる
<div class=“class1”><div class=“class2”><div class=“class3”>
↓
<div class=“class1”><div class=“class2”><div id=“id3” class=“class3”>
$(‘.class1 .class2 .class3’) → $(‘#id3’)

18. セレクタの種類を意識しよう

19. IDセレクタ $(‘#id’);
タイプセレクタ $(‘div’);
Classセレクタ $(‘.class’);
属性セレクタ $(‘[name=“photo”]’);
jQuery拡張セレクタ $(‘:hidden’);

20. これらのセレクタは上から順に高速です
結局の所、内部ではJavaScriptだからです

21. セレクタを
複数回使わない

22. 同じDOMに複数の処理をする
$(‘#id’).addClass(‘class’);
$(‘#id’).css(‘display’, ‘block’);
$(‘#id’).on(‘click’, function(){
・・・・
});

23. この方法だと、
#idを探しに行く×3
内部行われてしまいます

24. 変数にキャッシュしましょう。
var target = $(‘id);
target.addClass(‘class’);
target.css(‘display’, ‘block’);
target.on(‘click’, function(){
・・・・
});

25. 読みやすさ

26. jQueryだけではないですが、
読みやすさも意識しましょう

27. たとえばCSSを変更したい
$(‘#id’).css(‘display’,’block’).css(‘float’,’left’).css(‘background-
color’, ‘#fff’).css(‘padding-top’,’30px’);

29. 読みやすさは人それぞれだと思います
私は長いCSSは下記のように書きます
$(‘#id’).css({
‘display’: ‘block’,
‘float’: ‘left’,
‘background-color’: ‘#fff’,
‘padding-top’: ‘30px’
});

30. もっと言うと・・・
クラス名を追加してあげて、CSS側に書いて上げてもよい
かも
JavaScript側
$(‘#id’).addClass(‘class’);
CSS側
.class {
‘display’: ‘block’,
‘float’: ‘left’,
‘background-color’: ‘#fff’,
‘padding-top’: ‘30px’
}

31. 難しい話をしてみましたが
とにかく作ってみよう
いくらウンチク語れても動かなきゃ意味がない
まずは動くもの、それから少しずつ意識すれば良
い
家に帰ったらさっそくやってみましょう！

32. $(function(){
$(‘body’).html(‘<p>Hello World!</p>’);
});

33. ご清聴
ありがとうございました