PrototypeでAJAX開発を効率化

Prototypeチュートリアル

Prototypeによる反復

　Prototypeでは、配列の反復処理に役に立つメソッドを備えたEnumerableオブジェクトが定義されています。配列の反復処理が可能になったのは、Arrayが（Object.extendを介して）Enumerableで拡張されたためです。従来のJavaScriptでは、配列の反復処理を行うには次のようなコードを記述していました。

var languages = ['JavaScript', 'Java', 'C#', 'PHP', 'C++', 'Ruby'];

for(var i = 0; i < languages.length; i++)
{
    alert(languages[i]);
}

　これをEnumerableのeachメソッドを使って書き直すと、次のようになります。

var languages = ['JavaScript', 'Java', 'C#'];

languages.each(
    function(value, index)
    {
        alert(value);
    }
);

　eachメソッドは、他の多くのEnumerableメソッドと同様に、関数を引数として受け取ります。この場合の関数をイテレータと呼びます。1つ目のパラメータ（value）は現在の要素の値であるのに対し、indexは反復の現在のインデックスです。indexパラメータは不要であれば省略することもできます。例えば、次のコードは先ほどのコードと同じ結果になります。

languages.each(
    function(value)
    {
        alert(value);
    }
);

　each自体はここまでに取り上げた機能ほど役に立つものではありませんが、Enumerableには、Prototypeをフレームワークとして選びたいと思わせる有用なメソッドがたくさん含まれています。例えば、grepメソッドでは、正規表現パターンに一致する配列のサブセットを選択することができます。

// it displays Java and JavaScript
languages.grep(/Java.*/, function(value)
    {
        alert(value);
    }

);

　このコードは、「Javaという単語から始まるすべての要素を選択し、見つかった各項目を表示する」という意味です。

　複雑なフィルタ処理が必要なければ、次のように単にselectメソッドを使うことができます。

var prices = [10, 12, 25, 28, 50, 100];

// lowPrices = [10, 12, 25]
var lowPrices = prices.select( function(value)
        {
    return value <= 25;
    }
);

　この例では、イテレータ関数がtrueを返す要素を選択します。

有益なメソッド

　Prototypeでは、Eventオブジェクトを使用してクロスブラウザの手法でイベントを処理することができます。例えば、observeメソッドと併用することで要素を監視できます。observeメソッドが受け取るパラメータは次の4つです。

• 監視する要素
• イベントのタイプ（click、blur、keyupなど）
• イベントが発生したときに呼び出す関数
• キャプチャフェーズを使う必要があるかどうか

　次に例を示します。

<!-- HTML -->
<div id="elem">
  Click Here
</div>

//Javascript
Event.observe($("elem"), "click", displayAlert, false);

function displayAlert()
{
    alert("You clicked the element");
}

　要素の監視を中止するには、次のようにstopObservingメソッドを呼び出します。

Event.stopObserving($("elem"), "click", displayAlert, false);

　もう1つの役に立つオブジェクトはElementです。例えば、このオブジェクトのtoggleメソッドでは、要素が表示されている場合は非表示に、非表示の場合は表示に、要素の状態を切り替える（トグルする）ことができます。

<!-- HTML -->
<input type="button" value="Click here" 
 onclick="javascript:Element.toggle('toggable')">

<div id="toggable">
    You can toggle me by clicking the button above.
</div>

　さらに、要素を表示するためのshowと、要素を非表示にするためのhideという2つの効果的なメソッドもあります。

　これで、AJAXによるプログラミングの準備が整いました。Prototypeには、Web 2.0のアプリケーションやサイトの開発に便利なツールが数多く用意されています。