そろそろきっちりJavaScript(7) prototype.jsを読む(1)

ソース読みの準備

本連載ではこれまで、JavaScriptの特徴的な記法をいくつか紹介してきた。そろそろ世に広まっているJavaScriptライブラリのソースコードを読み解いていくことができるはずだ。

今回からは、少し趣向を変えて、JavaScriptライブラリをいくつか挙げながら、ライブラリ利用方法と、その動作メカニズムについて紹介していこう。

今回は、prototype.jsにフォーカスする。現在のJavaScript人気の立役者といっても過言ではないprototype.jsだが、その中身はどうなっているのだろうか。ソースコードを読みながら、メカニズムはもちろん、JavaScript的なコードスタイルも学んでいきたい。

まずはソースコードを読むための環境を整備しよう。prototype.jsは、作者であるSam Stephenson氏が提供するサイトから取得できる。現在の安定最新バージョンは1.5.0だが、開発バージョンも公開されている。本稿では最新の1.5.1_rc2を見ていくこととする。右クリック→「名前を付けてリンク先を保存」などの操作により、ローカル環境にprototype.jsをダウンロードしてほしい。なお、prototype.jsのライセンスは MIT-style license(The MIT License)となっている。

ダウンロードが終わったら、これまでの連載同様、「動かしながら学ぶ」ことを実践するため、次の事前準備をしておこう。ダウンロードしてきたソースコードをテキストエディタなどでオープンしたら、Ctrl-a → Ctrl-cなどでソースコードを全選択してコピーしてほしい。続いて、FirebugのコンソールプロンプトにCtrl-vでペーストしよう。コピーされたテキストが複数行に渡るため、ペースト操作を行った瞬間、プロンプトエリアが右側に変形表示されるが、動作上は問題ない。prototype.js最下行のElement.addMethods();文までがペーストされていることを確認した上で、プロンプトの下にある"Run"をクリックしよう。コンソールに、

>>> /* Prototype JavaScript framework, version 1.5.1_rc2 * (c) 2005-2007 Sam Stephenson * * Protot...

と青文字表記されれば、prototype.jsの読み込みは完了だ。続いて、先ほどのプロンプトエリア下にある"Clear"ボタンでペーストされたソースコードをいったんクリアし、Firebugメニューの"Option"から、"Larger Command Line"チェックを外す。これで、単一行プロンプトに戻る。

このようなステップを踏むことで、いちいち読み込み用の<script>タグを書いたhtmlファイルを用意する必要がなくなる。さまざまなライブラリを"ちょっと動かしてみる"ときには、使えるテクニックだ。

ちゃんと読み込めたことを確認するため、プロンプトで次のコマンドを実行し、バージョン番号が表示されることを確認しよう。

>>> Prototype.Version
"1.5.1_rc2"

prototype.jsとは

prototype.jsは、「どういうライブラリなのか」を一言で表現するのが難しい。あえてざっくり表現するなら、「Webページを製作する上でのJavaScriptプログラミングを支援する便利ツール群」といったところだろうか。prototype.jsが提供する機能は、大きく分けて次の通りだ。

プログラミング支援用の新規オブジェクト
既存オブジェクトの拡張
その他のユーティリティ関数

いずれも、Webページ製作時に必要とされる、多くの定型処理の実装を簡単化してくれるものだ。また、これらの機能がライブラリから提供されることで、開発規模に伴い、複雑になりがちなコードスタイルがある程度統一され、結果、再利用性/可読性の向上にも一役かっているとも言える。

Prototypeオブジェクト

それでは、prototype.jsのソースコードを見ていこう。まず、冒頭すぐに目に入ってくるのが、次の文から始まるPrototypeオブジェクトの定義だ。Prototypeオブジェクトは、前回までの記事で紹介してきたprototypeプロパティとは異なり、prototype.jsで新規定義されているオブジェクトである。

var Prototype = {
  Version: '1.5.1_rc2',
  :

先ほどのバージョン番号の確認に用いたPrototype.Versionプロパティは、ここで定義されている。Prototypeオブジェクトでは、このほかに、Browser, BrowserFeatures, ScriptFragment, emptyFunction, Kの各プロパティが定義されている。例えば、Browserプロパティでは、次のような記述により、特定のブラウザ環境であればデフォルトで定義されているプロパティ(の有無または文字列表現)を確認することで、ユーザのブラウザ環境を確認できるようになっている。

Browser: {
    IE:     !!(window.attachEvent && !window.opera),
    Opera:  !!window.opera,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.ind
exOf('KHTML') == -1
  },

それでは、Firebugで次のコマンドを実行し、Browserプロパティを確認してみよう。

>>> Prototype.Browser.IE
false
>>> Prototype.Browser.Gecko
true

emptyFunctionやKの各プロパティは、空処理、または引数をそのまま返す関数オブジェクトとして定義されている。これらについては、概要だけ説明しておこう。プロパティの追加や上書きなど、動的なオブジェクト操作を繰り返していると、ある時点で、特定のプロパティ(変数)に関数が入っているか、それとも未定義なのかが、決め打ちできないことがある。Ajaxなどの非同期プログラミングをしているときには、よくこの課題にぶつかるだろう。このようなときに、空処理の関数が定義されていると何かと便利なのだ。

あまりピンと来ないかもしれないが、現時点では、これらについて理解できなくても大丈夫だ。空の関数が必要になったときに改めて思い出していただくこととし、詳細の説明は別の機会に譲ることとしたい。

prototype.jsのすべてをここで紹介していくことはできないが、次回以降、同様な形式で、特徴的な機能を紹介していこう。