● [jQuery] Prototype ユーザが 10 分で jQuery を使い出すスレ

さぁ、今夜もはじまりました、熊井ちゃん王国。それでは早速、熊井ちゃんに伝えたい jQuery の魅力 RANKIN Q！

渋谷の女性300人に聞いた jQuery の好きな所 TOP 10 名前空間の汚染が最小 簡潔明瞭なメソッド名 CSS3 + XPath ちっくアクセス メソッドに対する閉包性 (メソッドチェイン)

● 1. 名前空間の汚染が最小

Prototype では、DOM要素のID指定には $()、CSSセレクタ指定には $$() といったように、多くの関数が global に定義されている。しかし、jQuery で定義された global 変数は $ のみであり、上記の要素指定はどちらも $() で記述できる。(※ CSS 表記なのでIDの場合は'#'が必要)

$('#nksk') -> "<div id=nksk></div>"
$('.nksk') -> "<div class=nksk></div>"

正確に言えば、jQuery というオブジェクトが唯一定義されており、$ は jQuery への簡易アクセス用のエイリアス(一般的な意味での)として自動的に設定されるものに過ぎない。これは、jQuery を Prototype の置き換えとして利用しやすいようにである(と思う)。逆に、何らかの理由で両方使いたい場合は名前が競合してしまうが、jQuery の noConflict メソッドによって $ への自動設定も回避できる。その場合、jQuery へのアクセスは jQuery('#nksk') で可能であり、それが冗長な場合、自分でエイリアスを準備する(何かに代入する)だけでよい。たった1つの名前しか使っていないので、そういう付け替えも容易になる。jQuery 界隈では、そういった共存を行う場合の jQuery エイリアスとして、$j が好まれているようだ。従って、Prototype と共存させる場合は、以下が定型になる。

jQuery.noConflict();
var $j = jQuery;

noConflict メソッドは jQuery を返すので、1行にまとめてもよい。

● 2. 簡潔明瞭なメソッド名

もう名前はガーと短くしちゃお！

var color = $('#nksk').css("color"); alert("紐がついてるから" + color + "色だよ！");	HTML要素の CSS の値は、もう "css" でいいじゃない！
$('#nksk').css("color", "orange");	設定したいなら、引数に値を追加すればいいじゃない！
$('#nksk').css({width:640,height:480});	ハッシュで複数設定してくれたっていいでしょ！
# <input type="text" id="nksk" value="mikan"> alert("nksk loves " + $('#nksk').val());	form の値が欲しいなら、"val" でいいじゃない！
$('#nksk').html("NKSK!");	innerHTML とか超不細工！html でいいじゃない！

jQuery なら Ajax も簡単(※1) (※1 url はサーバと同ホストである必要がある？)

$('#nksk').load("http://wota.jp/");	URLからデータを読み込みたいなら load でいいじゃない！
$.ajax("/counter/add");	Ajax 通信したいだけなら、もう "ajax" でいいじゃない！

● 3. CSS3 + XPath ちっくアクセス

「ブラウザがCSS3を理解してくれればWeb3.0になる」は熊井ちゃんの総意であるが、一向にサポートされる気配がない。CSS3になると何が嬉しいのか？と言うと、例えば、テーブルで1行ごとに背景色を変える場合、HTMLには何も手を入れることなく、CSSにこんな表現をするだけで済むようになる。

table tr:odd  { background-color: gray; }
table tr:even { background-color: white; }

しかし、CSS2 な現在では、HTML レベルで何かの情報を埋め込むしかなく、プログラム側でゴリゴリもしくはスタティックにゴリゴリ記述することになる。

for ...
  <tr class=" (i % 2) ? 'even' : ...

jQuery では CSS3 形式での要素アクセスが可能なため、HTML を汚すことなく、最初の CSS3 のイメージに近い記述で実現できる。

$("table tr:odd").css('background-color', 'gray');

既存の HTML の要素に対して、プログラム(JavaScript)によって動的に属性を変更していくイメージだ。これまでは、「HTML生成」と言えばサーバサイドで行うというイメージだったが、jQuery では

HTML の「データ構造」のみをサーバサイドで生成し、「デザインや機能」はクライアントサイドで行う

という、全てのWebプログラマが抱いている理想を追い求めているように見える。Prototype に対して jQuery や Ext(Yahoo UI) を比べた時の一番の違いは、機能的な部分よりもこの辺りのパラダイムシフトかもしれない。

● 4. メソッドに対する閉包性 (メソッドチェイン)

• $() アクセスによって jQuery オブジェクトが返される
• jQuery オブジェクトにメソッドを投げると、基本的に jQuery オブジェクトが返される

$() から始まる神秘は分析不能さ〜！

# <div id="nksk1" style="padding:10px;background-color:#E0EEEF;">nksk</div> $('#nksk1').hide().html('データ更新').show()

[実行]

nksk

ダブルバッファリングでチラツキ防止って、あんたいつの時代の人よ！

というか、対象のDOM要素が複数の場合には自動で処理をイテレートしてくれるため、単数と複数の場合を意識せずコーディングできるのが非常に気持ちいい。(Prototype の $ と $$ の違いもここで吸収)。次のコードは、必須項目(クラス名が "required")の input 要素の背景色を全てピンクにしているが、レシーバが $("#nksk") という単数の場合でも同じように動作する。

# 名前: <input type="text" name="name" class="required"> # 年齢: <input type="text" name="age"> # 一言: <input type="text" name="word" class="required"> $("input.required").css("background-color", "pink")

[実行]

名前: 年齢: 一言:

このように、デザインや機能を追加する場合に、既存のHTMLには手を加えずに、最後に処理を追加するのが jQuery スタイル！さらに、背景色を変えた後にも、メソッドチェインによって次々に各要素に対する処理を記述できる。チェインが長い場合には、処理ごとに改行を入れるとコメントも入れ易くなり視覚的にも気持ちいい。

# <input type="text" class="required"> # <input type="text" class="required"> $("input.required") // 背景色をピンクにする .css("background-color", "pink") // リターンキーによるサブミット防止 .keydown(function(event) { return !(event.keyCode == 13); }) // フォーカスが外れたら入力チェック .blur(function() { var c = $(this).val()=='' ? "red" : "pink"; $(this).css("background-color", c); }) ;

[実行]

thisはHTML要素オブジェクト。jQueryの$は万能でそれも引数に取れるから、$(this)はjQuery要素化を意味するケロ！

$("input[type=text]").keydown...

サブミット防止は実際は required だけじゃないから、こんな感じ系？