« [Ruby] jQuery の勉強のために Webrick を使った超簡易手抜きサーバーを準備した(4) | トップページ | [本] ロマンス作家が書いた本格ミステリーを読んで Hello のもう一つの綴りを知った »

2011年9月23日 (金)

[本] 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 は第一印象でいいかもと思ったんだけど、こういうハマり方をすることがあると、ちょっと使いにくいかも。 なんかうまい回避策があるのかな。

|

« [Ruby] jQuery の勉強のために Webrick を使った超簡易手抜きサーバーを準備した(4) | トップページ | [本] ロマンス作家が書いた本格ミステリーを読んで Hello のもう一つの綴りを知った »

コメント

2019年の新素材-新作
高品質の追求 超N品を良心価格で提供
HERMES(バッグコピー、財布コピー、時計コピー)
クロエ CHLOE バッグなどです。
ご不明点が ございましたらお気軽にお問い合わせください
100%品質保証!満足保障!リピーター率100%!
ロレックスブランドコピー,ROLEX時計コピーN級品販売専門店!
[url=https://www.cocotu009.com/product/detail-8974.html]ブランドスーパーコピー[/url]

投稿: ブランドスーパーコピー | 2020年5月 8日 (金) 06時55分

スーパーコピーN品通販専門店

最新作ブランドコピールイヴィトン財布激安
偽物ブランド財布,偽物ブランド財布
シャネル財布偽物,ルイヴィトン財布,財布コピー
人気ブランド_バッグコピー_財布コピー
サングラス偽物_ベルトコピー_新作_スーパーコピー

バッグ、財布、小物などでございます専売店
★弊社は「信用第一」をモットーにお客様にご満足頂けるよう
★全物品運賃無料(日本全国)
★不良品物情況、無償で交換します.
★税関没収する商品は再度無料で発送します!

ホームページ上でのご注文は24時間受け付けております

投稿: クロムハーツ 22k スーパーコピー | 2020年9月24日 (木) 08時28分

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: [本] jQuery の入門書を読んだ:

« [Ruby] jQuery の勉強のために Webrick を使った超簡易手抜きサーバーを準備した(4) | トップページ | [本] ロマンス作家が書いた本格ミステリーを読んで Hello のもう一つの綴りを知った »