JQuery

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。

機能・特徴 
jQueryには次のような機能・特徴がある。
 ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択（Sizzle は jQuery プロジェクトからスピンアウト）
 DOM操作と変更（CSS 1-3 と基本的なXPathのサポートを含む）
 イベント
 CSS操作
 エフェクトとアニメーション
 Ajax
 ユーティリティ - ブラウザのバージョン取得、each関数など
 プラグインによる拡張性

配布 
通常jQueryは単一のJavaScriptファイルとして存在している。このほかパッケージ管理システム（npm、Yarn、Bower）やコンテンツデリバリネットワーク（CDN）（Google、マイクロソフトなど）で配信されている。

ライブラリにリンクする例（同一ホスト・サーバーから）：
<script src="jquery.js"></script>

公式のパブリックCDN、を利用する例：

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

インタフェース

関数 
jQueryは、静的メソッドとjQueryオブジェクトメソッドの2種類あり、それぞれに独自の使用スタイルがある。

 jQuery - メインのjQueryオブジェクト
 $ - jQueryの別名（エイリアス）

なおjQueryによって再代入された$変数は、jQuery.noConflict()を記載した行以降、放棄される。これにより他のライブラリなどで宣言されていた$変数を復帰することができる。

典型的なスタート方法 
jQueryをスタートするには次の方法が推奨されている。

function example() {
	// 定義された関数による任意のコード
}
$(example);

// または

$(function () {
	// 無名関数による任意のコード
});

HTMLの解析を終えると、$()メソッドで指定された関数をコールバックし、DOM操作などを安全にスタートさせる。同じ働きをしていたレディイベント$(document).on('ready', callback)は古典的な方法で、jQuery 3.0以降削除されて、動作しない。

メソッドチェーン 
$()メソッドは基本的にjQueryオブジェクトが返る為、次のようにメソッドをつなげていくことが可能である。

$('div.test').add('p.quote').addClass('blue').slideDown('slow');

このコードは、divタグのクラス属性がtestのものとpタグのクラス属性がquoteのもの全てについて、クラス属性blueを追加し、それらをアニメーション付きでスライドダウンさせる。$()変数およびadd()関数は一致する集合を決め、addClass()とslideDown()は参照しているノード群に作用する。

Ajax 
静的メソッドの$.ajax()を用いて非同期通信を実行することができる。$.ajax()の返り値にはPromiseインタフェースを実装したDeferredオブジェクトが返るため、then()メソッドを用いて要求した結果を受けとる必要がある。

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

このコードは/process/submit.phpにパラメータ name=John&location=Boston をつけて要求し、その要求が正常に完了したとき、レスポンスを表示する。

jQuery 3.0以前では結果を受けとる際にsuccess、error、completeの各メソッドに指定されたコールバック関数へ渡していたが、以降削除、動作しない。

Fetch APIと似た文法であるが、jQueryではXMLHttpRequestオブジェクトを利用している為、返されるオブジェクトや、HTTPステータスコードが404でもエラーとは見なさないなど取り扱いが少し異なる。

採用 
マイクロソフトとノキアはそれぞれ自社プラットフォームへのjQueryバンドルを計画していると発表した。マイクロソフトは手始めに Visual Studio で採用、ASP.NET開発チームをフルタイムでjQueryの開発に参加のうえ、jQueryを同社のASP.NETにおけるクライアント・サイド・スクリプティングの標準として採用し、同社が開発していた類似技術を全て廃止すると発表、ASP.NET AJAX および ASP.NET MVC Framework で利用する。一方ノキアは同社の Web Runtime プラットフォームに組み込む予定である。

リリース履歴 
主なリリースを示す。下に行くほど古いバージョンを示している。

関連項目 
 Ajax
 AngularJS
 Backbone.js
 KnockoutJS
 MooTools
 MontageJS
 Prototype JavaScript Framework
 Raphael (JavaScriptライブラリ)
 Vue.js
 WinJS

脚注・出典

参考文献

外部リンク 
 
 

JavaScriptライブラリ
2006年のソフトウェア
ウェブ開発