来週は私が夏休みなので更新はない予定です。agoです。
最近、人にjQueryを解説する機会があったので、昔を思い出してjQueryを使い始めた頃に感じる疑問を書いてみたいと思います。
1 そもそも何で使うの？いまでも困ってないよ
作成する内容にもよりますが、慣れると使用しない場合に比べて記述するコード量が3分の1程度まで減ります。
また、変数、条件分岐、繰り返しが減るのでバグが発生しにくくなります。
2 何か特殊なことができる？
結局できることは変わりません。
jQuery自体JSで書かれてますし、記述の自由度もJSの制約に制限されます。
3 何が難しいの？
文法がややjQuery的になります。
参考 jQuery言語入門
jQuery自体のコード量は少ないのですが、独特の記述法が多く慣れるまで多少時間がかかるかもしれません。
また、CSS Selectorの知識はほぼ必須です。 特にマークアップの煩雑なサイトの場合、細かいselectorの知識が重要になります。 （逆にマークアップ経験者は他のライブラリに比べて比較的容易に習得できると思います）
ほかにthisの内容に特殊な意味を持たせることが多く、この点でも既存のJSerの方は戸惑うかもしれません。
4 なんで$('#id')で配列が返るの？必ず一つしか返らないよね？
配列に見えますがちゃんとjQuery objectなので、中にいくつ要素が含まれているかはあまり意識しない方がいいです。
また、返り値を統一しmethod chainをつなげるために、たとえ返り値が空であっても配列風に返ります。
5 なんでobjectじゃなくて配列？
DOMを効率的に扱うための判断だと思いますが、結局jQuery objectとして扱えばobjectか配列かを意識することは少なくなると思います。
6 素のhtml elementがほしい
$('a').get(0)を使いましょう。素のhtml elementが返ります。
>>> console.log($('a').get(0));
<a href="/">
また、素のhtml elementが入った配列がほしい場合、$('a').get()を使いましょう。素のhtml elementの配列が返ります。
>>> console.log(jQuery('a').get());
[a tech.kayac.com, a tech.kayac.com, ...
7 $.eachとかださくない？
名前空間を最小にするため、$にすべてのmethod, propertyが関連づけられています。
単純な配列を繰り返す場合、$([]).each(function () {})といった記述も可能です。
8 continue、breakはどうしたらいい？
continueはreturn、breakはreturn falseで行えます。
//continue
$('a').each(function (idx) {
if (idx === 0) return;
alert('idx is not 0');
});
//break
$('a').each(function (idx) {
if (idx !== 0) return false;
alert('idx is 0');
});
breakは返り値がfalseに「===」で比較して「false」に一致する場合のみなので、「0」、「undefined」、「null」等を返してもcontinueと見なされます。
9 また別のライブラリが流行るんじゃない？
CSS Selectorは今後も必須だと思いますし、DOM中心の記述も無くなることはないと思います。
また、今後登場するライブラリもjQueryと比較した紹介文は記述される可能性が高いので、ruby on rails的に残っていくのではないでしょうか？
10 class作りたい
あきらめましょう。
jQueryを使うとコード量が少なくなるので、class風な記述を行う必要性は少ないです。
また、jQueryにclass風な記述をサポートするような機能はほとんどありません。 （$.extendくらい）
11 オブジェクト指向的にツリー構造で設計したい
やめた方がいいです。 なくてもそこまで困らないです。
そこまで大規模なJSを作成する場合、jQueryを使用するか否かを検討した方がいいです。
12 $(this).attr('href')って意味ある？this.hrefが動かないブラウザなんてないでしょ。
$(this).attr('href')とthis.hrefでは返ってくる値が若干違います。
this.hrefはDOM上の記述に寄らずhttp://からのパスが返りますが、$(this).attr('href')はDOM上の記述に沿った内容が返ります。
console.log($('a:first').get(0).href);
// => http://tech.kayac.com/
console.log($('a:first').attr('href'));
// => /
また、IE6の.getAttribute()でフルパスが取得できない問題の対応も行われています。
他にも、$(this).attr('href', function () {})でmethod chaninがつながるので、他の処理を同時に実行したい場合便利かもしれません。
13 どのレベルでselectorを書いていいかわからない
基本的に.cssファイルに書かれたselectorを真似ましょう。
ただ、jQueryの場合、記述によって処理速度が変わるので注意しましょう。
カヤックではこのブログを更新してくれる技術者も募集しています！
