jQueryを使う理由

私なりに、まとめてみました。


みんなが使っているから
jQueryに限らず、フリーで使えるものや便利なツールを選ぶときには、これが一番重要だったりします。
「みんな」というのは、それぞれ定義が違うと思いますが、「日本人」と置いてみると、日本語マニュアルが充実しています。その他にも、実用例や情報が豊富にあるため、何か困ったことがあっても、調べれば答えがどこかに落ちています。
また、使われなければ、更新する人も更新しなくなります。そうすると、最新のものとは合わなくなってきてしまい、他のものに乗り換えないといけません。そうなると、とても大変です。
「みんな」に使われているものであれば、日々更新され、ずっと使うことができます。

見やすい
ネイティブコードで書く場合

document.getElementById("test").innerHTML = "hello world!";

jQueryで書く場合

$("#test").text("hello world!");

ぱっと見で何しているのかわかるくらい、わかりやすくなります。
また、jQueryのセレクタは、cssのセレクタと共通のものも多いので、デザイナーさんにも優しいです。

短い
とても短くなります。
例えば、以下の2つのコードは、同じ処理をしているものです。

var targets = document.getElementsByTagName("p");
for(i=0; targets.length; i++){
  if(targets[i].className === "warning"){
    targets[i].style.color = "red";
  }
}

$("p.warning").css( "color", "red" );

後述する、クロスブラウザの対応などを含めると、もっと長いコードが、1行になることもあります。

基本的な機能が用意されている(クロスブラウザ・Ajaxなど)
クロスブラウザ
ネイティブコードだけで書く場合、クロスブラウザを意識しなければなりません。
しかし、jQueryは意識することなく、書くことができます。

クロスブラウザとは
WebサイトやWebアプリケーションが、どのWebブラウザでも同じ表示、同じ動作を再現できる状態のこと。
ブラウザごとに、サポートしているものとサポートしていないものがあったり、解釈が違ったりするため、特定のブラウザではレイアウトが崩れてしまったり、思い通りにいかないことがある。
それに対応したHTML,CSS,JavaScriptのことをいう。
例えば、`document.getElementsByClassName`というメソッドは、IE8以下では、サポートされていない。

Ajax
jQueryを使うことによって、Ajaxのコードは、かなり簡易に書くことができます。
また、ネットワークを介する呼び出しのため、煩雑になりがちなエラーをスマートに処理できます。

Ajaxとは
Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態のこと。
つまり、ページ全体を読み込む(ページ遷移する)のではなく、指定された部分だけデータを読み込み、更新する。
例えば、GoogleMapsは、地図の部分は、スクロールやドラッグにより、画面に表示されていない部分のデータを読み込んでいるが、周りのメニューなどは、リロードされない。

プラグインが豊富
前述した、みんなが使っているから、というのが、まさにここに表れてきます。
みんなが使っているからこそ、様々な、豊富な数のプラグインがあります。
さらに、みんながよく使っているプラグインは、jQueryのバージョンが上がっても、プラグインも更新されていくことが多いです。
検索してみると、様々なオススメ・まとめのページがたくさん出てくるでしょう。
様々なものを簡単に実装することができます。

プラグインとは
jQueryの拡張機能のこと。
例えば、スライダーやライトボックスなどが、1行で書けるようになる。
さまざまな種類があり、また、カスタマイズや自作も可能である。

classが存在するか判定する

hasClass

これは、

<div class="hoge"></div>

$('div').hasClass('hoge');

のように、そのタグにclassがついているかどうかを判定する。

例えば、こんなときに使える。

<div class="hoge"></div>
<div></div>
<div class="hoge"></div>
<div></div>
<div></div>

$('div').click(function(){
    if($(this).hasClass('hoge')){
        $(this).css('color','red');
    }
});

クリックしたとき、hogeというclassがついていたら、文字色を赤くする。
など。



これでは、classが存在するかどうか、で判定する場合には使えない。

$('.hoge').length;

これで、hogeというclassが存在しているかどうかを判定することができる。

if($('.hoge').length;){
    $('body').css('background','blue');
}

これで、hogeというclassが存在していたら、背景色を青にする。