Ajaxライブラリの変遷

Ajaxライブラリの代名詞「prototype.js」

「prototype.js（http://www.prototypejs.org/）」は、「Ajaxライブラリと言えばprototype.js」というぐらい圧倒的な支持率をもつメジャーなライブラリの1つです。

もともとはWebアプリケーション・フレームワーク「Ruby on Rails」のプロジェクトで開発されているライブラリで、Ruby on Railsと共に用いられることも多いです。もちろん単体でも使うことができます。

当初はドキュメントがほとんどなく、みなソースコードを読んでその実装を読み解くということがblog上で行われていました。

それでは、prototype.jsの特徴的な$()とClass.create()の機能を見てみましょう（図2）。

まず、$()という関数はDOMのエレメントに対するアクセスを簡略化し、さらに一括で処理することも可能です。ただし、後述するjQueryから比べると一貫性に欠ける印象です。

また、Classを作る関数を提供しているのも特徴的な機能です。本来JavaScriptはJavaのようなClassというものは存在していないのですが、あたかもClassように継承しながらClassを作ることができます。

prototype.jsと合わせてよく使われるのが、リッチなユーザインターフェースを提供するJavaScriptライブラリである「script.aculo.us（http://script.aculo.us/）」です。「第1回：Ajaxの基礎知識（http://www.thinkit.co.jp/article/59/1/）」で紹介したGUCCIのWebサイトもこれを使って作られています。デモ（http://wiki.script.aculo.us/scriptaculous/show/Demos）からページサンプルがみられますのでご覧になってみてください。

ちなみに筆者はデザイン側の世界からJavaScript開発の世界に入ったのですが、初期のころのJavaScriptは開発言語というよりはインタラクションを加えるため言語としての使い方がメインだったため、ソースコードも複雑なものはそれほど多くありませんでした。

そういった中でprototype.jsのソースコードを見たときは衝撃でした。半分以上何が書いてあるのか、まったくわからなかったですし、プログラマの方が作るとこんなにも洗練されたものになるとか感動しました。

最近ではjQueryやYUIなどに比べて以前ほどの存在感はないですが、それでも今のAjaxムーブメントの大きな流れを作ったのはprototype.jsでしょう。prototype.jsがなかったら、ここまで広まることはなかったかもしれません。

もっともcoolなAjaxライブラリ「jQuery」

prototype.jsが言語としてJavaScriptを拡張したのに対して、「jQuery」はあくまでDOMの操作に特化して設計されたライブラリと言えます。

prototype.jsの場合、何をするにもprototype.js的なコーディングスタイルを求められる感がありますが、jQueryはあくまでDOMの操作に特化しているので、そういったことはあまりありません。

ですので、prototype.jsからjQueryに移行しようとすると、最初は戸惑うかもしれません。prototype.jsは徹底的にJavaScriptを拡張しているので、ユーティリティ的な機能がとても充実しているのですが、jQueryにはそういったものはprototype.jsに比べると少ないです。

ただし、一度jQueryのDOM操作に慣れてしまうと、ほかのライブラリを使う気がしなくなるぐらい簡潔に記述することができます（図2）。

「abcというクラスが振られている全Pエレメントの中身を"Hello!"に書き換えて、ゆっくり消す」と、頭で考えたロジックをそのまま書いていく感じで非常に直感的に記述することができます。

また、prototype.jsとjQueryは併用して使うこともできます。さらにjQueryのもう1つ特徴はプラグインという形で拡張できることです。先ほどの足りないユーティリティはこれで補うことができます。オフィシャルなものを含め、多くのライブラリが開発されていますので、興味のある方はこちら（http://docs.jquery.com/Main_Page）をご覧ください。