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/
■簡単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とか、クロスブラウザ)が揃ってる
この辺の、いまや当たり前になった機能も使いやすさが大事ですね。
jQuery.getScript( url, callback )
HTTP(GET)HTTP通信(GET)で、ローカルのJavaScriptファイルを読み込み、実行する。
jQuery1.2以前では、getScriptは同ドメイン内のスクリプトを読み込むだけだったが、
jQuery1.2では別のドメインのJavaScriptを読み込む事もできるようになった。。
jQuery.getScript( url, callback ) - jQuery 日本語リファレンス
6.XPathやCSSっぽい柔軟な要素の選択ができる
これまたウノウラボの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 |
使い分けが大事かな?