Javascript/Javascriptの応用

jQueryとは

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

この記事の担当ガイド

  • このエントリーをはてなブックマークに追加
最近は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の基本的な書き方



編集部おすすめの購入サイト

楽天市場でJavascript関連の書籍を見る

更新日:2010年04月01日

(公開日:2010年03月26日)

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    1

    この記事を共有する