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.

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

3,892 views

Published on

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

Published in: Technology
  • Be the first to comment

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. ご清聴 ありがとうございました

×