jQuery(ジェイクエリー)とは、軽量JavaScriptライブラリです。Webページに少ないコード量でリッチ表現を組み込めます。

オープンソースのフレームワーク/jQueryとは

jQuery(ジェイクエリー)とは、軽量JavaScriptライブラリです。Webページに少ないコード量でリッチ表現を組み込めます。

目次

「jQuery」基本情報
■概要
■基本説明
・(参考)「JavaScript」とは
・「jQuery」とは
■経緯
・jQuery登場前
・jQuery登場
■採用事例

主な特徴
■リッチUIを実装
・概要
・リッチ実装例
・操作対象「セレクタ」
・処理内容「メソッド」
・実行タイミング「イベント」
■少ないコード量で記述できる
・Ajax
・jQuery API
■JavaScript言語拡張を行わない
■軽量フットプリント
■クロスブラウザコンテンツ
・サポート対象ブラウザ
・ブラウザ固有コードについて
■オフィシャルドキュメント

jQuery公式プラグイン
■キュレーションセット「jQuery UI」
・概要
・オフィシャルサイト
■モバイル用UI「jQuery Mobile」
・概要
・オフィシャルサイト
■CSSセレクタエンジン「Sizzle」
・概要
・オフィシャルサイト
■ユニットテストフレームワーク「QUnit」
・概要
・オフィシャルサイト
■その他外部プラグイン
・概要
・オフィシャルサイト

補足情報
■同様製品
■オフィシャルサイト
・オフィシャルサイト
・ライセンス情報
・ダウンロード

「jQuery」基本情報

■概要

jQuery(ジェイクエリー)とは、軽量JavaScriptライブラリです。Webページに少ないコード量でリッチ表現を組み込めます。

■基本説明

(参考)「JavaScript」とは

JavaScriptとは、プロトタイプベースのオブジェクト指向スクリプト言語です。

主に、アプリケーション開発/Webブラウザ実装などに使用されており、多くのプログラマーが利用しているプログラミング言語です。

「jQuery」とは

jQueryは、JavaScriptのようなプログラミング言語ではなく、JavaScript用ライブラリ(プログラム集合体)です。jQueryの中身はJavaScriptで構成されたプログラムです。

jQueryは、Webブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webページに「イベント処理」「アニメーション」「Ajax」などの機能を簡単に追加できます。

jQueryは、Webブラウザでの動作をターゲットとして設計されているため、JavaScriptでの実装と比較して、より快適かつ動的に、WebページにリッチUIを埋め込めます。jQuery内にある機能を呼び出すことにより、複雑な動作でも簡単に実装できます。

■経緯

・2006年、初版リリース---John Resig氏によって開発/公開

jQuery登場前

jQuery登場前は、Webページでリッチ表現を行うためには数十行も記述する必要がありました。

また、各ブラウザで仕様/動作が異なるため、開発者は常にブラウザ互換についても考えながらコードを書く必要がありました。

jQuery登場

jQueryは、比較的に後発に登場したJavaScript用ライブラリですが、それまでの手間を大幅に削減できる有用性により、「Web開発革命」「JavaScriptライブラリのデファクトスタンダード」と言われるほどの人気を得ました。

■採用事例

jQueryは、多くの世界的企業/コミュニティが支持しています。
・Microsoft---「Visual Studio」ツールに採用
・IBM
・Amazon
・Dell
・Twitter

Ruby用開発フレームワーク「Ruby on Rails」は、バージョン3.1から、標準JavaScriptライブラリとしてjQueryを採用しています。

主な特徴

■リッチUIを実装

概要

jQueryを使用すると、HTMLやCSSでは実現できないような、Webページに動きをつけるリッチUIを実装できます。

CSSでも簡単なアニメーションを作成できますが、レイアウト用の仕組みであるため複雑な機能を実装するのは難しい面があります。

jQueryはリッチUIを実装するために設計されているため、簡単なコーディングで実装できます。

リッチ実装例

jQueryを利用することで、各種効果/アニメーション/ユーザーインターフェース要素など、次のようなリッチUIを実装できます。
・時間によってページの色を変更
・クリックによる画像入れ替え
・フォームの中の要素を動的に変更
・ユーザー動作によりCSSを変更してレイアウトを変える
・マウスオーバーによるアニメーション効果
・スクロール量による見た目の変更
・テキストボックスの色を変更 など

操作対象「セレクタ」

「セレクタ」とは「操作対象」を指します。

例えば、色を変更したい場合に「どの部分の色を変えるか?」について指定します。複数指定も可能で、基本的にCSSにおけるセレクタと同様の概念です。

セレクタ対象として以下のようなものを選択できます。
・idセレクタ
・classセレクタ
・要素セレクタ
・子孫セレクタ など

「CSS3セレクタ」をサポートしており、スタイルプロパティの操作だけでなく、要素の検索も行えます。

処理内容「メソッド」

次に、「メソッド」として処理内容を記述します。

セレクタに対して「.(ドット)」で接続してメソッド指定を繰り返すことにより、数珠つなぎで処理を記述できます。UNIXシェルで連続して処理を行なうパイプ処理と同様の記述を行えます。

jQueryでは、「セレクタ」と「メソッド」により、「何をどうするか」という形でコードを記述します。

実行タイミング「イベント」

実行タイミング選択を「イベント」と呼びます。

イベントにはさまざまな種類が用意されています。
・クリックイベント
・マウスオーバーイベント
・マウスアウトイベント など

設定したイベントが発生すると、セレクタに対するメソッドが実行されます。

■少ないコード量で記述できる

jQueryを利用すると、JavaScriptでは数十行かかる処理を1つの命令文のみで実行できます。jQueryのロゴに「write less, do more」と表記されている通りに、少ないコード量でリッチなUIを実現できます。

主なメリット
・プログラミングに精通していなくても利用しやすい
・全体的なコード量が激減するため効率的 など

Ajax

jQueryの功績とされるものとして「Ajaxを簡潔かつ容易に記述できる」という点があります。

Ajaxとは「Asynchronous Javascript+XML」の略称です。JavaScript組み込みクラス「XMLHttpRequest」を利用した非同期通信を利用することで、Webブラウザ上で既存の枠組みにとらわれないインターフェースを実現するための技術です。

以前は「ページ遷移を行わずにサーバとクライアント間の通信を行う」処理のためには複雑なコーディングが必要でしたが、jQueryにより簡単に実装できるようになりました。

それに伴い、SPA(シングルページアプリケーション)構築も容易になっています。

jQuery API

jQueryには豊富なAPIが用意されています。

→jQuery →jQuery API

■JavaScript言語拡張を行わない

jQueryはJavaScriptに対する独自言語拡張を行っていないため、他のJavaScriptライブラリで発生しがちな思わぬ誤動作の発生を抑止できます。

■軽量フットプリント

jQuery本体はコンパクトサイズ(30KB程度)であるため軽快に動作します。

■クロスブラウザコンテンツ

jQueryは、各ブラウザが提供しているDOM(Document Object Model)などのAPIを1つのメソッドにまとめることで、ブラウザ間の差異を吸収し、クロスブラウザコンテンツを実現できます。

サポートしているブラウザであれば「どのブラウザでも」「どのPC/タブレット/スマートフォン」でも同様に動作します。
※一部最適化が必要な場合もあります。

サポート対象ブラウザ

jQueryは以下のブラウザをサポートしています。

デスクトップ
・Chrome
・Edge
・Firefox
・Internet Explorer
・Safari
・Opera

モバイル
・Android---ブラウザ
・iOS---Safari

→jQuery →Browser Support

ブラウザ固有コードについて

jQueryを使用しているWebページにおいてブラウザ固有の動作を利用するコードがある場合、他のブラウザでは動作しない可能性があります。

「ブラウザを完全にサポートするためにはテストが不可欠」とされています。

■オフィシャルドキュメント

オフィシャルサイトでは、初めてjQueryに接するユーザー用のチュートリアルドキュメントとして「ラーニングセンター」が用意されています。

jQueryを使用してWebサイトやアプリケーションを構築する方法として、「基本的説明」「一般的な問題の回避策」「ベストプラクティス」などについて理解を深めることができます。

→jQuery →Learning Center

jQuery公式プラグイン

jQueryには、jQuery本体「jQuery Core」の他に、jQuery公式プラグインが用意されています。

■キュレーションセット「jQuery UI」

概要

「jQuery UI」は、ユーザーインターフェースの「インタラクション」「エフェクト」「ウィジェット」「テーマ」などのキュレーションセットです。jQuery JavaScript Libraryの上に構築されています。

相互作用や相互効果などについて効果的に動作するように設計されています。

オフィシャルサイト

→jQuery UI

■モバイル用UI「jQuery Mobile」

概要

「jQuery Mobile」は、特にスマートフォン/タブレットなどのモバイルデバイスで、応答性の高いWebサイト(Webアプリケーション)を作成するために設計されたHTML5ベースのユーザーインターフェースシステムです。

タッチ操作に最適化されたWebページを作成できます。

オフィシャルサイト

→jQuery Mobile

■CSSセレクタエンジン「Sizzle」

概要

「Sizzle」は、ホストライブラリに簡単にドロップできるように設計されたJavaScriptのCSSセレクタエンジンです。

ライブラリに依存しないスタンドアロン動作が可能で、イベント委任で最適なパフォーマンスが得られるように設計されています。

オフィシャルサイト

→Sizzle(Sizzle JavaScript Selector Library)

■ユニットテストフレームワーク「QUnit」

概要

「QUnit」は、パワフルで使いやすいJavaScriptユニットテストフレームワークです。

「jQuery」「jQuery UI」「jQuery Mobile」の各プロジェクトで使用されており、ジェネリックJavaScriptコードをテストできます。

オフィシャルサイト

→QUnit

■その他外部プラグイン

概要

上記公式プラグインの他に、豊富な外部プラグインを利用できます。

オフィシャルサイト

→jQuery →The jQuery Plugin Registry

補足情報

■同様製品

同様な機能を提供する製品として、次のようなものがあります。

オープンソース製品:「React」「Vue.js」「Dojo Toolkit」など。

■オフィシャルサイト

オフィシャルサイト

→jQuery

ライセンス情報

jQueryのライセンスは「MIT License」です。

詳細について、こちらを参照ください。
→jQuery →License

ダウンロード

→jQuery →Downloading jQuery

 

参考元サイト

※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

jQuery最新TOPICS

【OSS】JavaScriptライブラリ「jQuery 3.3」リリース---jQueryテストをコマンドライン上で実行可能に、クラス操作メソッドが配列を引数として受け付け(2018年01月23日 20:03)

jQuery Foundationは、1月19日、 JavaScriptライブラリ「jQuery 3.3」を公開した。 【jQueryとは】 軽量JavaScriptライブラリ https://www.ossnews.jp/oss_info/jQuery 【3.3のポイント】 ・新しい機能を追加するよりも不要なものを削除することにフォーカス ・jQueryテストをコマンドライ...

jQuery最新CLOSEUPコラム

無料資料プレゼント

第2回「多要素認証の種類と方法」

講演資料を見るには、 プライバシーポリシーに同意して、送付先メールアドレスをご入力しご請求ください。

またご入力いただきました情報は、当該資料の作成・提供企業とも共有させていただき、当社及び各社のサービス、製品、セミナー、イベントなどのご案内に使用させていただきます。

本資料を見るには次の画面でアンケートに回答していただく必要があります。



  • オープソース書籍(サイド)
  • OSSNEWSに広告を掲載しませんか?

facebook

twitter