トップ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 related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads