【OSS情報アーカイブ】jQuery

※当記事に記載されている情報は、古くなっている場合があります。オフィシャルサイトで最新情報をご確認ください。

「jQuery」とは

「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を採用しています。

■オフィシャルサイト情報

オフィシャルサイト

→jQuery

ライセンス情報

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

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

ダウンロード

→jQuery　→Downloading jQuery

■同様製品

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

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

「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本体「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

　

参考元サイト

• jQuery
• WEB企画LABO　→jQueryってなに？超初心者向け入門講座
• TechAcademy magazine　→今さら聞けない！jQueryとは【初心者向け】
• Qiita　→jQueryとは何なのか？　なぜ使わなくても（あるいは使わないほうが）いいのか？
• Wikipedia　→jQuery
• IT/Web系の起業家・フリーランスに贈る、すべらない起業論　→JavaScriptとjQueryの本当の違いとは？
• Handy Web Design　→jQueryとは？jQueryの基本的な使い方まとめ【初心者向け】
• ShareWis PRESS　→今さら聞けないjQueryとは？
• jQuery入門道場　→1章　jQueryとは？

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

この記事のタグ一覧

• jQuery

  1

• 一覧はこちら
• 次の記事へ