より良いjQueryのコードを記述するには

より良いjQueryのコードを書くためにいくつかの方法を提言しているWriting Better jQuery Codeを紹介します。

リンク切れの部分は省略しております。また、本文についても意訳や誤訳で若干意味が異なっている部分等あるかもしれません。予めご了承ください。

詳細は翻訳元をご確認ください。

#変数のキャッシング

DOMのトラバーサルは負荷が掛かりますので、それらを再利用する際は選択した要素をキャッシュするようにしてみてください。

// bad

h = $('#element').height();
$('#element').css('height',h-20);

// good

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

#グローバルを避ける

jQueryを使って、一般的にはJavaScriptと同様に、変数が適切に関数内でスコープが設定されていることを確認することをお勧めします。

// bad

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// good

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

#ハンガリアン記法を使う

変数の前に$記号を置くことで、このアイテムはjQueryオブジェクトが含まれていることを認識しやすくなります。

// bad

var first = $('#first');
var second = $('#second');
var value = $first.val();

// better - we use to put $ symbol before jQuery-manipulated objects

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

#変数チェーンを使う(単独変数パターン)

複数の変数文を持つのではではなく、単一のステートメントにそれらを組み合わせることができます。最後に割り当てられた値なしの変数を置くことをお勧めします。

var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

#‘On’が好ましい

jQueryの最近のバージョンでは、 click() のような関数が on('click') の省略形であるように変更されています。 以前のバージョンでは click()bind() の為の省略形という実装とは異なっていた。jQueryの1.7の時点では、 on() がイベントハンドラを取り付けるための好ましい方法である。しかしながら、一貫性を保つために、単に一律に on() を使用することができます。

// bad

$first.click(function(){
	$first.css('border','1px solid red');
	$first.css('color','blue');
});

$first.hover(function(){
	$first.css('border','1px solid red');
})

// better
$first.on('click',function(){
	$first.css('border','1px solid red');
	$first.css('color','blue');
})

$first.on('hover',function(){
	$first.css('border','1px solid red');
})

#JavaScriptを凝縮する

一般に、可能な限りの機能を組み合わせることを試みることが好ましい。

// bad

$first.click(function(){
	$first.css('border','1px solid red');
	$first.css('color','blue');
});

// better

$first.on('click',function(){
	$first.css({
		'border':'1px solid red',
		'color':'blue'
	});
});

#チェーンを使う

上記のルールに続き、jQueryはチェーンメソッドを簡単に利用できます。

// bad

$second.html(value);
$second.on('click',function(){
	alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);

// better

$second.html(value);
$second.on('click',function(){
	alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

#コードの可読性を保つ

スクリプトを凝縮し、連鎖を利用しようとすると、コードが時々読めなくなります。可読性を保つためにタブや改行をしてみてください。

// bad

$second.html(value);
$second.on('click',function(){
	alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// better

$second.html(value);
$second
	.on('click',function(){ alert('hello everybody');})
	.fadeIn('slow')
	.animate({height:'120px'},500);

#短絡評価が好ましい

短絡評価は左から右から評価式で && (AND)または || (OR) の演算子を使用します。

// bad

function initVar($myVar) {
	if(!$myVar) {
		$myVar = $('#selector');
	}
}

// better

function initVar($myVar) {
	$myVar = $myVar || $('#selector');
}

#ショートカットが好ましい

符号化のショートカットを利用することはコードを凝縮させる方法の一つです。

// bad

if(collection.length > 0){..}

// better

if(collection.length){..}

#重い操作を行うとするときに、要素を切り離す

もし、あなたはDOM要素の重い操作を行おうとしている場合は、最初にそれを切り離してから、それを再追加することをお勧めします。

// bad

var 
	$container = $("#container"),
	$containerLi = $("#container li"),
	$element = null;

$element = $containerLi.first(); 
//... a lot of complicated things

// better

var 
	$container = $("#container"),
	$containerLi = $container.find("li"),
	$element = null;

$element = $containerLi.first().detach(); 
//...a lot of complicated things

$container.append($element);

#トリックを知ること

経験が少ないあなたがjQueryメソッドを使用する場合、それを使用することが好ましいか、より高速な方法があるかどうか、ドキュメントを確認するようにしてください。

// bad

$('#id').data(key,value);

// better (faster)

$.data('#id',key,value);

#サブクエリキャッシュの親を使用

先に述べたように、DOMのトラバーサルは負荷のかかる操作です。通常は、親要素をキャッシュし子要素を選択する際に、これらのキャッシュされた要素を再利用することをお勧めします。

// bad

var 
	$container = $('#container'),
	$containerLi = $('#container li'),
	$containerLiSpan = $('#container li span');

// better (faster)

var 
	$container = $('#container '),
	$containerLi = $container.find('li'),
	$containerLiSpan= $containerLi.find('span');

#ユニバーサルセレクタを避ける

他のセレクタと組み合わせたときに、ユニバーサルセレクタ(ワイルドカード)は非常に遅いです。

// bad

$('.container > *'); 

// better

$('.container').children();

#暗黙ユニバーサルセレクタを避ける

セレクタをやめたとき、ユニバーサルセレクタ(*)はまだ含まれています。

// bad

$('.someclass :radio'); 

// better

$('.someclass input:radio');

#セレクタを最適化

例えば、IDを使用すると既に十分に具体的であるので、さらなるセレクタを具体的に追加する必要がありません。

// bad

$('div#myid'); 
$('div#footer a.myLink');

// better
$('#myid');
$('#footer .myLink');

#複数のIDを探索しない

繰り返しますが、適切に使用したときIDは複数の子孫セレクタの追加を必要としません。

// bad

$('#outer #inner'); 

// better

$('#inner');

#最新バージョンを使用すること

最新バージョンは、通常は最高のものです:時には軽く、時には速く。明らかに、あなたがサポートしているコードとの互換性を考慮する必要があります。たとえば、バージョン2.0からはIE6/7/8のための多くのサポートがないという事を留意してください。

#推奨されないメソッドを使用しないこと

常にそれぞれの新しいバージョン用の非推奨のメソッドから目を離さず、それらを使用しないようにすることが重要です。

// bad - live is deprecated

$('#stuff').live('click', function() {
  console.log('hooray');
});

// better
$('#stuff').on('click', function() {
  console.log('hooray');
});

CDNからjQueryのコードをロードする
GoogleのCDNは、すぐに、ユーザーの最寄りのキャッシュの場所からスクリプトを提供します。 GoogleのCDNを使用するには次のURLを使用します。
http://code.jQuery.com/jQuery-latest.min.js

#必要に応じてネイティブJavaScriptとjQueryを組み合わせる

前に述べていたように、jQueryはJavaScriptのであり、これは、ネイティブJavaScriptはjQueryで行うのと同じことを行うことができることを意味します。 ネイティブJavaScript(もしくはvanilla)で書くことで、しばしば読みにくくし、保守しやすくないコードと長いファイルになってしまいます。 しかし、それは高速なコードを意味しています。どんなフレームワークも、ネイティブのJavaScriptの動作よりも小さく軽く、速くなることはないこと覚えておいてください。

このJavaScriptとjQueryの性能差に起因して、私はjQueryの機能に相当するネイティブを使用して、それらの両方を混合は賢明な方法でとてもお勧めします。

#最終的な考慮事項

最後に、私は他の優良事例が多数含まれているjQueryのパフォーマンスに関する記事をお勧めします。その話題についてより深く見たい場合は面白いでしょう。

jQueryが必要条件と選択ではないことに注意してください。 あなたがそれを使用している理由を考えてみましょう。 DOM操作? Ajax? テンプレート? CSSアニメーション? セレクタエンジン? 場合によっては、マイクロJavaScriptフレームワークや、具体的ニーズに合わせて調整したjQueryのカスタムビルドを検討する価値があるかもしれないです。

この記事は http://blog.mathewdesign.com/2013/11/14/writing-performant-and-quality-jquery-code/ に掲載されていました。


Thanks to Mathew Carella.

twitterfacebookhatenafacebook