+JQuery

jQuery
開発元	jQueryチーム
初版	2006年8月26日（14年前）
最新版	3.6.0 / 2021年3月2日（27日前）
リポジトリ	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 プラグイン

$関数[編集]

jQueryのコードで重要なコンセプトの1つは、いわゆる '$' 関数である。'$' は実際には 'jQuery' 名前空間での別名 (alias) である。

例 1: jQuery は文字列のトリミングのための関数を提供している。この関数は次のように使用できる。

str = "    foo     ";
jQuery.trim(str); // "foo" を返す

あるいは、次のように使うこともできる。

str = "    foo     ";
$.trim(str);

これらは等価である。'$' を 'jQuery' の代わりに使うことはアドホックな規約であり、jQueryライブラリへの手っ取り早いアクセス方法と見なすことができる。

例 2: クラス 'foo' を持つ全てのパラグラフを選択し、別のクラス 'bar' をそれら全てに追加する。

$("p.foo").addClass("bar");

例 3: ページのDOM木が構築された直後に関数 'myfunc' を実行する（jQueryの用語では ready handler と呼ぶ）。

$(function() {
    myfunc();
});

これは例えば次のような形で使用する。

$(function() {
  // CSSクラス oddStripe と evenStripe を使って文書内の全テーブルをストライプにする。
  $('tr:odd').addClass("oddStripe");
  $('tr:even').addClass("evenStripe");
});

ロード方法[編集]

jQueryは通常単一のJavaScriptファイルとして存在し、その中に全ての共通DOM、イベント、エフェクト、Ajax関数が含まれている。次のようなマークアップを使って、任意のWebページにこれを含めることができる。

<script type="text/javascript" src="/path/to/jQuery.js"></script>

jQueryの最新安定版は、Google、Microsoft、EdgeCastなどの運用するCDNを使ってロードすることもできる。この方法では、Web上での広汎な利用におけるレイテンシの改善といったCDNの利点を享受でき、自身でコピーをホストする必要も無くなる。

CDNからのロード方法は次のように、単にCDN上のURLを指定すればよい。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

また、Google AJAX Libraries APIでは次のような記述も利用できる^[4]。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.8");</script>

使用法[編集]

jQueryには2種類のインタラクションがある。

jQueryオブジェクトのファクトリメソッドである $ 関数を使う。これらの関数は「コマンド」とも呼ばれ、連鎖可能であり、それぞれがjQueryオブジェクトを返す。
$.をプレフィックスとする関数を使う。これらは「ユーティリティ関数」であり、本来jQueryオブジェクト上で動作しない。

複数のDOMノードの操作をする典型的ワークフローは、まず $ 関数をCSSセレクタ文字列を伴って呼び出し、HTMLページ内の0個以上のエレメントを参照するjQueryオブジェクトを返す。このノード群はjQueryオブジェクトまたはノード群自体にインスタンスメソッドを適用することで操作できる。例えば、

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

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

$.が前置されたメソッドは簡便なメソッドだったり、グローバルな属性や振る舞いに影響を与える。例えば、次の例はjQueryにおける高階関数であるeachを使っている。

$.each([1,2,3], function() {
  document.write(this + 1);
});

この場合、文書に 234 を書く。

$.ajaxとリモートデータのロードと操作に対応するメソッドを使ってAjaxルーチンを実行することもできる。

$.ajax({
  type: "POST",
  url: "some.php",
  data: {name: "John", location: "Boston"},
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

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

採用[編集]

マイクロソフトとノキアはそれぞれ自社プラットフォームへのjQueryバンドルを計画していると発表した^[5]。マイクロソフトは手始めに Visual Studio で採用^[6]、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日閲覧。
^ デベロッパーガイド AJAX Libraries API、Google
^ 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日閲覧。
John Resig (speaker) (Yahoo! Video). Advancing JavaScript with Libraries (Part 1). YUI Theater. 2009年5月4日閲覧。
John Resig (speaker) (Yahoo! Video). Advancing JavaScript with Libraries (Part 2). YUI Theater. 2009年5月4日閲覧。

外部リンク[編集]

公式ウェブサイト
- 日本語訳（あしたのオープンソース研究所）
jQuery Mailing List
Quick Reference Api
Simplify Ajax development with jQuery
Dmitri Gaskin (speaker) (YouTube). jQuery. Google Tech Talks. 2009年5月4日閲覧。
OOP in jQuery: jQueryでオブジェクト指向プログラミングをする際の問題点といくつかの対処法について
jQuery for JavaServer Faces: jQueryベースのオープンソースのライブラリ

[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] デベロッパーガイド AJAX Libraries API、Google

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

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

[1]

[2]

[3]

[4]

[5]

[6]

detail

目次