jQuery

jQuery
開発元	jQueryチーム
初版	2006年8月26日 (18年前)
最新版	3.7.1 / 2023年8月28日 (14か月前)
リポジトリ	github.com/jquery/jquery;
プログラミング; 言語	JavaScript
サポート状況	開発中
種別	Webアプリケーションフレームワーク
ライセンス	MIT License
公式サイト	jquery.com
	テンプレートを表示

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

機能・特徴

jQueryには次のような機能・特徴がある。

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

配布

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

ライブラリにリンクする例（同一ホスト・サーバーから）：

<script src="jquery-3.7.1.min.js"></script>

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

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

インタフェース

関数

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

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

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

典型的なスタート方法

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

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

// または

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

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

メソッドチェーン

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

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

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

Ajax

静的メソッドの$.ajax()を用いて非同期通信を実行することができる。$.ajax()の返り値にはPromiseインタフェース^[7]を実装した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の各メソッドに指定されたコールバック関数へ渡していたが、以降削除、動作しない^[8]。

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

採用

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

リリース履歴

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

リリース日付	バージョン番号	備考
2021年3月12日	3.6.0
2020年4月10日	3.5.0
2019年4月10日	3.4.0
2018年1月19日	3.3.0	古い関数の廃止、クラスを受け付ける関数において配列形式にも対応
2017年3月16日	3.2.0	`<template>`要素の内容を取り戻す対応を追加、様々な古いメソッドを廃止
2016年7月7日	3.1.0	Deferredモジュールのエラーハンドリング改善。
2016年6月9日	3.0.0	DeferredのPromises/A+互換化。カスタムセレクタの高速化。Ajax機能を含まない軽量版の提供。ES2015のfor ofループへの対応。requestAnimationFrameへの対応など。
2016年1月14日	3.0.0-beta1	AlphaからBetaに移行。Alpha時点で存在していた、IE8対応のjQuery compatは、Microsoft社によるIEのサポートポリシー変更に伴って開発停止。
2016年5月20日	2.2.4、1.12.4	1系、2系の最終バージョン。
2016年1月8日	2.2.0、1.12.0	1系、2系の機能追加はこのバージョンで終了し、今後はバグの修正のみとなる。パフォーマンスの改善、SVGクラスの操作等の新機能追加。
2014年1月24日	2.1.0、1.11.0
2013年4月18日	2.0.0	Internet Explorer 6, 7, 8 の非サポート,ファイルサイズを12%少なくしたこと等。APIは1.9との互換性を維持している。
2013年1月15日	1.9 FINAL / 2.0 beta	.toggle等の利用頻度の低いAPIの廃止（廃止されたAPIはjQuery Migrate Pluginとして別途提供）
2012年8月9日	1.8	CSSのベンダープレフィックスを自動付加、5つのモジュールに分割、アニメーション処理刷新、Sizzle（セレクター解析エンジン）再構築、XSS対策強化、ソフトウェアライセンスの単一化
2011年11月3日	1.7	.bind(), .delegate(), .live()等の一部APIの統合、新規APIの追加、一部API連携の改善、IEでの不具合／仕様の対応
2011年5月3日	1.6	パフォーマンス改善、.attr(), .val()の拡張、アニメーション処理の改善
2011年1月31日	1.5	Ajax関連モジュールのコード刷新、settingに新規プロパティを追加、Deferredオブジェクト追加、一部APIのパフォーマンス改善
2010年1月14日	1.4	大幅なパフォーマンス／実行速度改善
2009年1月14日	1.3	Sizzle Selector Engine がコアに導入された。
2007年9月10日	1.2
2007年1月14日	1.1
2006年8月26日	1.0	最初の安定版
2006年6月30日	1.0a	α版

脚注・出典

[脚注の使い方]

^ バージョン1.8以降からシングルライセンス化。1.7.2まではMIT LicenseとGNU GPLバージョン2のデュアルライセンス。
^ “jQuery Mobileページの基本構造を理解しよう”. ＠IT. 2012年10月5日閲覧。
^ Resig, John (2009年1月14日). “jQuery 1.3 and the jQuery Foundation”. jQuery Blog. 2009年5月4日閲覧。
^ “Downloading jQuery” (英語). 2024年8月19日閲覧。
^ “jQuery.noConflict()” (英語). 2021年4月26日閲覧。
^ “jQuery Core 3.0 Upgrade Guide #Deprecated: document-ready handlers other than jQuery(function)” (英語). 2021年4月26日閲覧。
^ “Promise”. MDN. Mozilla. 2021年4月26日閲覧。
^ “jQuery Core 3.0 Upgrade Guide #Ajax” (英語). 2021年4月26日閲覧。
^ “Fetch API #jQueryとの違い”. MDN. Mozilla. 2021年4月26日閲覧。
^ Resig, John (2008年9月28日). “jQuery, Microsoft, and Nokia”. jQuery Blog. jQuery. 2009年1月29日閲覧。
^ Guthrie, Scott (2008年9月28日). “jQuery and Microsoft”. ScottGu's Blog. 2009年1月29日閲覧。

参考文献

Chaffer, Jonathon; Karl Swedberg (2007). Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques. Packt Publishing. ISBN 978-1847192509
Bibeault, Bear; Yehuda Katz (2008). jQuery in Action. Manning Publications Co.. ISBN 978-1933988351
Heilmann, Christian (2006). Beginning JavaScript with DOM Scripting and Ajax. Apress. ISBN 978-1590596807 2009年5月4日閲覧。
Darie, Cristian; Filip Chereches-Tosa, Mihai Bucicia (2005). AJAX and PHP: Building Responsive Web Applications. Packt Publishing. ISBN 978-1904811824
Heilmann, Christian; Mark Norman Francis (2007). Web Development Solutions. Apress. ISBN 978-1590598061 2009年5月4日閲覧。
Taft, Darryl K. (2006年8月30日). “jQuery Eases JavaScript, AJAX Development”. eWeek. 2009年5月4日閲覧。
Krill, Paul (2006年8月31日). “JavaScript, .Net developers aided in separate projects”. InfoWorld. 2009年5月4日閲覧。

外部リンク

[1] バージョン1.8以降からシングルライセンス化。1.7.2まではMIT LicenseとGNU GPLバージョン2のデュアルライセンス。

[2] “jQuery Mobileページの基本構造を理解しよう”. ＠IT. 2012年10月5日閲覧。

[3] Resig, John (2009年1月14日). “jQuery 1.3 and the jQuery Foundation”. jQuery Blog. 2009年5月4日閲覧。

[4] “Downloading jQuery” (英語). 2024年8月19日閲覧。

[5] “jQuery.noConflict()” (英語). 2021年4月26日閲覧。

[6] “jQuery Core 3.0 Upgrade Guide #Deprecated: document-ready handlers other than jQuery(function)” (英語). 2021年4月26日閲覧。

[7] “Promise”. MDN. Mozilla. 2021年4月26日閲覧。

[8] “jQuery Core 3.0 Upgrade Guide #Ajax” (英語). 2021年4月26日閲覧。

[9] “Fetch API #jQueryとの違い”. MDN. Mozilla. 2021年4月26日閲覧。

[2008-09-28-10] Resig, John (2008年9月28日). “jQuery, Microsoft, and Nokia”. jQuery Blog. jQuery. 2009年1月29日閲覧。

[11] Guthrie, Scott (2008年9月28日). “jQuery and Microsoft”. ScottGu's Blog. 2009年1月29日閲覧。

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]