「jQuery」は、簡単な記述で、Webページにさまざまな効果や動きを付けられるJavaScriptライブラリーです。2006年、当時MozillaのJavaScriptエバンジェリストだったジョン・レッシグ氏により開発・公開され、世界中のWebデザイナーやプログラマーの間で広く一般的に使われています。

Google Trendsを利用して、jQueryの勢いを裏付けるデータを見てみましょう。「jQuery」と「JavaScript」の検索数を比較すると、jQueryの検索数がJavaScriptの検索数に迫っています。jQueryがJavaScriptライブラリーの1つでありながらも、プレーンなJavaScript以上の関心を集めているのが分かるでしょう。

 

googletrends

多くのデザイナーやプログラマーが利用しているということは、ライブラリーに魅力があるだけでなく、それだけ多くのノウハウがインターネットや書籍を通じて共有されていることを意味します。つまり、jQueryは新たに習得するのに適しているのです。

また、ライブラリーの開発が終了した場合、せっかく苦労して習得したスキルが無駄になってしまいますが、jQueryはすでに多くの利用者に支持されている分、そうしたリスクが低いといえます。jQueryは安心して使える、将来有望なJavaScriptライブラリーなのです。

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

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

実際にjQueryで記述されたサンプルを見てみましょう。「Run Pen」をクリックしてサンプルを表示してください。

最近のWebサイトでおなじみのアコーディオンパネルのUI(ユーザーインターフェイス)を実装したサンプルです。「テキスト1」と書かれたラベルをクリックすると、アコーディオンが伸縮します。

「JS」をクリックすると、jQueryを利用したJavaScriptのソースコードが表示されます。jQueryの命令は、たった9行しかありません。そのうち3行は閉じ括弧ですので、実質的にはわずか6行でアコーディオンのUIができてしまいました。もしこのアコーディオンをjQueryを使わずにJavaScriptだけで記述しようとすれば、途方もない行数になってしまいます。jQueryを使えば極めて短いコードでダイナミックな表現ができるのです。

記述されているコードも、とても理解しやすいものです。それぞれの意味は後で学んでいくとして、ここでは2行目のコードにだけ着目してください。

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

このコードは、「最初(:first-of-type)以外(:not)のdd要素のCSSのdisplayプロパティの値を『none』にする」を表しています。

「dd:not(:first-of-type)」の部分が少しややこしいですが、これはCSS3などで利用できるセレクターの文法です。jQueryはCSS 1から3までのセレクターをサポートしているので、HTMLとCSSの知識がある方なら、文法さえ覚えてしまえばすぐに記述できるようになるでしょう。

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

最後に、ここまでに紹介した以外の特徴についても触れておきましょう。jQueryは非常に軽量なJavaScriptライブラリーで、ファイルサイズは93KBしかありません。そのため、Webページの読み込み速度にほとんど影響を与えることなく利用できます。

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

西畑一馬

西畑一馬

株式会社トゥーアール
https://www.to-r.net

代表取締役/フロントエンドエンジニア
2016年2月に株式会社トゥーアールを設立し、JavaScriptやHTML5を利用したフロ ントエンドの受託開発やフロントエンドエンジニアの教育事業などを業務として 行う。主な著書に「Web制作の現場で使うjQueryデザイン入門」がある。

このLESSONは、次の書籍を再構成したものです。
Web制作の現場で使うjQueryデザイン入門[改訂新版](西畑一馬著、KADOKAWA刊)

書籍で読む

Loading...