零弐壱蜂

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

はじめに

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

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

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

jQueryやJavaScriptのパフォーマンスについて論じた記事はたくさんあります。しかし、この記事では、jQueryとJavaScriptのコードを改善するためのスピードのヒントと私自身のアドバイスをまとめたいと思います。より良いコードとは、より速いアプリやジャンクのないWebサイトを意味する。高速なレンダリングと反応性は、より良いユーザー体験を意味します。

まず第一に、jQueryはJavaScriptであるということを心にとどめておくことが重要です。つまり、どちらも同じコーディング規約、スタイルガイド、ベストプラクティスを採用すべきだということです。

まず、JavaScriptの初心者であれば、jQueryをいじり始める前に、初心者のためのJavaScriptのベストプラクティスについての記事と、高品質のJavaScriptの書き方についての記事を読むことをお勧めする。

jQueryを使う準備ができたら、これらのガイドラインに従うことを強くお勧めします。

変数のキャッシング

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 - jQuery で操作するオブジェクトの前に $ 記号を置くために使用する
var $first = $('#first');
var $second = $('#second');
var value = $first.val();

変数チェインを使う（単独変数パターン）

複数のvarステートメントを持つよりも、それらを1つのステートメントにまとめることができます。代入値のない変数は最後に置くことをお勧めします。

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。ゼロからInternet Explorer 6/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 を使用します。

https://code.jQuery.com/jQuery-latest.min.js

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

前にも言ったように、jQueryはJavaScriptであり、jQueryでもネイティブJavaScriptと同じことができるということだ。ネイティブ（またはバニラ）JavaScriptで書くと、可読性や保守性の低いコードになったり、ファイルが長くなったりすることがある。しかし、コードが速くなることもあります。ネイティブJavaScriptの操作よりも小さく、軽く、速くできるフレームワークはひとつもないことを覚えておいてください。

バニラJavaScriptとjQueryの間にはこのようなパフォーマンスのギャップがあるため、私は両者を賢く組み合わせて、（できる限り）jQueryのネイティブ関数と同等のものを使うことを強く推奨する。

最終的な考慮事項

最後に、jQueryのパフォーマンスを向上させるためのこの記事をお勧めします。

jQueryを使うことは必須条件ではなく、選択であることを心にとどめておいてください。なぜjQueryを使うのかを考えてみてください。DOM操作？Ajax？テンプレート化？CSSアニメーション？セレクタエンジン？時には、「マイクロJavaScriptフレームワーク」や「jQueryのカスタムビルド」を検討する価値があるかもしれません。

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