jQueryとは――Webデザイナーから見た魅力

Webデザイナーさん、（X）HTML／CSSコーダーさん、マークアップエンジニアさん、お待たせしました。Web制作者のためのjQuery入門が始まります。

　本連載では、現役Webクリエイターの西畑一馬氏が、人気のJavaScriptライブラリ「jQuery」を使ったリッチなUI（ユーザーインターフェイス）の作り方を解説します。プログラムの基本的な書き方の説明から、実務で使えるサンプルの紹介まで。目指すは「Webデザイナーが最短距離でjQueryを使えるようになること」です。

　jQueryをマスターすれば、たとえば「このタブパネルの向きを変えてほしいんだけど……」といったクライアントのわがままにもスピーディーに応えられるようになります。仕事の幅をぐっと広げるきっかけに、本連載をお役立てください。

（編集部）

圧倒的人気を誇るJavaScriptライブラリー「jQuery」

　ここ数年、「prototype.js」、「MooTools」など、さまざまなJavaScriptライブラリーが登場してきましたが、「jQuery」はその中で今もっとも注目されているライブラリーです。2006年、MozillaのJavaScriptエバンジェリストであるジョン・レッシグ氏により開発・公開され、簡単な記述でWebページにさまざまな効果を与えられるJavaScriptライブラリーとして、世界中のWebデザイナー、プログラマーの間で広く使われています。

　Google Trendsを利用して、jQueryの勢いを裏付けるデータを見てみましょう。prototype.js、MooTools、jQueryについて、Googleでの検索数を比較します。Google Trendsは検索数をもとにトレンドを分析するツールですので、必ずしもjQueryの利用シェアを表してはいませんが、非常に多くのユーザーが興味・関心を持って検索していることが分かります。

jQuery(オレンジ)、prototype.js(青)、MooTools(赤)のトレンド状況の比較（2009年7月現在）

　jQueryの人気を裏付けるデータはほかにもあります。海外の著名なブログメディアである「Web Directions」は、2008年12月、WebデザイナーおよびWebプログラマー約1200名を対象に「どのJavaScriptライブラリーを利用しているか?」というアンケート調査を実施しました。この結果、1位はjQueryの62.80％となっており、2位のprototype.js（23.26％）、3位のMooTools（19.04％）を大きく引き離しています。

Web Directionsで公開されている「JavaScript, Ajax and the DOM」の記事（http://www.webdirections.org/the-state-of-the-web-2008/javascript-ajax-and-the-dom/）

　シェアが高いことは、ライブラリーに魅力があるだけでなく、それだけ多くのノウハウがインターネットや書籍を通じて共有されていることを意味します。つまり、jQueryは新たに習得するのに適しているのです。また、ライブラリーの開発が終了してしまうとせっかく苦労して習得したスキルが無駄になってしまいますが、多くの利用者に支持されている分、そうしたリスクが低いといえます。jQueryは安心して使える、将来有望なJavaScriptライブラリーなのです。

Read more: http://ascii.jp/elem/000/000/435/435362/#ixzz20Dv5f6Is

サンプルコードに見るjQueryの手軽さ

　jQueryの最大の特徴は、通常のJavaScriptとは異なる方法でJavaScriptの命令を記述できることです。JavaScriptの記述には多くの手続きを必要としますが、jQueryを利用すれば非常に短いコードで済みます。また、CSS（Cascading Style Sheets）にとても近い記述方法を採用しており、CSSが分かるWebデザイナーやマークアップエンジニアが比較的簡単に習得できるように設計されています。

　実際にjQueryで記述されたサンプルを見てみましょう。

xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

http-equiv="Content-Type" content="text/html; charset=UTF-8" />
http-equiv="Content-Style-Type" content="text/css" />
http-equiv="Content-Script-Type" content="text/javascript" />






id="container">

テキスト1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキスト2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキスト3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

　これは、最近のWebサイトでおなじみのアコーディオンパネルのUI（ユーザーインターフェイス）を実装したサンプルです（サンプルページ）。script要素内に記述されているのがjQueryの命令です。たった9行しかありません。そのうち3行は閉じ括弧ですので、実質的にはわずか6行でアコーディオンのUIが作成できてしまいました。もしこのアコーディオンをjQueryを使わずにJavaScriptだけで記述しようとすれば、途方もない行数になってしまいます。jQueryを使えば極めて短いコードでダイナミックな表現が実現できるのです。

　また、記述されているコードも、とても理解しやすいものです。ソースコードの詳しい解説は今後の連載に譲りますが、ここでは2行目のコードにだけ着目してみましょう。

$("dd:not(:first-child)").css("display","none")

　このコードは、「最初(:first-child)以外(:not)のdd要素のCSSのdisplayプロパティの値をnoneにする」ということを表しています。「dd:not(:first-child)」の部分が少しややこしいですが、これはCSS3で利用できるセレクタの文法です。jQueryはCSS1から3までのセレクタをサポートしているので、HTMLとCSSの予備知識がある方なら、文法さえ覚えてしまえばすぐに記述できるようになるでしょう。

Read more: http://ascii.jp/elem/000/000/435/435362/#ixzz20Dw9DcTP

軽量、クロスブラウザー対応もjQueryの魅力

　最後に、ここまで紹介した以外の特徴についても触れておきましょう。

　jQueryは非常に軽量なJavaScriptライブラリーで、ファイルサイズは55.9KBしかありません。そのため、Webページの読み込み速度にほとんど影響を与えることなく利用できます。

　また、Internet Explorer（IE） 6以上、Firefox 2.0以上、Safari 3以上、Opera 9以上、Google Chromeなどの主要なWebブラウザーに対応しています。いわゆる“クロスブラウザー設計”をとっているため、ブラウザーによるJavaScriptの実装の差異を意識せずに使えます。通常のJavaScriptのプログラミングではクロスブラウザー処理に手間が掛かるので、すでにJavaScriptを書いている人にとってもjQueryは魅力的なのです。

　いいことずくめのjQueryですが、利用にあたっては多少の注意点もあります。jQueryは、すでにprototype.jsやMooToolsを利用しているWebページには導入できません。コンフリクト回避の処理を施せばできないこともありませんが、基本的には他のライブラリーと同時に利用しないほうがよい、と考えてください。

　次回からは実際のjQueryの使い方の解説に入ります。本連載を通じて、jQueryの楽しさを実感していただけたら思います。

Read more: http://ascii.jp/elem/000/000/435/435362/#ixzz20Dx0v0pC