We Ain't Seen Nothin' Yet. : [Rails meets jQuery] jQuery入門（+ prototype.js との比較）

[Rails meets jQuery] jQuery入門（+ prototype.js との比較）

書いた人: noriaki 2007,09月30日(日) 15:00

RailsでAJAXといえばPrototype(prototype.js)を利用するのが普通です．なにせRails coreチームにprototype.jsの開発者がいるくらいですから．

しかし，私はあえてjQueryを使ってみたい．

jQuery

jQueryとは，prototype.jsに似た動作を提供する軽量・高速なjavascriptライブラリです．jQueryはDOM操作やAJAXなどの機能を持ち，prototype.jsと似た書き方を残しつつ，jQueryオブジェクトを使って短く簡潔にコードが書けることが特徴です．

現在，jQueryはVersion1.2.1が公開されています．jQueryを利用するには公式ページからファイルをダウンロードし，利用したいページに読み込むだけです．

以下では，jQueryとprototype.jsの特徴比較や，jQueryのちょっとしたTipをご紹介します．

jQuery と prototype.js

jQueryはprototype.jsに触発されて開発されたライブラリなので，随所に似た機能が存在します．まずは，この二つのライブラリの違いを実際のコードを使って眺めてみましょう．

DOM操作

まずDOM操作についてです．DOM操作とは，Webページ上の要素（h1とかpとかdivとか）に対してスタイルを変更したり，要素を追加・削除したりすることです．

以下の例はjQueryの公式ページに載っている例で，CSSのセレクタクラスがsurpriseのp要素すべてに，ohmyクラスを追加し，フェードインエフェクトをつけて表示します．

jQueryの場合

まずはjQueryで書いた場合です．

$("p.surprise").addClass("ohmy").show("slow");

prototype.jsの場合

ではこれをprototype.jsで書いてみましょう．なお，フェードインエフェクトを利用するには別途script.aculo.usライブラリを読み込む必要があります．

$$('p.surprise').each(function(node) {
  new Effect.Appear(node.addClassName('ohmy'));
});

違いはなにか

jQueryオブジェクト

jQueryの方が，同じことを実現するのに短いコードで済んでいることが分かると思います．

このとき，prototype.jsはDOMオブジェクトやStringオブジェクト，Arrayオブジェクトなど既存のオブジェクトを拡張する形で便利な機能を提供しています．一方，jQueryはjQueryオブジェクトという独自のオブジェクトを作り，その中に大部分の機能を実装しています．

このためjQueryでは，$()関数で得られるオブジェクトもjQueryオブジェクト，addClassメソッドを実行した結果返ってくるのもjQueryオブジェクト，といったようにメソッドチェーンと呼ばれるつながりを持った書き方ができるのです．すると結果としてコードが短く簡潔になります．

また，jQueryオブジェクトを利用する副産物として，jQueryはprototype.jsに比べてグローバルスコープに対する汚染が少なくなっています．

エフェクトについて

jQueryでは，先の例に挙げたフェードインエフェクトやSlideUpエフェクトなどいくつかのエフェクトが最初から利用できます．

一方，prototype.jsではscript.aculo.us（一般的にはつなげて「スクリプタキュラス」と読みます）という兄弟ライブラリを一緒に読み込むことで様々なエフェクトを利用できるようになります．

ただし，このscript.aculo.usライブラリは，エフェクトも様々なものがそろっていますし，ドラッグ&ドロップやソートが可能なオブジェクトを作れたりするなど，非常に多機能です．

jQueryには，script.aculo.usと同様のものとしてjQuery UIや，Interfaceといったプラグインが存在します．

jQueryでDOM要素を作るメソッド

jQueryでは，最小限の機能のみをjQuery本体で提供し，様々な付加的機能はプラグインとして提供されています．便利なプラグインや興味深いものもたくさんあるのですが，その紹介や使い方はまたの機会に．

ここでは，jQueryにDOM要素を作るメソッドを追加するTipをご紹介します．

普通のjavascriptでは

DOM要素を作るというのはどういうことかいうと，通常のjavascriptでは以下のようなコードです．

var elem = document.createElement('a');
elem.className = 'external';
elem.setAttribute('href', 'http://www.yahoo.co.jp/');
elem.innerHTML = 'yahoo! JAPAN';
elem.style.backgroundColor = '#daa';

これをdocument.body.appendChild(elem);などのコードで，ページ内に追加することによって新しい要素を作ります．

jQueryでは

jQueryでは，上記のコードは以下のように書くことができます．

$('body').append(
  $('<a href="http://www.yahoo.co.jp/">yahoo! JAPAN</a>')
    .addClass('external')
    .css('background-color', '#daa')
);

かなりすっきりしましたが，タグを直書きです．めんどくさいです．要素に指定する値も分散するのでメンテナンスも大変そうです．

そこで，script.aculo.usのBuilderに似た書き方ができるようにメソッドを作ってみました．

もっと簡単に書ける$.N()

上記の例はご紹介する$.N()メソッドをjQueryと一緒に使うと以下のように書けるようになります．

追記：スタイル指定はオブジェクトで書けるようにソースコードを改良しました．ただし，プロパティ名に'-'（ハイフン）を含む場合は，プロパティ名をクォート(quote)してください．

$('body').append(
  $.N('a', {
    className: 'external',
    href: 'http://www.yahoo.co.jp/',
    style: {
      color: '#fff',
      'background-color': '#daa'
    }
  }, 'yahoo! JAPAN')
);

このとき，要素にCSSセレクタクラスを指定するにはclassではなくclassNameを用いていることに注意してください．

$.N(name, attr, childs)

$.Nメソッドは3つの引数を受け取ります．それぞれ，要素名（HTMLタグ名），タグに指定する要素と値のオブジェクト，タグ内のテキストや別の要素です．

さらに入れ子にして使うこともできます．

$('body').append(
  $.N('p', {}, [
    '日本で大手のポータルサイト',
    $.N('a', {
      className: 'external',
      href: 'http://www.yahoo.co.jp/',
      style: {
        color: '#fff',
        'background-color': '#daa'
      }
    } , 'yahoo! JAPAN')
  ])
);

ソースコード

(function($) {
  // create DOM elements
  $.N = function(name, attr, childs) {
    var ret = $(document.createElement(name));
    if(attr.hasOwnProperty('style')) {
      ret.css(attr['style']);
      delete attr['style'];
    } else if(attr.hasOwnProperty('class')) {
      attr['className'] = attr['class'];
      delete attr['class'];
    }
    ret.attr(attr);
    switch(typeof childs) {
    case "string": {
      ret.text(childs);
      break;
    }
    case "object": {
      $.each(childs, function(i) {
        ret.append(childs[i]);
      });
      break;
    }
    }
    return $(ret);
  }
})(jQuery);

このソースコードを適当な名前で外部スクリプトとして読み込むか，scriptタグ内に書くと利用できるようになります．

追記：CSSのセレクタクラスとスタイル属性の指定を可能にしました．

$('body').append(
  $('<a>').attr({
     className: 'external',
     href: 'http://www.yahoo.co.jp/',
     style: 'background-color: #daa;'
  }).text('yahoo! JAPAN')
);
「className」は引用符で囲むなら「class」で与えて問題ないようです（quoteしておかないとエラーになります）。ただ、style属性はFirefox2では反映されるんですが、IE6では反映してくれませんでした‥‥うーむ。
Code::Craft - 2007-10-01

id:tykiさんからいただいたトラックバックで， $.N()を利用しなくてもエレガントに書ける方法を教えていただきました．

さらに，style属性指定の不具合を指摘していただいたので，style属性はさらにオブジェクト形式で指定できるように$.N()を改良しました．詳しくは利用例をご覧ください．

なお，このメソッドは書籍「まるごとJavaScript & Ajax ! Vol.1」のP.171に掲載されているもののjQuery版です．この本はprototype.jsをはじめjavascriptのエッセンスが詰まった本で，さらっと読める割に内容が充実しています．ちなみに，いくつか作ったgreasemonekyスクリプトの書き方もこの本を参考にしました．

Rails使いの皆さんも，一度jQueryについて調べてみてはいかがでしょうか．

参考ページ

jQuery: The Write Less, Do More, JavaScript Library: http://jquery.com/
Prototype JavaScript framework: http://www.prototypejs.org/
Amazon.co.jp：まるごとJavaScript & Ajax ! Vol.1（書籍）: http://www.amazon.co.jp/gp/product/4844323644/