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’);

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

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

16.
必要であれば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’)

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

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

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

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

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

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

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

24.
読みやすさ

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

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

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

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

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

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

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