Prototype.jsとはなにか

Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。

ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。

これから6回にわたって、このPrototype.jsを使うにあたって基本となることを紹介していく。本稿が読者のAjaxアプリケーションの構築に役立てば幸いである。

ダウンロード

ライブラリは、ダウンロードページからprototype.jsというファイルをダウンロードしたら、解凍などをせずにそのまま利用できる。容量は約127KBと小さい。

Webページで利用するには、HTML文書の<script>タグにファイル名などを記述しておけばよい(以下参照)。

<script type="text/javascript" src="《ディレクトリ》/prototype.js"></script>

利用する前には、HTML内に記述されるディレクトリ名に間違いがないかをよく確認しておこう。なお、本稿ではIE6、Firefox2、Safari2以上をサポートするバージョン1.6を用いるが、連載中にバージョンアップした場合はそれに変更する可能性がある。

名前が$で始まるメソッド

Prototype.jsでは、よく用いるメソッドを短く記述できるようにしていたり、documentなどのJavaScriptの既存オブジェクトに対して、より便利な操作ができるようにする拡張が施されている。今回は前者にあたる、名前が$で始まるメソッドを紹介したい。なお、特別なことがない限り、省略可能な記述は[ ～ ]で表す。

$( IDまたはDOMオブジェクト [, IDまたはDOMオブジェクト, ... ] )
戻り値 : DOMオブジェクトもしくはその配列

$()は、HTMLタグ(DOMオブジェクト)を表すもので、引数にはid属性の値やDOMオブジェクトを設定する。引数は複数になってもよい。戻り値のDOMオブジェクトはPrototype.jsによる拡張が施されたものになる。

リスト1に複数の<div>タグによる画面表示を隠す(display : noneとする)例を示す。

リスト1: <div>による画面表示を隠す

$( 'div1', 'div2', 'div3' ).invoke( 'hide' );  // $( 'div1' ).hide(); は可能

実行される<div>タグの例(id属性の値が'div1', 'div2', 'div3'のもの)

<div id="div1">マイコミジャーナル</div>
<div id="div2">いまからはじめるPrototype.js</div>
<div id="div3">Prototype.jsの概要と$で始まるメソッド</div>

$$( 'CSSセレクタ' )
戻り値 : セレクタに該当するDOMオブジェクトの配列

バージョン1.5から追加されたもので、CSSセレクタに該当するDOMオブジェクトを取得する。CSSセレクタとは、CSSプロパティ設定の先頭に記述される#idvalueや.classなどのことだ。バージョン1.5.1以降では、CSS 2.1の属性セレクタやCSS3の擬似クラス(pseudo-class)もサポートしている。サポート範囲の詳細は、この関数のドキュメントを参照していただきたい。

リスト1と同様の処理をCSS3の属性セレクタで記述するとリスト2のようになる。

リスト2: idがdivで始まる<div>の画面表示を隠す

$$( 'div[id^="div"]' ).invoke( 'hide' );  // $$( 'div[id^="div"]' ).hide()は不可

実行される<div>タグの例はリスト1参照

$A( コレクションオブジェクト )
戻り値 : オブジェクトが持つ要素の配列

$A()はコレクションオブジェクトを配列として取得する。コレクションオブジェクトとは、複数の要素を持つオブジェクトのことをいう。たとえば関数の引数群を表すargumentsやdocument.getElementsByTagName()の戻り値などがそれにあたる。コレクションオブジェクトを配列にしておくと、JavaScriptやPrototype.jsで用意されている配列のための便利なメソッドが利用できる。リスト3はすべての<div>をDOMオブジェクトの配列として取得する例だ。

リスト3: <div>タグのDOMオブジェクトを配列で取得

$A( document.getElementsByTagName( 'div' ) )

$F( DOMオブジェクトまたはID )
戻り値 : value属性の値

フォームで選択された値を取得する。Form.Element.getValue()を短縮したものだ。

リスト4: フォームで選択された値を取得する

$F( 'place' )

実行されるフォームの例(この状態での戻り値は選択済みの"2")

<select id="place">
  <option value="1">渋谷
  <option value="2" selected>代官山
  <option value="3">表参道
</select>

$H( オブジェクト )
戻り値 : 新たに生成されたHashオブジェクト

Hashオブジェクトを生成する。1.6以前のバージョンとは互換性がなく、リスト5に示す新たなメソッドが定義されたので注意が必要だ。詳細はHashオブジェクトのドキュメントを参照していただきたい。

リスト5: Hashオブジェクトの新しいメソッドの例

var h = $H();
h.set( 'place', '代官山' );   // 両者を一対の値として設定
var p = h.get( 'place' );     // p == '代官山'

$R( 始端, 終端 [, 終端を含まない場合はtrue ] )
戻り値 : 新たに生成されたObjectRangeオブジェクト

ObjectRangeオブジェクトとは、始端から終端までの範囲を表すもので、繰り返し(each)や判定(include)で用いると便利だ。始端と終端はリスト6で示すように数値や文字が指定できる。

リスト6: $R()で生成されるObjectRangeオブジェクトの例

$R( 0, 10 )          0から10までの範囲
$R( 0, 10, true )    0から9までの範囲
$R( 'a', 'd', true ) 'a', 'b', 'c'
$R( 'あ', 'ん' )     'あ'から'ん'(文字コード順)

$w( 文字列 )
戻り値 : 文字列を半角の空白(\s)で区切られた語句の配列

文字列に半角の空白が混じっているとき、それで区切られた語句を要素とする配列を取得する。リスト7に複数のタグをIDで指定して表示する例を示す。

リスト7: 複数のIDのタグを表示させる(タグにはCSSプロパティdisplay : noneを指定済みとする)

$w( 'div1 div2 div3' ).each( function( tagId )  {
  $( tagId ).style.display = 'block';
} );

実行される<div>タグの例はリスト1参照

今回は、Prototype.jsでよく用いられる$で始まるメソッドを紹介した。アプリケーションのソースコードでこれらを見かけたときは、上記を思い出していただきたい。