購読する西畑一馬のjQuery入門(基礎編)西畑一馬のjQuery入門(基礎編)いまさら聞けない「jQuery」とは?2016/03/30FREE1「jQuery」は、簡単な記述で、Webページにさまざまな効果や動きを付けられるJavaScriptライブラリーです。2006年、当時MozillaのJavaScriptエバンジェリストだったジョン・レッシグ氏により開発・公開され、世界中のWebデザイナーやプログラマーの間で広く一般的に使われています。Trendsを利用して、jQueryの勢いを裏付けるデータを見てみましょう。「jQuery」と「JavaScript」の検索数を比較すると、jQueryの検索数がJavaScriptの検索数に迫っています。jQueryがJavaScriptライブラリーの1つでありながらも、プレーンなJavaScript以上の関心を集めているのが分かるでしょう。多くのデザイナーやプログラマーが利用しているということは、ライブラリーに魅力があるだけでなく、それだけ多くのノウハウがインターネットや書籍を通じて共有されていることを意味します。jQueryは新たに習得するのに適しているのです。ライブラリーの開発が終了した場合、せっかく苦労して習得したスキルが無駄になってしまいますが、jQueryはすでに多くの利用者に支持されている分、そうしたリスクが低いといえます。jQueryは安心して使える、将来有望なJavaScriptライブラリーなのです。jQueryの手軽さjQueryの最大の特徴は、プレーンなJavaScriptとは異なる手軽な書き方でJavaScriptの命令を記述できることです。JavaScriptの記述には多くの手続きを必要としますが、jQueryを利用すると非常に短いコードで済みます。Sheets)にとても近い記述方法を採用しており、CSSが分かるWebデザイナーやマークアップエンジニアが簡単に習得できるように設計されています。実際にjQueryで記述されたサンプルを見てみましょう。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などで利用できるセレクターの文法です。1から3までのセレクターをサポートしているので、HTMLとCSSの知識がある方なら、文法さえ覚えてしまえばすぐに記述できるようになるでしょう。最後に、ここまでに紹介した以外の特徴についても触れておきましょう。jQueryは非常に軽量なJavaScriptライブラリーで、ファイルサイズは93KBしかありません。そのため、Webページの読み込み速度にほとんど影響を与えることなく利用できます。Chromeなどの主要なWebブラウザーに対応しています。いわゆる「クロスブラウザー設計」をとっているので、ブラウザーによるJavaScriptの実装の差異を意識せずに使えます。プレーンなJavaScriptのプログラミングではクロスブラウザー処理に手間が掛かるので、すでにJavaScriptを書いている人にもjQueryは魅力的なのです。主な著書に「Web制作の現場で使うjQueryデザイン入門」がある。このLESSONは、次の書籍を再構成したものです。