社内講習わくわくjQuery編3 - 書くようになったら気をつけたい5つのこと

TIPSというかオマケ

プログラマからするとオマケじゃなくて，本編に相当してる気もしますが，以下つらつらと．世間的には色々な入門書とかで散々言われてるような，出がらしレベルの内容です．

これまでにほとんど言及していない変数とか宣言とかキナくさい単語が出てきますが，気になったときに調べてみればいいと思います．

スタイル操作はCSSに任せて，jQueryは控えめにする

jQueryはロジックを含みます．見た目の調整に関わるスタイリングは，なるべくCSSに任せてjQueryスクリプトの中は控えめに，簡潔に保ちます．

$(function()
{
    $('div').css('border', '2px solid blue').css('color', 'red').css('opacity', 1);

    $('div').css('border', '1px dotted silver').css('color', 'gray').css('opacity', 0.6);
});

こういうものは，

$(function()
{
    $('div').addClass('active');
    $('div').addClass('inactive');
});

.active {
    border: 2px solid blue;
    color: red;
    opacity: 1;
}
.inactive {
    border: 1px dotted silver;
    color: gray;
    opacity: 0.6;
}

と，書くことが望ましいです．後日メンテナンス等で改修するときに，コードの書き方や分量はスッキリしているほうが読みやすく，分かりやすいので，後の自分を助けてくれます．

変数はブロックの冒頭でまとめて宣言しておく

使う変数（処理の登場人物）は冒頭でまとめて宣言して，見通しを良くしておきます．宣言っていうと大仰ですが，メモっとけ，っていうぐらいのノリです．

また，うっかりグローバル変数を作ったりすると，それはしばしば変数の衝突という惨事につながりますが，それの予防効果もあります．

// これらの変数を使うつもりだよー
var $hoge;
var $fuga;
var $piyo;

varによる変数の宣言は，カンマで区切って複数指定することもできます．

// まとめて宣言したよー
var $hoge, $fuga, $piyo;

ただし，慣れるまでは，先に出てきたほうの例を使うとよいです．

セレクタで取得した結果は，変数として保持しておく

ここでは，裏でjQueryが何をしているかを少し意識します．セレクタというのはHTMLから指定された要素を探索する処理です．

/* セレクタが計3回実行されている */
$('#header').css('color', 'red');
$('#header').fadeTo(1000, 0.3);
$('#header').addClass('myClass');

これはよくない書き方です．同じ要素に対して操作を行うのであれば，セレクタの結果は変数に保持したほうが効率的です．

/* セレクタは1回だけ実行される */
var $header = $('#header');

$header.css('color', 'red');
$header.fadeTo(1000, 0.3);
$header.addClass('myClass');

セレクタの適用範囲が予め分かっているなら指定する

これも，セレクタの探索処理に関わることです．探索対象の範囲が分かりきっていれば，指定したほうが効率的です．

var $content = $('#content');
var $targets  = $('.target', $content);

/* または */

var $targets  = $('.target', '#content');

探し物の探索範囲は狭いほうが，早く発見できます．

メソッドチェーンは便利だけど気をつけよう

$(function()
{
     $('#header').css('color', 'red').fadeTo(1000, 0.3).addClass('myClass');
});

id="header"を選択して，cssのcolorプロパティをredにし，1000ミリ秒かけてopacity(IEはちょっと違うけど)を0.3にし，最後にmyClassというクラスを要素に追加します．

このように，一連の処理を次々と記述していく方法をメソッドチェーンと呼びます．cssとかfadeToとかaddClassとかいてある部分が，使おうとしている機能の名前，メソッドと呼ばれるものです．これらを鎖のようにつなげていくからメソッドチェーンと呼びます．たぶんね．

これはjQueryの特徴的な記法と言えますが，単純なことを簡潔に表現する方法であって，常にベストな書き方ではないことを覚えておきます．

$(function()
{
     var $header = $('#header');

     $header.css('color', 'red');
     $header.fadeTo(1000, 0.3);
     $header.addClass('myClass');

});

前例と，上記の例は等価です．前例との大きな違いは，間にデバッグ処理をはさんだり，特定の処理だけコメントアウトして試行することなどが容易になっていることです．メソッドチェーンは思わず気持ち良く使ってしまいがちですが，あとで他の人が見ても困らないようにするためにも，ほどほどにしておきましょう．

---