トップQs
タイムライン
チャット
視点

JQuery

ブラウザ用のJavaScriptのライブラリ ウィキペディアから

Remove ads

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

概要 開発元, 初版 ...
Remove ads

機能・特徴

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

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

配布

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

ライブラリにリンクする例(同一ホスト・サーバーから):

<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>
Remove ads

インタフェース

要約
視点

関数

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

  • jQuery - メインのjQueryオブジェクト
  • $ - jQueryの別名(エイリアス)

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

典型的なスタート方法

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

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

// または

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

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

メソッドチェーン

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

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

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

Ajax

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

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

採用

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

リリース履歴

要約
視点

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

さらに見る リリース日付, バージョン番号 ...
Remove ads

関連項目

脚注

Loading content...

参考文献

Loading content...

外部リンク

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads