JavaScript、Ajax、HTML5(API)、Ruby…Web及び関連技術の実験&情報公開&制作物紹介。

Ajaxライブラリ MooTools の紹介

今、仕事の合間に色々なAjax/JavaScriptライブラリを触っています。
そんな中で、個人的に注目したのが、『MooTools』。
エフェクト系のライブラリに分類されがちですが、DOM操作やリモート操作(XMLHttpRequestを使用したサーバとのやりとり)、Safariを初めとするメジャーなモダンブラウザへの対応(クロスブラウザ対応)など、コアな部分もしっかりしており、Prototype.js(+Script.aculo.us)の代替としても充分かそれ以上のモノを備えています。

主な特徴を挙げるとすれば、以下の通り:

  • 軽量・高速
  • Safariを筆頭に、IE6,7、FirefoxOpera等でテスト済み
  • $()関数、$$()関数等、prototype.jsとの互換性があり、移行が容易
  • オブジェクト指向で、記述が直感的
  • デモが豊富、ドキュメントも充実、できること・やりたいことがすぐ分かる!

以下に、一番人気と歌われるAjax基本ライブラリ Prototype.js との比較をしてみます。

Prototype.js との共通点 ?基本的な記述方式?

MooToolsは、元々 moo.fx というエフェクトライブラリから先に誕生したモノ。
このmoo.fxは、Prototype.js と組み合わせて使用できるようになっているそうです。
その後、Ajax関連のコアな部分や、その他の基本ライブラリも含めて、ライブラリ全体としてMooToolsという名称で現在に至っている模様です。
おそらくそう言う経緯があってか、MooToolsのコアな部分は、PrototType.jsのそれに非常によく似ています。
例えば、DOM要素を抜き出す $() 関数や $$() 関数、配列を生成する $A() 関数や配列の拡張である .each(function(item,idx){?}) メソッド等は、Prototype.js 用に書いたコードがそのままMooToolsでも使用できます。
一部、Prototype.js にはあって(ver.アップで追加されて)MooToolsにはないメソッドもあります。でも、Prototype.js が肥大化しAPIが煩雑になる傾向にあるのに対して、MooToolsは必要十分なメソッドに抑えて、しかもそのメソッドに使いやすい拡張や洗練された実装が見られるのです。
(詳細は余裕があればまた改めてまとめてみようと思います。)

Prototype.js の拡張 ?$$()関数の戻り値?

Prototype.jsでは、$$()関数の戻り値は Element オブジェクトの配列です。
よってその各要素に対して何か処理をする場合、例えば以下のように書く必要があります:

var elements = $$('myselector');
elements.each(function(el){
  el.setStyle('color', 'red');
});

このコードはMooToolsでもそのまま動作しますが、MooToolsではもっと簡潔に、以下のように書くこともできます:

var elements = $$('myselector');
elements.setStyle('color', 'red');

これは、$$()関数の戻り値がElementオブジェクトの配列ではなく、Elementsオブジェクトになっているからです。
Elementsオブジェクトは、内部にElementオブジェクトの配列を保持しています。またElementオブジェクトのメソッドを全て継承しており、それを内部の全てのElementオブジェクトに対して作用させるようになっています。
このように、それが単一のElementか、複数のElementsかを意識する必要なく、同じ記述ができるようになっている、というわけです。

オブジェクト指向の作法に則ったAjax呼び出し

Ajaxの要、XMLHttpRequest(もしくはその代替)を利用したサーバとのやりとりの記述には、Prototype.js と MooTools とでは多少の違いが見られます。
Prototype.js では、Ajaxオブジェクトは他の実働クラスの親クラスおよび名前空間としての役割となっています。「実働クラス」というのは、例えばAjaxの一般的なやりとりをカプセル化する Ajax.Request オブジェクトなど、実際に処理をするオブジェクト(を定義するモノ)のことです。
例えばこの Ajax.Request オブジェクトを使用した典型的な書式は、以下のようになります:

var myAjax = new Ajax.Request(
  url,
  {
    method: 'get',
    parameters: pars,
    onComplete: showResponse
  }
);

実はこの書き方、私は違和感があったんですね。
Java等のオブジェクト指向言語を勉強したり業務で使用したことのある人は、「コンストラクタで全ての処理を行っちゃダメ」と教わったり言われたことがあると思います。
"new"という命令(演算子)は、『あたらいいオブジェクトを生成する』という意味。でも中では、実際のリクエスト発行までもやっているわけです。
つまり。こう考えてください。
この部分を日本語に直すとこうなります。

「新しい Ajax.Request オブジェクトを生成(リクエスト先は url、メソッドは GET、パラメータは pars、完了したら showResponse 関数を実行する)して、その内容を myAjax変数に格納する。」

ね。どこにも「実際にリクエストを発行する」なんて書いてないでしょ?
こういうのは、仕事でプログラムを書く人には「あまり良くない作法」として教えられるのです。

それが、MooTools ではお行儀よく矯正されています。
同じことを MooTools の書き方で書くと、以下のようになります。

var myAjax = new Ajax(
  url,
  {
    method: 'get',
    data: pars
  }
);
myAjax.request().chain(function(){showResponse(this)});

これを日本語的に読むと、こうなります。

「新しい Ajax オブジェクトを生成(リクエスト先は url、メソッドは GET、パラメータは pars)して、その内容を myAjax変数に格納する。リクエストを発行して、完了したら続いて(chainして)showResponse 関数を実行する。」

直感的でしょ?それに読んでみても過不足なく必要十分。
ちなみにMooToolsでは、Ajaxオブジェクトそのものが、Ajax関連の操作をカプセル化する唯一のクラスになっています。そのプロパティやメソッドで、リクエストを発行したり、その結果を直接HTML上の要素に反映させたりします。

このあたりは、Prototype.js から移行する際にはちょっと注意する必要があります。
また、コールバック関数指定と chain() メソッドによる連続実行指定という差異、そこに渡される引数の違い等も注意が必要です。

逆に Prototype.js を知らずに MooTools から始める場合には、あまり違和感なく入れると思います。
(ただ、そもそも each() メソッド同様、引数に無名関数を渡すという手法の時点で JavaScript 特有の書式になるので、JavaScript になれていない人には最初は違和感があるかもですけれど。)

カテゴリ

月別 アーカイブ

OpenID対応しています OpenIDについて

このブログ記事について

このページは、あんちもん2が2007年6月 5日 23:54に書いたブログ記事です。

ひとつ前のブログ記事は「PHPizeプロジェクトについて」です。

次のブログ記事は「拙作プラグインの MovableType4β 対応状況」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。