jQueryで気をつけてほしいこと

2,201 views
2,227 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,201
On SlideShare
0
From Embeds
0
Number of Embeds
392
Actions
Shares
0
Downloads
16
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

jQueryで気をつけてほしいこと

  1. 1. jQuery 〜使う時に少しだけ気をつけてほしいこと〜
  2. 2. about me 増子 良太 (ますこ りょうた) twitter @rmasco facebook rmasco 得意な言語 Perl(MovableType)
  3. 3. はしれ! ガタンゴトン Androidアプリです! 無料です!
  4. 4. jQueryでできること
  5. 5. クロスブラウザ対応! IEめ(>_<)。。。とか言わなくていい! でもやっぱり言う時ありますが。。。
  6. 6. セレクタが超強力 #id、.class、[attribute]、:not、:eq、:empty、 :has、:hidden、:parent
  7. 7. DOMの操作がすごく楽! append()、prepend()、after()、before()、 hide()、remove()、clone()、text()、html()
  8. 8. もうjQueryなくては 生きていけない!
  9. 9. NO LIFE, NO jQuery
  10. 10. そんなjQueryだからこそ
  11. 11. 書く時に気をつけないと、 可読性だったり、 パフォーマンスの悪いソースコードが できあがってしまいます
  12. 12. 本当にあった怖い話 そんなに複雑に書かなくても。。。
  13. 13. $(‘#id #id2 .class #id3’); $(‘#id’).filter(‘#id2’).filter(‘.class’).filter(‘#id3’); $(‘#id > #id2 > .class > #id3’); $(‘#id4’).parents().filter(‘#id3’);
  14. 14. セレクタを複雑化させない
  15. 15. IDはHTML内に同じ名前が複数出てこない $(‘#id3’)
  16. 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. 17. セレクタの種類を意識しよう
  18. 18. IDセレクタ $(‘#id’); タイプセレクタ $(‘div’); Classセレクタ $(‘.class’); 属性セレクタ $(‘[name=“photo”]’); jQuery拡張セレクタ $(‘:hidden’);
  19. 19. これらのセレクタは上から順に高速です 結局の所、内部ではJavaScriptだからです
  20. 20. セレクタを 複数回使わない
  21. 21. 同じDOMに複数の処理をする $(‘#id’).addClass(‘class’); $(‘#id’).css(‘display’, ‘block’); $(‘#id’).on(‘click’, function(){ ・・・・ });
  22. 22. この方法だと、 #idを探しに行く×3 内部行われてしまいます
  23. 23. 変数にキャッシュしましょう。 var target = $(‘id); target.addClass(‘class’); target.css(‘display’, ‘block’); target.on(‘click’, function(){ ・・・・ });
  24. 24. 読みやすさ
  25. 25. jQueryだけではないですが、 読みやすさも意識しましょう
  26. 26. たとえばCSSを変更したい $(‘#id’).css(‘display’,’block’).css(‘float’,’left’).css(‘background- color’, ‘#fff’).css(‘padding-top’,’30px’);
  27. 27. 読みやすさは人それぞれだと思います 私は長いCSSは下記のように書きます $(‘#id’).css({ ‘display’: ‘block’, ‘float’: ‘left’, ‘background-color’: ‘#fff’, ‘padding-top’: ‘30px’ });
  28. 28. もっと言うと・・・ クラス名を追加してあげて、CSS側に書いて上げてもよい かも JavaScript側 $(‘#id’).addClass(‘class’); CSS側 .class { ‘display’: ‘block’, ‘float’: ‘left’, ‘background-color’: ‘#fff’, ‘padding-top’: ‘30px’ }
  29. 29. 難しい話をしてみましたが とにかく作ってみよう いくらウンチク語れても動かなきゃ意味がない まずは動くもの、それから少しずつ意識すれば良 い 家に帰ったらさっそくやってみましょう!
  30. 30. $(function(){ $(‘body’).html(‘<p>Hello World!</p>’); });
  31. 31. ご清聴 ありがとうございました

×