Javascript/Javascriptの応用

jQueryとは

最近はJavaScriptを使う場合は、ライブラリを使用するケースが増えています。その中でも、突出した人気を誇るjQueryについてのはじめの一歩です。

高橋 登史朗

執筆者:高橋 登史朗

Javascriptガイド

最近はJavaScriptを使う場合は、ライブラリを使用するケースが増えています。ライブラリを使用することで、ブラウザ間の違いや、煩雑なクロスブラウザ操作に触れることなく、多くの機能を簡単に実現することが可能になります。

jQueryは、その中でも、突出した人気を誇るライブラリです。今回はそのjQuery基本的な部分から書いてみます。

jQueryとは

jQueryは、FierfoxのJavaScriptエバンジェリストを務めていたJohn Resig が2006年1月に発表した軽量なjavaScriptライブラリです。jQueryは、そのキャッチフレーズ「write less, do more」の通り「少ないコードで、より多くのことを実行」できる優れたライブラリです。

まず第一にその特徴は、軽量であること。現在(2010/4)のバージョン1.4.2でMinifiedとGzip圧縮されたサイズはわずか24KBとなります。

そして、もちろんブラウザに依存しないクロスブラウザな動作をしてくれます。このおかげで、無数のブラウザ依存コードへの対処に悩まされる苦労が激減します。

さらに、この軽量なjQuery本体の他に、jQueryの機能を更に拡張してくれる豊富な「プラグイン」と、「jQuery UI」の存在も魅力です。「プラグイン」は、自作できる拡張メソッドであり、世界中の多くの開発者によって作成されています。

「jQuery UI」は、公式な拡張ライブラリですが、多彩なビジュアルエフェクトやドラッグドロップ処理からアコーディオン、タブ、スライダー、日付ピッカー、カラーピッカー、ダイアログといった完成度の高いウィジェットなどが含まれています(参考:jQuery UI デモ)。

jQueryでできること

jQueryの、その小さなサイズの中には、実は簡単なエフェクトなどまでも含まれていて、フェイドインの処理も.fadeIn()という一つのメソッドで実行できるなど、簡単に高度な処理を実装できるようになります。

たとえば、
$("#mydiv").fadeIn()

と書けば、これだけで、id名がmydivという名前の要素がフェイドインします。簡単ですね。

またjQueryがHTMLを操作するときに便利なのは、DOM要素の選択方法として、CSSのセレクタを使用したシンプルな方法が提供されていることです。

たとえば、id名が「my」という要素内の背景色を赤くしたい時、標準のDOMメソッドを利用する場合は、普通のJavaScriptではこう記述します。
document.getElementById("my").style.backgroundColor="red"

背景色を表す background-color が backgroundColor になっていますね。これはJavaScriptの書き方です。

これをjQueryなら、CSSを操作するために、CSSの仕様通りの名前を使い、次のように書くことができます。
[1] CSS風1
$("#my").css("background-color","red")

[2] CSS風2
$("#my").css( { "background-color":"red"} )

[3] JavaScript風
$("#my").css( { backgroundColor:"red"} )

いずれも、jQueryとして動作します。どうですか? CSSの書き方「background-color」が使えています。JavaScriptのCSSプロパティを知らなくても、CSSさえ知っていれば、jQueryを使うことができるのです。

ちなみに、この構文はいずれも、「$("#my")」の部分で、id名が「my」である要素を検索し、その要素へ、.cssメソッド内のCSS設定を適用するという意味です。

また、jQueryの大きな魅力のひとつは「メソッドチェーン」と呼ばれる、その記述方法にあります。たとえば、次のように書くと、id名が「test」の要素の背景色をredにして、「こんにちは」と書き出し、フェイドインします。
$("#test")
    .css("background-color","red")
    .html("こんにちは")
    .fadeIn()

$("#my")の後ろへ .css() 以下「.」でメソッドを次々と接続することで、その命令を実行します。 文字通り、メソッド(命令)をつなぐ「メソッドチェーン」というわけです。

このように、メソッドを接続していくだけで、手軽にいろいろなことが実現できるのがjQueryの魅力です。

【関連ページ】
jQueryのダウンロード
jQueryの基本的な書き方

【編集部おすすめの購入サイト】
Amazonで Javascript 関連の書籍をチェック!楽天市場で Javascript 関連の書籍をチェック!
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます