jQuery(ジェイ・クエリ):Tech Basics/Keyword
Webページ/アプリ開発に多用されているJavaScriptライブラリ「jQuery」。その特徴やメリット、バージョン、注意点を短くまとめる。
「jQuery」(「ジェイ・クエリ」と読む)はWebページ/アプリ開発を支援するJavaScriptのライブラリの一つ。非常に幅広く利用されていて、JavaScriptライブラリとしてはもはやデファクトスタンダードといえる。商用利用も含めて、無償かつ自由に利用できる。
代表的なJavaScriptライブラリ
Webページ/アプリの開発では、例えばユーザーの操作に応じて表示内容を変えたり、Webサーバと動的に通信したりといった機能を実現するのにJavaScriptがよく利用されている。
だが、複雑なWebページ/アプリの開発で、JavaScriptを一から記述していくにはプログラミングの幅広い知識が必要になるし、手間も掛かる。そこで、もっと簡単にJavaScriptを扱えるように、よく使う機能をまとめた「JavaScriptライブラリ」が提供されるようになった。
jQueryもJavaScriptライブラリの一種である。「Write Less, Do More(よりシンプルなコードで、より多くの処理を)」というモットーで開発されている。またUI(ユーザーインタフェース)など一部機能に特化するのではなく、JavaScriptによるプログラミング全般にわたってサポートしているのも特徴の一つだ。
Webブラウザ同士の違いを吸収してくれる
Webブラウザの種類やバージョンによって、サポートされている仕様や挙動は異なる。Google Chromeでは使える機能がInternet Explorer(IE)では使えない、といった例には事欠かない。JavaScriptの挙動にも差異があるため、いわば「素」のJavaScriptでプログラムを組むと、どのWebブラウザでも同じ機能を実現するのに相当苦労する。いわゆる「クロスブラウザ対策」と呼ばれるもので、Web開発のコストが積み上がる大きな要因の一つである。
jQueryは、こうしたWebブラウザの仕様や挙動の違いを吸収する役割も果たす。開発者はjQueryを使うことで、Webブラウザ同士の差異を強く意識することなくプログラムを組むことが可能だ。
jQueryの機能をまとめた「プラグイン」が豊富
JavaScriptでよく利用される機能をまとめたのがjQueryであるのと同様に、jQueryでよく利用される機能をまとめたのが「jQueryプラグイン」である。
現在では、さまざまな機能・用途向けにたくさんのjQueryプラグインが提供されている。代表的な例としては、ドラッグ&ドロップやスライダーといったUIを提供する「jQuery UI」や、スマートフォン/タブレットといったモバイル機器に対応したWebページ/アプリを開発するための「jQuery Mobile」などが挙げられる。
商用利用も自由にできる
jQueryは現在、MIT Licenseに従って無償で配布されている。商用利用でも有償販売でも利用できる他、改変や再配布も可能であり、企業としても使いやすいだろう。
世界中で広く利用されている
Web上の各種技術のシェアを調べている「W3Techs」によれば、同サイトが把握しているJavaScriptライブラリを利用中の全Webサイトのうち、95.9%がjQueryを使っているという。JavaScriptライブラリの有無に関係のない全Webサイトでも、jQueryのシェアは69.2%に達する(いずれも対象は全世界で、数値は執筆時点のもの)。
このようにjQueryは幅広く利用されているため、jQueryで開発できる技術者も比較的多い。その分、開発に必要な人材を確保しやすいというメリットもある。
jQuery導入時の注意点
●どのバージョンのjQueryを使うべきか?
執筆時点でjQueryには、以前から使われてきた「Ver. 1.x」と、その次のメジャーバージョンである「Ver. 2.x」がある(Ver. 3.0も存在するが、執筆時点ではβテスト中)。jQueryをWebの開発に利用するには、いずれかを選ぶ必要がある。
Ver. 2.xは新たに開発されただけあって、Ver. 1.xより動作が安定していて高速とされている。その一方で、IE 8以前の古いIEはサポート対象から外された(Ver. 1.xはIE 6以降をサポート)。
またjQueryのプラグインやjQuery対応のCSSフレームワーク、CMSでは、Ver. 1.xにしか対応しておらず、Ver. 2.x以降では動かないことがよくあるので注意が必要だ。
jQuery同士の「衝突」
jQueryは幅広く普及しているため、CMSなどのWeb制作に関わるツールでも、その内部でよく使われている。これにjQueryベースのライブラリやプラグインを組み合わせて使うと、結果として一つのWebページから複数のjQueryが呼び出され、異なるバージョンのjQuery同士の競合が生じて動作不良が生じる。
jQueryを利用しているWeb向けツールの例
これは「Concrete5」というWebサイト向けのCMS(コンテンツ管理システム)。WebブラウザでWebページの編集やサイト管理ができる。内部でjQueryやBootstrapといったライブラリ/フレームワークが利用されているため、制作するWebページ側にもjQueryなど同種のものを無造作に組み込むと、CMS内部のものと衝突して不具合が生じることがある(Concrete5には、こうしたトラブルを防ぐための仕組みが用意されている)。
特に、既存のWebページ/アプリを作り直すのではなく、拡張あるいは改善する際には、衝突を回避するような対策が必要だ。
前述の通り、jQueryのシェアは非常に広く、開発の参考になる情報も入手しやすいというメリットもある。また新バージョンのjQuery 3.0がリリースされる予定で、今後も発展することが期待される。Webページ/アプリ開発に間接的にでも関わるなら、jQueryについて基本的なことは知っておいた方がよいだろう。
■関連リンク
- jQuery配布元サイト[英語]
- jQuery逆引きリファレンス: jQueryを利用するには?(Build Insider)
- jQuery逆引きリファレンス(@IT/Insider.NETフォーラム)
- jQuery×HTML5×CSS3を真面目に勉強(@IT/HTML5 + UXフォーラム)
- jQueryで学ぶ簡単で効果的なAjaxの使い方(@IT/HTML5 + UXフォーラム)
- CSSの書き方も分かるjQueryプラグイン実践活用法(@IT/HTML5 + UXフォーラム)
- jQuery Mobileでスマホ向け企業サイト構築(@IT/Smart & Socialフォーラム)
- jQuery UI逆引きリファレンス: jQuery UIを利用するには?(Build Insider)
- jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?(Build Insider)
- ASP.NETプログラマーのためのjQuery入門(@IT/Insider.NETフォーラム)
Copyright© Digital Advantage Corp. All Rights Reserved.