jQuery

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動先: 案内検索
jQuery
開発元 jQueryチーム
初版 2006年8月26日(11年前) (2006-08-26
最新版 1.12.4 (2016年5月20日(20か月前) (2016-05-20) /
2.2.4 (2016年5月20日(20か月前) (2016-05-20) /
3.2.1 (2017年3月20日(10か月前) (2017-03-20)
リポジトリ github.com/jquery/jquery
プログラミング言語 JavaScript
サポート状況 開発中
種別 Webアプリケーションフレームワーク
ライセンス MIT License[1]
公式サイト 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関数は一致する集合を決め、addClassslideDownは参照しているノード群に作用する。

$.が前置されたメソッドは簡便なメソッドだったり、グローバルな属性や振る舞いに影響を与える。例えば、次の例は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 プラットフォームに組み込む予定である。

RubyのフレームワークRuby on Railsは、デフォルトのJavaScriptライブラリとしてPrototype JavaScript Frameworkを採用していたが、3.1のバージョンからjQueryを標準のJavaScriptライブラリとして採用している[7][8]

リリース履歴[編集]

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

リリース日付 バージョン番号 備考
2017年3月16日 3.2.0
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年1月8日 2.2.0、1.12.0 1系、2系の機能追加はこのバージョンで終了し、今後はバグの修正のみとなる。パフォーマンスの改善、SVGクラスの操作等の新機能追加。
2014年1月24日 2.1.0、1.11.0
2013年5月24日 2.0.1、1.10.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.0 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. ^ バージョン1.8以降からシングルライセンス化。1.7.2まではMIT LicenseGNU 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
  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日閲覧。
  7. ^ Ruby on Rails 3.1 Release Notes”. Ruby on Rails Guides. 2013年1月21日閲覧。
  8. ^ ついにRails 3.1がリリース、体感速度が速くなる!?”. Rails Hub情報局. 2011年9月1日閲覧。

参考文献[編集]

外部リンク[編集]