🧊

jQueryをはじめたばかりのあなたへ

まぁ、うちの同僚なんですけど。
私も人にどうこう言えるほど大したスキルはないですが、それでも即実践できるお役立ちTipsをいくつかお届け。

全体をラップする

$('.hoge').addClass('active');

$('.piyo').css('color', 'red');

みたく、唐突に書き始めるんじゃなくて、

$(function(){// ラップする!

  $('.hoge').addClass('active');

  $('.piyo').css('color', 'red');

});// こうやって囲う!

こうすると、変数のスコープを絞れてコードのお行儀がよろしくなります。
あとは、いわゆるDOMContentLoadedのタイミングで内容が実行されるようになります。

ちなみに、

$('document').ready(function() { ... });

$(function(){ ... });

一緒なので短いほうが良いよねー。

セレクタはキャッシュする

$('.hoge').addClass('active');

$('.hoge').css('color', 'red');

$('.hoge').hide();

って、何回も書くことになるなら、

var $hoge = $('hoge');// 一つにキャッシュしておく!

$hoge.addClass('active');

$hoge.css('color', 'red');

$hoge.hide();

ってすると、コードの見通しもよくなるし、無駄がなくなってパフォーマンスもよくなります。

関数もキャッシュする

$('.hoge').toggle(
  function() { ... },
  function() { ... }
);

って書くよりも、

var funcA = function() { ... };
var funcB = function() { ... };

$('.hoge').toggle(funcA, funcB);

って書くほうが、見通しがよくて良いです。
もちろん、本当に短い処理ならそのまま書いてもよいけど。

親から攻める

ちょっと話題は戻るけど、

<div class="hoge-box">
  <div class="title">コレと</div>
  <ul class="lists">
    <li>コレで何かしたいなら</li>
    <li></li>
  </ul>
</div>

こんなHTMLがあるときに、

$('.title').addClass('selected');
$('.lists li:eq(0)').addClass('selected');

とか書くよりも・・・、

var $hogeBox = $('hoge-box');// 親だけ捕まえておいて、

// 親から攻める!
$hogeBox.find('.title').addClass('selected');
$hogeBox.find('.lists').children().first().addClass('selected');

ってする方が、パフォーマンスがよいです。
jQueryだからこそできる $('.lists li:eq(0)') みたいな書き方は、実はあまりパフォーマンスがよくなくて、できる限り避けるのがよいです。

メソッドはチェーンする

また先の例ですが、

$('.hoge').addClass('active');
$('.hoge').css('color', 'red');
$('.hoge').hide();

同じ要素に何回もアクセスするんじゃなくて、

// チェーンさせるともっと良い
$('.hoge').addClass('active').css('color', 'red').hide();

同じ要素へ何かするなら、つなげて書きましょう。
うわぁ、すごくそれっぽい。

ドキュメントをお読みなさい

これに尽きます。
使えるメソッドを全部暗記できるでもなし、ふとした瞬間に調べるクセと、調べられる方法さえ知ってればなんとかなります。

日本語ドキュメントもいろいろあることやし。

参考:jQuery 日本語リファレンス | js STUDIO

ソースをお読みなさい

jQueryを使うためにJavaScriptをはじめた!って人はそんなに多くないはずで、どっちかというとJavaScript覚えたくてまずはjQueryって人が最近は多い気がしないでも。

で、どうすればJavaScriptが覚えられるか、良いコードが書けるように成るか。
良いコードを読んでマネるのが一番手っ取り早いですよね。

てなわけで。

参考:code.jquery.com/jquery-2.0.3.js

古いIEの相手をしない or スマートフォンだけターゲットにしてるなら、もうver. 2.x系だけ見てても良い気がします。


以上、コレだけでもとりあえず覚えておくとそれらしいコードになるかと。

よくよく見ると、jQueryに限った話じゃなくてJavaScript全般の話みたいになってたw