JQueryは、地球上で最も人気のあるJavaScriptライブラリの1つです（JavaScriptとは何か）。2006年1月14日、BarCampNYCでjQueryが発表された。 JSは、ブラウザはすべてその一部をサポートしていたものの、まだどこか物足りない状態だった。そのため、多くのハッキングや回避策を講じなければなりませんでした。

JQueryの登場により、ブラウザに準拠したコードを非常に簡単に書くことができるようになり、すべてが変わりました。コンピュータサイエンスの学位がなくても、ウェブページをアニメーション化することができるようになったのです。10年後、jQueryはまだ王者か？今まで使ったことがない人は、これで何ができるのか？

JavaScriptのスキルをリフレッシュするだけでなく、HTMLとCSSのチュートリアルに慣れていない場合は、最初に読んでおくとよいでしょう。

jQueryについては以前にも取り上げましたので、このjQueryガイドでは実際のコーディングに焦点を当てます。

はじめに

DOM（Document Object Model）からIDを選択するJS方式はご存じでしょう。

document.getElementById('foo');

JQueryはさらに一歩進んで、クラス、ID、複数の要素を選択するために異なるメソッドを呼び出す必要はありません。

$('#bar');

ほぼすべてのDOM要素を選択する構文はまったく同じです。ここではクラスを選択する方法を説明します。

$('.baz');

また、実際の力を使って創造的になることもできます。これは、最初の要素を除く、テーブル内のすべてのtd要素を選択します。

$('table td').not(':first');

セレクタの名前がCSSの対応する名前とほぼ一致していることに注目してください。オブジェクトは通常のJS変数に割り当てることができます。

var xyzzy = $('#parent .child');

また、jQueryの変数を使用することもできます。

var $xyzzy = $('#parent .child');

ドル記号は、変数がjQueryオブジェクトであることを示すためにのみ使用され、複雑なプロジェクトでは便利です。

ある要素の親要素を選択することができます。

$('child').parent();

または兄弟姉妹

$('child').siblings();

ブラウザの準備ができたら、コードを実行する必要がありますが、ここではその方法を説明します。

$(document).ready(function() { c***ole.log('ready!');});

より大きな力

さて、基本的なことがわかったところで、もう少し複雑な話に移りましょう。

<table id="cars"> <tr> <th>Make</th> <th>Model</th> <th>Color</th> </tr> <tr> <td>Ford</td> <td>Escort</td> <td>Black</td> </tr> <tr> <td>Mini</td> <td>Cooper</td> <td>Red</td> </tr> <tr id="fordCortina"> <td>Ford</td> <td>Cortina</td> <td>White</td> </tr></table>

例えば、各行の色を変えたい場合（ゼブラストライプといいます）、CSSで実現することができるようになりました。

#cars tr:nth-child(even) { background-color: red;}

これは、jQueryを使って実現する方法です。

$('tr:even').addClass('even');

これにより、CSSでクラスが定義されている場合でも、同じことが実現できます。なお、クラス名の前にフルストップは必要ありません。これらは通常、メインセレクターにのみ適用されます。理想は、まずCSSで実現することですが、これは大きな問題ではありません。

JQueryは、行を隠したり削除したりすることもできます。

$('#fordCortina').hide();$('#fordCortina').remove();

削除する前に要素を非表示にする必要はありません。

機能

JQueryの関数は、JSと同じです。それらは中括弧を使い、引数を取ることができる。本当に面白いのは、コールバックを通してです。コールバックは、ほとんどのjQuery関数に適用することができます。コア操作の完了後に実行されるコード片を指定する。これにより、素晴らしい機能性を実現しています。もしそれらが存在せず、直線的に実行されることを期待するコードを書いた場合、JSは前の行を待っている間に次の行を実行し続けることになります。コールバックは、元のタスクが完了した後にのみコードが実行されることを保証します。一例として

$('table').hide(function(){ alert('MUO rules!');});

注意 - このコードは、各要素に対してアラートを実行します。セレクタがページに複数回表示された場合、複数のアラートを受信します。

コールバックは、他のパラメータを指定して使用することができます。

$('tr:even').addClass('even', function(){ c***ole.log('Hello');});

右中括弧の後にセミコロンがあることに注意してください。これは通常、JS関数では必要ありませんが、それでもコードは1行とみなされます（コールバックが中括弧内にあるため）。

アニメーション

JQueryを使えば、ウェブアニメーション**がとても簡単にできます。

$('.fade1').fadeIn('slow');$('#fade2').fadeOut(500);

低速、中速、高速の3つの速度、または速度をミリ秒単位で表す数値（1000ms＝1秒）を指定することができます。ほぼ全てのCSS要素にアニメーションを設定することができます。これにより、セレクタの幅が現在の幅から250pxに設定されます。

$('foo').animate({width: '250px'});

コールバックは、アニメーションと組み合わせて使用することもできます。

$('bar').animate({height: '250px'}, function(){ $('bar').animate({width: '50px'}});

サーキュレーション

jQueryではループが優れています。 与えられた型の各要素は、Each()で反復処理に使用されます。

$('li').each(function() { c***ole.log($(this));});

インデックスを使用することもできます。

$('li').each(function(i) { c***ole.log(i + ' - ' + $(this));});

これにより、0が表示され、次に1が表示される、というようになります。

また、JSと同様にeach()を使って配列を繰り返し処理することも可能です。

var cars = ['Ford', 'Jaguar', 'Lotus'];$.each(cars, function (i, value){ c***ole.log(value);});

余分なパラメータvalueに注意してください - これは配列の要素の値です。

each()は、バニラJSループよりも遅い場合があることは注目に値します。これは、jQueryの実装による余分な処理のオーバーヘッドによるものです。ほとんどの場合、これは問題ではありません。パフォーマンスが気になる方、大きなデータセットを扱う方は、まずjsPerfを使ったコードのベンチマークをご検討ください。

エイジャックス

非同期JavaScriptとXML、またはAJAXは、jQueryで非常に簡単に使用できます。 AJAXはインターネットに巨大な力を提供しますが、jQueryチュートリアルのパート5でこれを取り上げました。例えば、サッカーのスコアを更新したいだけなのに、ページ全体を再読み込みする理由はありません。jQueryにはいくつかのAJAXメソッドがありますが、最もシンプルなメソッドがload()です。

$('#baz').load('some/url/page.html');

これは、指定されたページ（some/url）/page.html）でAJAXコールを実行し、セレクタにデータを入力します。

に対して、HTTP GET リクエストを実行できます。

$.get('some/url', function(result) { c***ole.log(result);});

データはPOSTで送信することも可能です。

$.post('some/other/url', {'make':'Ford', 'model':'Cortina'});

フォームデータの送信は非常に簡単です。

$.post('url', $('form').serialize(), function(result) { c***ole.log(result);}

この関数は次のような処理を行います。すべてのフォームデータを取得し、送信の準備を行います。

コミットメント

プロミスは実行を遅延させるために使用されます。ecmascript 6ではJSにネイティブなプロミスが導入されましたが、ブラウザのサポートはせいぜいわずかです。現在、jQueryはクロスブラウザ対応でより良い仕事をすることが約束されています。

約束は、ほぼその通りです。コードは、後で終了したときに戻ることを約束します。JavaScriptエンジンは、残りのコードの実行を継続します。プロミスが解決（返却）されると、他のコードを実行することができる。プロミスはキックバックと考えることができます。jQueryのドキュメントで詳しく説明されています。

一例として

// dfd == deferredvar dfd = $.Deferred();function doThing() { $.get('some/slow/url', function() { dfd.resolve(); }); return dfd.promise();}$.when(doThing()).then(function(){ c***ole.log('YAY, it is finished');});

プロミス（dfd.promise()）を行い、AJAXの呼び出しが完了したときだけ解決する方法に注意してください。変数を使用して複数のAJAX呼び出しを追跡し、すべての呼び出しが完了した後にのみ別のタスクを完了することができます。

パフォーマンスに関するヒント

ブラウザのパフォーマンスを圧縮する鍵は、DOMへのアクセスを制限することです。これらのテクニックの多くはJSにも適用可能であり、自分のコードが許容できないほど遅いかどうか分析する必要があるかもしれません。現在の高性能なJavaScriptエンジンの時代では、コードの小さなボトルネックは気づかれないことが多いのです。それでも、可能な限り最速のパフォーマンスを発揮するコードを書くことに挑戦する価値はあります。

DOM内の各操作を検索する代わりに。

$('foo').css('background-color', 'red');$('foo').css('color', 'green');$('foo').css('width', '100px');

オブジェクトを変数に格納する。

$bar = $('foo');$bar.css('background-color', 'red');$bar.css('color', 'green');$bar.css('width', '100px');

血行を最適化する。バニラ・リングを贈る。

var cars = ['Mini', 'Ford', 'Jaguar'];for(int i = 0; i < cars.length; ++i) { // do something}

ループ自体は悪くないのですが、もっと高速に実装できるはずです。各反復ごとに、ループは車の配列の値（車の長さ）を計算する必要があります。特に大きなデータセットを扱う場合は、別の変数に格納した方がパフォーマンスが上がります。

for(int i = 0, j = cars.length; i < j; ++i) { // do something}

これで、車の配列の長さがjに格納され、もはや各反復で計算する必要がなくなりました。each()を使う場合は必要ありませんが、適切に最適化されたvanillajsはjQueryよりも優れている場合があります。ビッグデータを扱わないのであれば、jQueryは通常とても高速です。

これで、jQueryニンジャになるための基礎知識は十分です。

jQueryを常用していますか？また、何らかの理由で使用を中止していますか？