jQuery

jQuery

原作者	ジョン・レシグ
開発者	jQuery チーム
初回リリース	2006年8月26日; 18年前 ( 2006-08-26 )
安定リリース	3.7.1 / (2023年8月28日; 13か月前) [1] ( 2023-08-28 )
プレビューリリース	4.0.0-beta / 2024年2月6日; 7か月前 ( 2024-02-06 )
リポジトリ	jQuery の最新バージョンをダウンロード
書かれた	JavaScript
プラットフォーム	§ブラウザのサポートを参照
サイズ	27～274KB [2]
タイプ	JavaScript ライブラリ
ライセンス	マサチューセッツ工科大学
Webサイト	翻訳元

jQueryは、HTML DOMツリーの走査と操作、イベント処理、CSSアニメーション、Ajaxを簡素化するために設計されたJavaScriptライブラリです。^[3]寛容なMITライセンスを使用した無料のオープンソースソフトウェアです。^[4] 2022年8月現在、jQueryは最も人気のある1,000万のウェブサイトのうち77%で使用されています。^[5] Web分析によると、jQueryは他のどのJavaScriptライブラリよりも少なくとも3～4倍多く使用されており、最も広く導入されているJavaScriptライブラリです。^{[5] [6] [アップデート]}

jQuery の構文は、ドキュメントのナビゲート、DOM要素の選択、アニメーションの作成、イベントの処理、Ajaxアプリケーションの開発を容易にするように設計されています。jQuery は、開発者がJavaScript ライブラリ上にプラグインを作成する機能も提供します。これにより、開発者は低レベルのインタラクションとアニメーション、高度な効果、高レベルのテーマ設定可能なウィジェットの抽象化を作成できます。jQuery ライブラリへのモジュール アプローチにより、強力で動的な Web ページと Web アプリケーション を作成できます。

jQueryのコア機能セット（DOM要素の選択、トラバーサル、操作）は、セレクタエンジン（バージョン1.3から「Sizzle」と名付けられました）によって有効化され、アルゴリズムとDOMデータ構造を融合した新しい「プログラミングスタイル」を生み出しました。このスタイルは、 YUI v3やDojoなどの他のJavaScriptフレームワークのアーキテクチャに影響を与え、後に標準セレクタAPIの作成を刺激しました。^[7]

MicrosoftとNokiaは、それぞれのプラットフォームにjQueryをバンドルしています。^{[8] Microsoftは、} Visual Studio ^[9]にjQueryを組み込み、MicrosoftのASP.NET AJAXおよびASP.NET MVCフレームワーク内で使用しています。一方、Nokiaは、jQueryをWebランタイムウィジェット開発プラットフォームに統合しています。^[10]

jQuery は、本質的には、ドキュメント オブジェクト モデル(DOM) 操作ライブラリです。DOM は、Web ページのすべての要素をツリー構造で表現したものです。jQuery は、これらの DOM 要素を検索、選択、および操作するための構文を簡素化します。たとえば、jQuery を使用すると、ドキュメント内で特定のプロパティを持つ要素 (例: タグを持つすべての要素) を検索したり、その 1 つ以上の属性 (例: 、 )h1を変更したり、イベント (例: マウス クリック) に応答させたりすることができます。 colorvisibility

jQuery は、基本的な DOM 要素の選択と操作を超えたイベント処理のパラダイムも提供します。イベントの割り当てとイベント コールバック関数の定義は、コード内の 1 つの場所で 1 つのステップで実行されます。jQuery は、他のよく使用される JavaScript 機能 (要素を非表示にするときのフェードインとフェードアウト、CSSプロパティの操作によるアニメーションなど) も組み込むことを目指しています。

jQuery を使用した開発の原則は次のとおりです。

• JavaScript と HTML の分離: jQuery ライブラリは、HTML イベント属性を追加して JavaScript 関数を呼び出すのではなく、JavaScript を使用してDOMにイベントハンドラーを追加するためのシンプルな構文を提供します。そのため、開発者はJavaScript コードを HTML マークアップから完全に分離することが推奨されます。
• 簡潔さと明瞭さ: jQuery は、「チェーン可能な」関数や省略形関数名などの機能によって簡潔さと明瞭さを促進します。
• ブラウザ間の非互換性の解消: ブラウザによって JavaScript エンジンが若干異なるため、あるブラウザで機能する JavaScript コードが別のブラウザでは機能しない場合があります。他の JavaScript ツールキットと同様に、jQuery はブラウザ間のこうした非一貫性をすべて処理し、さまざまなブラウザで機能する一貫したインターフェイスを提供します。
• 拡張性: 新しいイベント、要素、メソッドを簡単に追加し、プラグインとして再利用できます。

jQueryはもともと、2006年1月にBarCamp NYCでジョン・レジグによって、ディーン・エドワーズの初期のcssQueryライブラリの影響を受けながら作成されました。^{[11] [12]}現在はティミー・ウィリソンが率いる開発者チームによってメンテナンスされています（jQueryセレクタエンジンであるSizzleはリチャード・ギブソンが率いています）。^[13]

jQueryはもともとCC BY-SA 2.5ライセンスでしたが、2006年にMITライセンスに再ライセンスされました。 ^[14] 2006年末には、GPLとMITライセンスのデュアルライセンスになりました。 ^[15]これにより混乱が生じたため、2012年にGPLは廃止され、現在はMITライセンスのみとなっています。^[16]

• 2015年には、jQueryは上位100万のウェブサイトのうち62.7%（BuiltWithによる）で使用され、インターネットウェブサイト全体の17%で使用されました。^[17]
• 2017年には、jQueryは上位100万のウェブサイトのうち69.2%で使用されていました（Libscoreによる）。^[6]
• 2018年には、上位100万のウェブサイトのうち78%でjQueryが使用されていました。^[18]
• 2019年には、jQueryは上位100万のウェブサイトの80%（BuiltWithによる）^[18]、上位1000万のウェブサイトの74.1%（W3Techsによる）で使用されていました。^[5]
• 2021年には、jQueryは上位1000万のウェブサイトのうち77.8%で使用されていました（W3Techsによる）。^[19]

jQuery には次の機能が含まれています。

• jQueryプロジェクトから派生したマルチブラウザオープンソースセレクタエンジンSizzleを使用したDOM要素選択^[20]
• 要素の名前と属性（IDやクラスなど）を基準としてDOM内のノードを選択するCSSセレクタに基づくDOM操作
• イベント
• エフェクトとアニメーション
• アヤックス
• 非同期処理を制御するためのDeferred および Promiseオブジェクト
• JSON解析
• プラグインによる拡張性
• 機能検出などのユーティリティ
• 最新のブラウザではネイティブに使用できるが、 や などの古いブラウザではフォールバックが必要な互換性jQuery.inArray()メソッドjQuery.each()。
• クロスブラウザサポート

jQuery 3.0以降は、Firefox（およびESR）、Chrome、Safari、Edge 、およびInternet Explorer 9以降の「現在の-1バージョン」（ブラウザの現在の安定バージョンとその前のバージョンを意味する）をサポートしています。モバイルでは、iOS 7以降、Android 4.0以降をサポートしています。^[21]

jQueryライブラリは通常、DOM、イベント、Ajax関数など、すべてのインターフェースを定義する単一のJavaScriptファイルとして配布されます。ローカルコピーにリンクするか、パブリックサーバーから入手できる多数のコピーの1つにリンクすることで、Webページに含めることができます。jQueryには、MaxCDNによってホストされているコンテンツ配信ネットワーク（CDN）があります。^[22] GoogleはGoogle Hosted Librariesサービスで、Microsoftもライブラリをホストしています。^{[23] [24]}

ライブラリのコピーをローカルにリンクする例 (Web ページをホストしている同じサーバーから):

<スクリプト src = "jquery-3.5.1.min.js" ></スクリプト>

jQuery のパブリック CDN からライブラリのコピーをリンクする例:

<スクリプト
  src = "https://code.jquery.com/jquery-3.5.1.min.js"
  整合性= "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
  crossorigin = "匿名" ></スクリプト>

jQuery は、静的ユーティリティ関数と jQueryオブジェクト メソッドの 2 種類の関数を提供します。それぞれ独自の使用スタイルがあります。

どちらもjQueryのメイン識別子を介してアクセスされます: jQuery。この識別子には という別名があります$。^[25]すべての関数は、これら2つの名前のいずれかを介してアクセスできます。

この関数は、1 つ以上の DOM ノードを表す jQuery オブジェクトを作成するためのファクトリjQueryです。jQuery オブジェクトには、これらのノードを操作するメソッドがあります。これらのメソッド (コマンドと呼ばれることもあります)は、各メソッドも jQuery オブジェクトを返すため、 連鎖可能です。

jQuery で複数の DOM ノードにアクセスして操作するには、通常、$CSS セレクタ文字列を使用して 関数を呼び出すことから始まります。これにより、 HTMLページ内の一致するすべての要素を参照する jQuery オブジェクトが返されます。$("div.test")たとえば、 は、divクラス を持つすべての要素を含む jQuery オブジェクトを返しますtest。このノード セットは、返された jQuery オブジェクトのメソッドを呼び出すことによって操作できます。

これらはユーティリティ関数であり、jQuery オブジェクトに直接作用するものではありません。これらは、jQuery または $ 識別子の静的メソッドとしてアクセスされます。たとえば、$.ajax()は静的メソッドです。

jQuery は$.noConflict()、名前の制御を放棄する関数を提供します$。これは、シンボルを識別子として要求する別のライブラリもリンクする Web ページで jQuery が使用されている場合に便利です $。競合なしモードでは、開発者は機能性を失うことなくjQueryを の代わりとして使用できます$。^[26]

通常、jQuery は、初期化コードとイベント処理関数を に配置することによって使用されます。これは、ブラウザが現在の Web ページの DOM の構築を完了したときに jQuery によってトリガーされます。 $(handler)

$ ( function () { // この匿名関数は、ページの読み込みが完了したときに呼び出されます。// ここで、jQuery オブジェクトの作成、イベントの処理などを行うコードを配置できます。 });  
        
        

または

$ ( fn ); // 他の場所で定義された fn という名前の関数は、ページが読み込まれたときに呼び出されます。 

歴史的には、$(document).ready(callback)DOMの準備ができた後にコードを実行するための事実上の慣用句でした。しかし、jQuery 3.0以降、開発者は$(handler)代わりにはるかに短いシグネチャを使用することが推奨されています。^[27]

jQuery オブジェクト メソッドは通常、メソッド チェーンの使用を可能にする jQuery オブジェクトも返します。

$ ( 'div.test' ) 
. on ( 'click' , handleTestClick ) . addClass ( 'foo' );   
  

この行は、クラス属性を持つすべてのdiv 要素を検索し、各要素に「クリック」イベントのイベント ハンドラーを登録し、各要素に testクラス属性を追加します。foo

特定の jQuery オブジェクト メソッドは、状態を変更するのではなく、特定の値を取得します。この例としては、テキスト入力val()要素の現在の値を返す メソッドがあります。このような場合、戻り値が jQuery オブジェクトを参照しないため、 などのステートメントは連鎖に使用できません。$('#user-email').val()

jQuery を通じて既存の DOM ノードにアクセスするだけでなく、引数としてファクトリに渡される文字列が$()HTML のように見える場合は、新しい DOM ノードを作成することもできます。たとえば、以下のコードは HTMLselect要素を見つけ、option値VAGとラベルを持つ新しい要素を作成しVolkswagen、それを選択メニューに追加します。

$ ( 'select#car-brands' ) 
. append ( $ ( '<option>' ) . prop ( value , "VAG" ) . text ( 'Volkswagen' ) );  
    
    
  

リモート データをロードおよび操作するため に、 Ajaxリクエスト (クロス ブラウザーサポート付き)を行うことができます。$.ajax()

$ .ajax ({ type : 'POST' , url : '/process/submit.php' , data : { name : ' John' , location : 'Boston' , }, }). then ( function ( msg ) { alert ( 'データが保存されました: ' + msg ); }). catch ( function ( xmlHttpRequest , statusText , errorThrown ) { alert ( 'フォームの送信に失敗しました。\n\n' + 'XML HTTP リクエスト: ' + JSON .stringify ( xmlHttpRequest ) + ' , \ nステータステキスト: ' + statusText + ',\nエラーが発生しています: ' + errorThrown ); });
   
   
   
      
      
  
 
    
   
  
    
         
         
         

この例では、データをサーバーに投稿します。name=Johnこのリクエストが完了すると、成功関数が呼び出され、ユーザーに通知されます。リクエストが失敗した場合は、失敗、リクエストのステータス、および特定のエラーがユーザーに通知されます。 location=Boston/process/submit.php

上記の例では、 .then()およびメソッドを.catch()使用して、応答が完了したときに実行されるコールバックを登録しています。Ajaxリクエストの非同期性のため、これらのpromise コールバックを使用する必要があります。

jQueryのアーキテクチャにより、開発者はプラグインコードを作成して機能を拡張することができます。Web上では、 Ajaxヘルパー、 Webサービス、データグリッド、動的リスト、XMLおよびXSLTツール、ドラッグアンドドロップ、イベント、Cookie処理、モーダルウィンドウなど、さまざまな機能をカバーする何千ものjQueryプラグインが利用可能です^[ 28] 。

jQuery プラグインの重要なソースは、jQuery プロジェクトのウェブサイトのプラグイン サブドメインです。^[28]ただし、このサブドメインのプラグインは、サイトからスパムを排除する試みの一環として、2011 年 12 月に誤って削除されました。^[29]新しいサイトはGitHubでホストされているリポジトリであり、開発者はプラグインを再送信し、新しい送信要件に準拠する必要がありました。 [30] jQuery は、ユーザーが JavaScript を理解し、jQuery プラグインの開発を開始できるようにするための「学習センター」を提供しています。^{[ 31]}

QUnitはjQueryプロジェクトのテストに使用されるテスト自動化フレームワークです。jQueryチームはこれを社内のユニットテストライブラリとして開発しました。^[54] jQueryチームはこれをコードとプラグインのテストに使用していますが、サーバーサイドJavaScriptコードを含むあらゆる汎用JavaScriptコードをテストできます。^[54]

2011年現在^[update]、jQueryテストチームはQUnitとTestSwarmを使用して各jQueryコードベースのリリースをテストしています。^[55]

HTML ドキュメントのトラバーサル、アニメーション、イベント処理などのタスクを簡素化する、頼りになる jQuery JavaScript ライブラリは、Web 開発の様相を一変させました。Web^[update]技術調査会社 W3Techs によると、2019 年 5 月の時点で、jQuery は既知の Web サイトの 74% で依然として使用されています。とはいえ、2006 年 8 月にデビューした jQuery ライブラリは、一部の開発者からは時代遅れの技術とみなされるようになっています。近年では、Cash ライブラリや最新の標準 JavaScript など、jQuery の代替手段が登場しており、今ではすべての Web ブラウザーが JavaScript を同じように処理し、互換性の問題を解決するために jQuery は不要になっています。Reddit での議論や YouTube の動画では、jQuery は時代遅れになった、または少なくとも以前ほど重要ではなくなったと主張しています。

— ポール・クリル、インフォワールド（2019）^[56]

クロスブラウザの互換性はもはやそれほど問題ではなくなったため、jQueryのほとんどは、利便性をあまり損なうことなく、最新のWeb標準に置き換えることができます。 ^[57]このこともあって、GitHubは2018年にjQueryをページから削除しました。^[58]

• JavaScript ベースの Web フレームワークの比較
• jQueryモバイル
• jQueryUI の
• ウェブフレームワーク
• JavaScript ライブラリ

• John Resig (講演者) (2007 年 4 月 13 日)。John Resig: Advancing JavaScript with Libraries (YouTube ビデオ)。YUI シアター。2018年1 月 9 日閲覧。
• Krill, Paul (2006 年 8 月 31 日)。「JavaScript、.Net 開発者が別個のプロジェクトで支援」。InfoWorld。2019年4 月 15 日閲覧。
• Taft, Darryl K. (2006 年 8 月 30 日)。「jQuery で JavaScript と AJAX 開発が簡単に」。eWeek。2019年4 月 15 日閲覧。

Wikimedia Commons にはJQueryに関連するメディアがあります。

• 公式サイト