裏紙に書く程度の内容

jQuery チェーンメソッドを使う

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

チェーンメソッドを利用しましょう

についてです。

チェーンメソッドとは

チェーンメソッドとはその名のとおり、メソッドの呼び出しを鎖のようにつなげて呼び出すことです。

jQueryではほとんどのメソッドがその戻り値として自身のオブジェクトを返します。

そのためメソッドの連結が可能になっています。

使用例

例えば、とある要素にクラス追加とテキストを変更する場合、チェーンを使用しないと

$('.some-class').addClass('hoge');
$('.some-class').text('ほげ!');

な感じです。これはチェーンを使って

$('.some-class').addClass('hoge').text('ほげ!');

のように書き直せます。

こうするとソースコードが見やすくなりますね。

また、jQueryオブジェクトの作成回数が減るため、その分負荷も軽くなるというメリットもあります。

どの程度負荷軽減されるのか

チェーンのいいところはソースコードがすっきりすることですが、もう一つのメリットである負荷軽減について調べてみましょう。

まず、チェーンを使わない場合。

console.time('test');
for (var i = 0; i < 1000; i++) {
    $('.sample').addClass('hoge');
    $('.sample').attr('data-type', 'test-data');
    $('.sample').text('ほげ!');
}
console.timeEnd('test');

これを実行するとおよそ 140ms くらいでした。

続いてチェーン使用の場合。

console.time('test');
for (var i = 0; i < 1000; i++) {
    $('.sample').addClass('hoge').attr('data-type', 'test-data').text('ほげ!');
}
console.timeEnd('test');

こっちは 120ms くらいでした。思ったより差は出ません。

もちろんhtmlの構成状態やチェーンの数にもよるでしょうが、速度改善の効果はあまり期待できないといってもいいでしょう。

チェーンを切らないために - find() end()の使用

find()で子孫要素から任意の要素をjQueryオブジェクトとして取得できます。また、end()で現在選択中のオブジェクトを破棄し、1つ前の選択状態に戻すことができます。

これをうまく使うとチェーンを切らずに記述することができます。

使用例:

$('#myTable .firstColumn').css('background','red');
$('#myTable .lastColumn').css('background','blue');

このコードは以下のように書き換えられます。

$('#myTable')
    .find('.firstColumn')
    .css('background','red')
    .end()
    .find('.lastColumn')
    .css('background','blue');

何がうれしいかって・・・・なんかこっちのほうがかっこいいじゃないですか!

ぶっちゃけそれほどメリットはない気がします。

きちんと説明すると、こうするとオブジェクトの再作成がなくなるため、リソースの節約になります。ただ、それはほんのわずか。
(ためしてみたところ、150ms程度で動いていたものが140msくらいになりました。)

どちらかといえばこれも見やすいコードにするっていう目的で使われると思いますが、この例では微妙ですね。前者のほうが見やすい気がします。

しかしながら、”なんかかっこいい”って結構重要だと思います。
なんとなく書き方のトレンドみたいなものって存在していて、(これは主観ですが)そういうソースってやっぱり読みやすくなってるんですよね。
私はチェーンってあまり使ったことなかったから前者のほうが見やすく感じるんだけど、最新の技術を追っていく人なら後者のほうが見やすいのかもしれません。

また、例ではfind()が挙げられていますが、jQueryオブジェクトを返す他のメソッドでも同様の使い方ができます。

結論

チェーンメソッドは速度改善の効果はあまり期待できない。

ただし、見やすくなる/今風なので積極利用!

Index