「jQuery」の主な特徴

「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