[本] jQuery の入門書を読んだ

10日でおぼえるjQuery入門教室(山田祥寛)

jQueryがどんなものか知りたいとずっと思っていて、そんなときに図書館で見つけたので借りた。

この本にも書いてあるけど、何の予備知識も無い人がこの本にいきなり手を出すのは厳しいはず。 HTML、CSS、JavaScript のある程度の知識は必要。 一応、この本でも第1章は、入門書ということで、CSSとJavaScriptの解説をしている。 そうはいっても、予備知識があった方が入りやすいことは確か。 特にCSSを知っていると、jQuery のセレクターの部分とかは、馴染みやすいだろう。

JavaScript でゴリゴリとループを回してHTMLのタグをさまよい歩くスクリプトしか今まで書いたことがなかったので、 セレクターによる操作の便利さにちょっと感動してしまった。

jQuery 自体は、JavaScriptのオブジェクト指向をフル活用して実装されているのだろうけど、 この本では、あまりオブジェクト指向に深入りしないで、jQueryの使い方を解説している。 入門書としては望ましいアプローチなんだろうけど、逆に私にとってはそこがちょっと不満だった。

ほとんどのプログラムを(適当に)写経しながら試してみた。 推奨環境とは違っているんだけど、試した範囲ではちゃんと動作した。

試した環境は、

Ubuntu 10.04
Firefox 3.6.22
jQuery 1.6.4
jQuery UI 1.8.16
jQuery Templates 1.0.0pre
Ruby 1.9.4dev (PHPスクリプトとXAMPPの代用)

ちなみに、XAMPPは、Ajaxのサンプルで使う。使うのは、PHPとApache だけ。 こうして見ると何一つとして、この本で推奨されている環境とは一致してない(笑)。

jQueryのサンプルは読む分にはわかりやすかった。 だけど、いざ、写経してみるとちょっと混乱した。 関数オブジェクトをダイレクトに書いているので、インデントが深くなり、ブロックの最後が、) } ； , のどれだかわからなくなってしまうのだ。 jQueryを使ってスクリプトを書くときのスタイルはこうした方がいいみたいな解説が欲しかった。 わかりやすいスタイルでないと、実際に開発するときにつらい気がするんだけど、どうなんだろうか？

Lesson 37のオートコンプリート機能の解説で、PHPスクリプトの

$_GET['term']

がどうして term なのか説明が欲しかった。 HTML側には、term という id も class も登場していない。 termが登場するのは、phpファイルの中だけ。 どこからこのパラメータがわたされてくるのかさっぱりわからない。 PHPが守備範囲外だとはいえ、これは、オートコンプリートの機能をPHPと連携させる上でのキモとなるパラメータだと思う。 一言あっても良かったんじゃない?

10日でおぼえられたかどうかは、ともかく、jQueryがどんなものか、jQueryを使うとどう便利かということがわかったのが収穫。

あと、これは余談だけど、jQuery Templates はテンプレートエンジンっぽいものだけど、最初に適当に写経したものだからハマッた。

jsonp.js

function(data) {
   $('#result').empty();
   $('#template').tmpl(data.Result).appendTo('#result');
}

jsonp.html

<dl id="result">
    <script id="template" type="text/x-jquery-tmpl">
        <dt><a href="${Url}">${Title}</a></dt>
        <dd>${Description}</dd>
    </script>
</dl>

としてしまって動作しなくてちょっと悩んだ。

本当は、

jsonp.html

<dl id="result"></dl>
<script id="template" type="text/x-jquery-tmpl">
    <dt><a href="${Url}">${Title}</a></dt>
    <dd>${Description}</dd>
</script>

と dlタグの外に template を出しておかないといけない。

dlタグの中に入れておくのなら、jsonp.js を

function(data) {
   $('#result > dt, #result > dd').empty();
   $('#template').tmpl(data.Result).appendTo('#result');
}

として、jsonp.html の template を消さないようにしないといけない。 jQuery Templates は第一印象でいいかもと思ったんだけど、こういうハマり方をすることがあると、ちょっと使いにくいかも。 なんかうまい回避策があるのかな。