jQuery

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動: 案内検索
jQuery
開発元 jQueryチーム
初版 2006年08月26日(7年前) (2006-08-26
最新版 2.1.1, 1.11.1 / 2014年05月1日(2か月前) (2014-05-01, 2014年05月1日(2か月前) (2014-05-01
プログラミング言語 JavaScript
サポート状況 開発中
種別 Webアプリケーションフレームワーク
ライセンス MIT License[1]
公式サイト jquery.com
テンプレートを表示

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[2]

機能・特徴[編集]

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]

リリース履歴[編集]

リリース日付 バージョン番号 備考
2014年5月1日 2.1.1、1.11.1 Bug fix
2014年1月24日 2.1.0、1.11.0
2013年7月3日 2.0.3、1.10.2
2013年5月30日 2.0.2、1.10.1
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年2月4日 1.9.1
2013年1月15日 1.9 FINAL / 2.0 beta .toggle等の利用頻度の低いAPIの廃止(廃止されたAPIはjQuery Migrate Pluginとして別途提供)
2012年11月13日 1.8.3
2012年9月20日 1.8.2
2012年8月30日 1.8.1
2012年8月9日 1.8 CSSのベンダープレフィックスを自動付加、5つのモジュールに分割、アニメーション処理刷新、Sizzle(セレクター解析エンジン)再構築、XSS対策強化、ソフトウェアライセンスの単一化
2012年3月21日 1.7.2
2011年11月21日 1.7.1
2011年11月3日 1.7 .bind(), .delegate(), .live()等の一部APIの統合、新規APIの追加、一部API連携の改善、IEでの不具合/仕様の対応
2011年9月12日 1.6.4
2011年9月1日 1.6.3
2011年6月30日 1.6.2
2011年5月12日 1.6.1
2011年5月3日 1.6 パフォーマンス改善、.attr(), .val()の拡張、アニメーション処理の改善
2011年3月31日 1.5.2
2011年2月23日 1.5.1
2011年1月31日 1.5.0 Ajax関連モジュールのコード刷新、settingに新規プロパティを追加、Deferredオブジェクト追加、一部APIのパフォーマンス改善
2010年11月11日 1.4.4
2010年10月14日 1.4.3
2010年2月19日 1.4.2
2010年1月25日 1.4.1
2010年1月14日 1.4 大幅なパフォーマンス/実行速度改善
2009年2月20日 1.3.2
2009年1月21日 1.3.1
2009年1月14日 1.3 Sizzle Selector Engine がコアに導入された。
2008年5月24日 1.2.6
2008年5月21日 1.2.5 1.2.4 でのビルドミスを修正
2008年5月19日 1.2.4
2008年2月8日 1.2.3
2008年1月15日 1.2.2
2007年9月16日 1.2.1
2007年9月10日 1.2
2007年8月24日 1.1.4
2007年7月5日 1.1.3.1
2007年7月1日 1.1.3
2007年5月20日 1.1.3a α版
2007年2月27日 1.1.2
2007年1月22日 1.1.1
2007年1月14日 1.1
2007年1月8日 1.1a α版
2006年12月12日 1.0.4 1.0 の最後のバグフィックス
2006年10月27日 1.0.3
2006年10月9日 1.0.2
2006年8月31日 1.0.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日閲覧。

参考文献[編集]

外部リンク[編集]