2010年08月19日 01:00 [Edit]

$(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック

オライリー矢野様より献本御礼。

これでなくなった。

jQueryを使わない理由が。

DHTMLを利用する全ての人、必携。

特にHTMLやCSSを書いても、JavaScriptはそれほど書かない人。これであなたにも書けるようになります。


本書「jQueryクックブック」は、今や最重要のJavaScript Libraryといっても過言ではないjQueryの手引書。

目次
まえがき - John Resig
はじめに
  1. jQueryの基礎
    1. HTMLページでjQueryライブラリコードをインクルードする
    2. ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する
    3. セレクタとjQuery関数を使ってDOM要素を選択する
    4. 指定されたコンテキストでDOM要素を選択する
    5. DOM要素のラッパーセットのフィルタリング
    6. 現在選択されているラッパーセットで子要素を検索する
    7. 要素セットを破壊的な変更の前の状態に戻す
    8. 現在の選択セットに前の選択セットを追加する
    9. 現在のコンテキストに基づいてDOMをトラバースし、新しい要素セットを取得する
    10. DOM要素の作成、操作、挿入
    11. DOM要素を削除する
    12. DOM要素を置き換える
    13. DOM要素を複製する
    14. DOM要素の属性の取得、設定、削除
    15. HTMLコンテンツの取得と設定
    16. テキストコンテンツの取得と設定
    17. グローバルな競合を引き起こさずに$エイリアスを使う
  2. jQueryでの要素の選択
    1. 子要素だけを選択する
    2. 特定の兄弟を選択する
    3. 要素をインデックスの順に選択する
    4. アニメーション中の要素を選択する
    5. コンテンツに基づいて要素を選択する
    6. マッチしないものに基づいて要素を選択する
    7. 可視性に基づいて要素を選択する
    8. 属性に基づいて要素を選択する
    9. フォーム要素をその種類に基づいて選択する
    10. 指定された特性を持つ要素を選択する
    11. コンテキストパラメータを使う
    12. カスタムフィルタセレクタを作成する
  3. 基礎の枠を超えて
    1. 選択結果をループにかける
    2. 選択セットを指定されたアイテムに絞り込む
    3. 選択されたjQueryオブジェクトをDOMオブジェクトに変換する
    4. 選択セット内のアイテムのインデックスを取得する
    5. 既存の配列から一意な値の配列を作成する
    6. 選択セットの一部でアクションを実行する
    7. jQueryを他のライブラリと競合させないための設定
    8. プラグインを使って機能を追加する
    9. 使われたクエリを割り出す
  4. jQueryのユーティリティ
    1. jQuery.supportを使って機能を検出する
    2. jQuery.eachを使って配列とオブジェクトをループにかける
    3. jQuery.grepを使って配列をフィルタにかける
    4. jQuery.mapを使って配列の要素をループにかけ、その値を変更する
    5. jQuery.mergeを使って2つの配列を結合する
    6. jQuery.uniqueを使って重複する配列エントリを削除する
    7. jQuery.isFunctionを使ってコールバック関数を評価する
    8. jQuery.trimを使って文字列またはフォーム値からホワイトスペースを削除する
    9. jQuery.dataを使ってオブジェクトとデータをDOMに関連付ける
    10. jQuery.extendを使ってオブジェクトを拡張する
  5. もっと速く、もっと単純に、もっと楽しく
    1. それはjQueryではなくJavaScriptである
    2. $(this)の問題
    3. 冗長な繰り返しを削除する
    4. jQueryチェインの書式を設定する
    5. 他のライブラリのコードを借用する
    6. カスタムイテレータを作成する
    7. 属性を切り替える
    8. ボトルネックを突き止める
    9. jQueryオブジェクトをキャッシュする
    10. より高速なセレクタを作成する
    11. テーブルをすばやく読み込む
    12. 従来のループを使う
    13. 名前参照を減らす
    14. .innerHTMLを使ってDOMをすばやく更新する
    15. チェインの問題をデバッグする
    16. jQueryのバグかどうかを調べる
    17. jQueryをトレースする
    18. サーバーリクエストを減らす
    19. JavaScriptを控え目に使う
    20. プログレッシブエンハンスメントにjQueryを使う
    21. ページにアクセシビリティを追加する
  6. 大きさ
    1. ウィンドウとドキュメントのサイズを調べる
    2. 要素の大きさを調べる
    3. 要素のオフセットを調べる
    4. 要素が見えるようにスクロールする
    5. 要素がビューポート内にあるかどうかを判断する
    6. 要素をビューポートの中央に配置する
    7. 要素を絶対位置で配置する
    8. 別の要素を基準として要素を配置する
    9. ブラウザの幅に基づいてスタイルシートを切り替える
  7. エフェクト
    1. 要素のスライド表示、フェードイン、フェードアウト
    2. 要素を上方向にスライドさせながら表示する
    3. 横方向のアコーディオンを作成する
    4. 要素のスライドとフェードを同時に行う
    5. エフェクトを連続的に適用する
    6. 要素のアニメーションが開始されているかどうかを判断する
    7. アニメーションの停止とリセット
    8. エフェクトにカスタムイージングメソッドを使う
    9. すべてのエフェクトを無効にする
    10. 高度なエフェクトにjQuery UIを使う
  8. イベント
    1. 複数のイベントにハンドラをバインドする
    2. ハンドラ関数を別のデータで再利用する
    3. すべてのイベントハンドラを削除する
    4. 特定のイベントハンドラを呼び出す
    5. イベントハンドラに動的なデータを渡す
    6. 要素にできるだけ早く(document.readyの前に)アクセスする
    7. ハンドラ実行ループを停止する
    8. event.targetを使うときに正しい要素を取得する
    9. 複数のhover()アニメーションを同時に実行させない
    10. 新たに追加された要素にイベントハンドラを対応させる
  9. 高度なイベント
    1. 動的に読み込まれたjQueryを動作させる
    2. グローバルイベントの実行を高速化する
    3. カスタムイベントを作成する
    4. 必要なデータをイベントハンドラに提供させる
    5. イベントドリブンのプラグインを作成する
    6. jQueryメソッドが呼び出されたときに通知を受ける
    7. オブジェクトのメソッドをイベントリスナーとして使う
  10. HTMLフォームの拡張
    1. ページを読み込むときにテキスト入力にフォーカスを設定する
    2. フォーム要素を有効または無効にする
    3. ラジオボタンを自動的に選択する
    4. 専用のリンクを使ってすべてのチェックボックスをオンオフする
    5. 1つのトグルに基づいてすべてのチェックボックスをオンオフする
    6. 選択オプションの追加と削除
    7. 文字カウントに基づいてタブを自動的に移動する
    8. 残りの文字カウントを表示する
    9. テキスト入力を特定の文字に限定する
    10. Ajaxを使ってフォームを送信する
    11. フォームを検証する
  11. プラグインによるHTMLフォームの改良
    1. フォームを検証する
    2. マスクされた入力フィールドを作成する
    3. テキストフィールドのオートコンプリート機能
    4. 値の範囲を選択する
    5. 範囲が限定された値を入力する
    6. ファイルをバックグラウンドでアップロードする
    7. テキスト入力の長さを制限する
    8. 入力フィールドの上にラベルを表示する
    9. コンテンツに応じて入力を拡張する
    10. 日付を選択する
  12. jQueryプラグイン
    1. jQueryプラグインを検索する場所
    2. jQueryプラグインを作成する状況
    3. 初めてのjQueryプラグインの作成
    4. プラグインにオプションを渡す
    5. プラグインで$ショートカットを使う
    6. プラグインにプライベート関数を追加する
    7. Metadataプラグインをサポートする
    8. プラグインに静的関数を追加する
    9. QUnitを使ってプラグインをユニットテストする
    10. インターフェイスコンポーネントの構築
    11. カスタムツールチップを作成する
    12. ファイルツリーエキスパンダを使ってナビゲートする
    13. アコーディオンを展開する
    14. ドキュメントにタブを付ける
    15. 単純なモーダルウィンドウを表示する
    16. ドロップダウンメニューを構築する
    17. 画像の切り替えをクロスフェードする
    18. パネルをスライドさせる
  13. jQuery UIを使ったユーザーインターフェイス
    1. jQuery UIをインクルードする
    2. jQuery UIプラグインを個別にインクルードする
    3. jQuery UIプラグインをデフォルトオプションで初期化する
    4. jQuery UIプラグインをカスタムオプションで初期化する
    5. jQuery UIプラグインのデフォルトを独自に作成する
    6. jQuery UIプラグインのオプションの取得と設定
    7. jQuery UIプラグインのメソッドを呼び出す
    8. jQuery UIプラグインのイベントを処理する
    9. jQuery UIプラグインを削除する
    10. jQuery UI音楽プレイヤーを作成する
  14. jQuery UIのテーマ
    1. ThemeRollerを使ってjQuery UIウィジェットのスタイルを設定する
    2. jQuery UIのレイアウトとテーマスタイルを上書きする
    3. 非jQuery UIコンポーネントにテーマを適用する
    4. 1つのページで複数のテーマを参照する
    5. 付録:CSSに関する参考文献
  15. jQuery、Ajax、データフォーマット:HTML、XML、JSON、JSONP
    1. jQueryとAjax
    2. サイト全体でAjaxを使う
    3. 単純なAjaxを使ったユーザーフィードバック
    4. Ajaxショートカットとデータ型を使う
    5. HTMLフラグメントとjQueryを使う
    6. XMLからDOMへの変換
    7. JSONを作成する
    8. JSONを解析する
    9. jQueryとJSONPを使う
  16. 大規模なプロジェクトでのjQueryの使用
    1. クライアント側のストレージを使う
    2. 単一セッションのアプリケーション状態を保存する
    3. セッションにまたがってアプリケーション状態を保存する
    4. JavaScriptテンプレートエンジンを使う
    5. Ajaxリクエストをキューに入れる
    6. Ajaxと戻るボタン
    7. JavaScriptをページの最後に配置する
  17. ユニットテスト
    1. ユニットテストを自動化する
    2. 結果のアサーション
    3. 同期コールバックをテストする
    4. 非同期コールバックをテストする
    5. ユーザーアクションをテストする
    6. テストをアトミックに保つ
    7. テストをグループ化する
    8. 実行するテストを選択する
索引

jQueryとはなにか。

本書はこう紹介している。

P. 1
jQueryとは、HTMLドキュメント、より正確にはDOMとJavaScript間のやりとりを単純にするオープンソースJavaScriptライブラリである。

本書の推奨図書でもある"JavaScript: The Definitive Guide"、通称「サイ本」の半分はクソである。著者がクソだからではない。DOMがクソだからである。これは私の意見ではない。きれいな残り半分をさらにきれいにまとめた"JavaScript: The Good Parts"の著者にしてJSONの「発見者」、Douglas Crockfordは同書でこう述べている。

JavaScript: The Good Parts - P.2
ブラウザのAPIであるドキュメントオブジェクトモデル(DOM)はまったくひどいしろもので、そのせいでJavaScriptは不等な非難を浴びてしまっている。

禿しく同意するしかない。生のDOMプログラミングは円形脱毛症を誘発してもおかしくないのだから。

しかし次に続く下りは、もはや正しくない。

DOMはどんな言語から扱っても、扱いづらいものなのだ。

jQueryが、あるからだ。よってそのjQueryの手引書である本書は、まさに

DOMの「良いパーツ」について書籍を書くことは、非常に挑戦しがいのあることだと私は思う。

という書籍だということだ。

論より証拠。実際のコードを見てもらおう。上の目次では、項は当初非表示となっていて、各章をクリックするとその章の項が表示されるようにしてあるが、それを実現しているのが以下だ。

(function($){
    $('#toc').children()
        .children().hide().end()
        .click(function(){ $(this).children().toggle('slow') })
        .hover(
            function(){ $(this).css({backgroundColor:'#ff8'}) },
            function(){ $(this).css('backgroundColor','') }
        );
})(jQuery);

構文的には、なんとたったの一行である。単純で明快で美しい。

実は上記のコード、単なる<pre>タグの中身であるにも関わらず、実際に実行されている。本entryのHTMLソース中に一回しかあらわれない。これは404 Blog Not Found:javascript - ソースを見せてかつ動かすための3つのtipsのテクニックを使っているからなのだが、それを実現している

(function(root, className){
     var walkDOM = function(node, f){
        f(node);
        var kids = node.childNodes;
        for (var i = 0, l = kids.length; i < l; i++) arguments.callee(kids[i], f)
    };
    walkDOM(root, function(node){
        if (node.nodeType  !== 1) return;
        if (node.nodeName.toLowerCase() !== 'pre') return;
        if (node.className !== className) return;
        node.className = 'prettyprint'; // for google-code-prettify
        try{
            eval(node.innerText || node.textContent);
        }catch(e){
            alert(e + "\n" + (node.innerText || node.textContent));
        }
    });
})(document.body, 'evalonload');

も、jQueryならここまでシンプルになる。

(function($){
    $('.evalonload')
        .addClass('prettyprint')
        .each(function(index, element){
            try{
                eval($(this).text());
            }catch(error){
                alert(error + '\n' + $(this).text());
            }
        });
})(jQuery);

そしてjQueryを使うのに、「インストール」という作業は一切不要なのである。たった一行、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

を加えるだけで、オンラインであればいつでもどこでも使えるようになるのだ。

実はjQueryの前に一世を風靡したライブラリーがある。prototype.jsだ。こちらも ajax.googleapis.com でホストされているのでインストール不要なのだが、しかしjQueryのある今はおすすめしない。こちらもDOMプログラミングを単純明快にしてくれはするのだが、それとは関係ない Good Parts な JavaScript まで勝手に extend してくれてしまうのだ。そう。Objectオブジェクトまで。

これに対してjQueryは、グローバルスコープにjQueryオブジェクトとそれへのエイリアスである$しか登録しない。なんと控えめなのだろう。しかも後者はjQuery.noConflict()を呼べば解除される。その場合でも上のようにすれば、ちゃんとfunctionスコープ中で$が使えるのだ。

そして何よりメソッドチェーンとクロージャーを駆使したjQueryのコーディングスタイルというのは実に"JavaScriptic"なのだ。書いていて本当に気持ちがいい。prototype.jsだとRubyコードを移植させられているような気持ちになるのに。

  • 「ひどいパーツ」だったDOM操作が「よいパーツ」になり
  • どこでも使えて
  • 使って気持ちがいい。

というわけでjQueryはWebのあちこちで使われるようにすでになっているのだが、使うのをためらう最大の理由は、オンラインマニュアルは充実していても手引書がなかったからだろう。

本書は、その最後の谷を乗り越えるための橋である。

これが渡らずにいられるか!

Dan the JavaScripter


この記事へのトラックバックURL

この記事へのトラックバック
jQueryは使っても楽しいのですが、ソースを読むのはもっと楽しかったりします。 いっそjQuery自身にjQueryを読ませたら読むのも楽になるのでは?
Ajax - jQueryでjQueryを内観する【404 Blog Not Found】at 2010年08月25日 06:42