レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

jQueryを使う7つの理由

JavaScriptに本腰を入れ始めて日が浅いのですが、よく悩むのは、どのライブラリを使うか?です。


とりあえずナマのJavaScriptだけでゴリゴリ書くのはちょっと限界があるので、


ライブラリを使おうと思うのですが、一度ライブラリを決めると


他のライブラリに乗り換えるのは難しいように思います。


いろいろ調べて、結局jQueryにしようと思います。


やっぱり流行るだけことはあるなぁ。


jQueryを使う7つの理由】

1.prototype.js などと混ぜて使える

標準では $ にショートカットが割り当てられるのですが、jQuery.noConflict()と書くことで prototype.js などと混ぜて使えます。

ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery(入門編)


僕の場合は、意外とこれは大きい理由になりました。


prototype.jsベースのライブラリは、他のライブラリと組み合わせて利用すると競合してしまい


「あのライブラリのこの機能を使いたいんだけどなぁ。」というのが後から出てきて


歯がゆいことが結構あったので。


2.ユニットテスト用ライブラリがある。


JavaScriptのテストこそ、Unitテストを書くべきだと感じていて


そういうツールがあればいいなと思っていたら、ありました。


■ネタ元

jQueryのテスティングフレームワークQUnit (でぃべろっぱーず・さいど)


QUnit - jQuery JavaScript Library
http://docs.jquery.com/QUnit


お手軽だし、便利そう!


3.プラグインが充実

わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 - 山本大の日記でも紹介したような


すごいプラグインが豊富です。


JQueryのサイトからダウンロードできるプラグイン
http://plugins.jquery.com/


ウノウラボのhideさんの紹介するプラグインも素敵です。

■簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
http://labs.unoh.net/2007/05/jquery-and-plugins.html


特に、「JSON for jQuery | mg.to」を使ってみたい。

4.カッコいい見栄えを提供してくれる


デザインセンスの無い、サーバーサイドエンジニアである僕にとって、


フロントを作ると、デザインで頭を悩ませることが多いです。


でも、jQueryベースのプラグインはデザイン分野強いので、助かります。


[JS]デザイナーのためのjQueryのチュートリアル | コリス


jQueryを使ってApple風デザインのナビゲーション | CSS Lecture


http://feed.designlinkdatabase.net/tag/jquery.aspx


[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス


5.基本的な機能(Ajaxとか、JSONとか、クロスブラウザ)が揃ってる


この辺の、いまや当たり前になった機能も使いやすさが大事ですね。


■クロスドメインAjaxも可能

jQuery.getScript( url, callback )

HTTP(GET)HTTP通信(GET)で、ローカルのJavaScriptファイルを読み込み、実行する。

jQuery1.2以前では、getScriptは同ドメイン内のスクリプトを読み込むだけだったが、

jQuery1.2では別のドメインJavaScriptを読み込む事もできるようになった。。

jQuery.getScript( url, callback ) - jQuery 日本語リファレンス
6.XPathCSSっぽい柔軟な要素の選択ができる


これまたウノウラボのhideさんのところから。。(頼りすぎ。。)

これが私がjQueryを一番気に入っている理由なのですが、CSS 3と XPath をミックスしたような構文で要素を選択することができます。すべてのjQueryでの操作は、DOMからひとつまたは複数のノードを選択することから始まります。以下に要素選択の例を挙げますが、かなり直感的に理解できるのではないでしょうか。

ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery(入門編)


上記サイトからの引用

jQuery('div.panel')
// class="panel"なすべてのdiv要素
('p#intro')
// id="intro"なすべての段落
jQuery('div#content a:visible')
// id="content"のdivの中のすべてのvisibleなリンク
jQuery('input[@name=email]')
// name="email"なすべてのinput要素
jQuery('table.orders tr:odd')
// class="orders"な奇数行
jQuery('a[@href^="http://"]')
// すべての外部リンク(http://で始まる) 
jQuery('p[a]')
// 1つ以上のリンクを含む段落


■ただし、パフォーマンスはdocument.getElementById()のほうが速いようです。


先日のベンチマークjQueryでもやってみました。(単位はミリセカンド)


■「$()」

回数 FF3 IE6
100回 23 22
1000回 451 2,500
5000回 5,566 39,813
10000回 21,623 159,547


■「document.getElementById()」

回数 FF3 IE6
100回 2 0
1000回 18 563
5000回 65 20,594
10000回 132 74,656


使い分けが大事かな?

7.日本語情報がやたら豊富


英語でもがんばれば読めるんですが、


日本語だとやっぱりたすかります。


jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳


Attributes - jQuery 日本語リファレンス