CodeZine(コードジン)

特集ページ一覧

PrototypeでAJAX開発を効率化

Prototypeチュートリアル

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/02/23 00:00

JavaScriptフレームワークとして人気の高いPrototypeを活用してAJAX開発をスピードアップする方法を学びましょう。本稿では、JavaScriptでオブジェクト指向開発をする方法を紹介します。

目次

はじめに

 Prototypeのホームページには、「Prototypeは動的なWebアプリケーションの開発を簡易化することを目的としたJavaScriptフレームワークである」と書かれています。Prototypeは、クラス主導の開発や継承など多くのオブジェクト指向の手法を使ってJavaScriptアプリケーションを開発できるようにすることで、その目的を完全に果たしています。事実、このフレームワークには役に立つ機能が数多く用意されており、一度使い始めたら、どのアプリケーションの開発にも利用したくなります。

 Prototypeの最大の特徴は、その機能豊富なAJAX(Asynchronous JavaScript and XML)ライブラリにあり、これによって、JavaScriptを介してサーバの非ブロック呼び出しを行うという人気のWeb開発手法を簡単に取り入れることができます(昨年度のAjaxian.com 2006 Surveyでは、Prototypeは最も人気の高いAJAXフレームワークという評価を受けました)。もちろん、Prototypeで実現できることはすべて、Prototypeのベースである普通のJavaScriptでも実現できます。しかし、わざわざ仕事を増やす必要はありません。例えば、同じタスクを行うのにdocument.getElementById("myElement")$("myElement")のどちらを使いたいですか? 本稿では、$("myElement")を選んだ読者のために、$をはじめとする役に立つPrototype関数を詳しく説明します。

 とはいえ、Prototypeは巨大なフレームワークなので、1回では説明しきれません。そこで、ここではごく一部の重要な機能だけを紹介します。フレームワーク全体を深く理解するには、ソースコードを見てください。基本な仕組みを知るにはソースコードを見るのが一番であり、必要に合わせて修正を加えることもできます。

便利な関数

 WebアプリケーションでPrototypeを使うには、まず最新のバージョンをダウンロードします(本稿執筆時の最新バージョンは1.4.0)。実際に必要なファイルは「prototype.js」だけで、次のように<script>タグを使ってページにインクルードします。

<script type="text/javascript" src="yourPath/prototype.js"></script>

 先ほど取り上げた$関数は、document.getElementByIdのショートカットです。$には複数の要素IDを渡すこともできます。次のコードを実行すると、要求された要素を含む配列が返されます。

<!-- HTML -->
<div id="firstElem">First element's content</div>
<div id="secondElem">Second element's content</div>

// JavaScript
var elems = $("firstElem", "secondElem");
alert(elems[1].innerHTML);  //displays "Second element's content"

 もう1つの実に役に立つショートカット関数は、フォームフィールドIDを取得してフィールド値を返す$Fです。

<!-- HTML -->
<select name="language" id="language">
 <option value="JS" selected="selected">JavaScript</option>
 <option value="Java">Java</option>
 <option value="C#">C#</option>
 <option value="Ruby">Ruby</option>
</select>

// JavaScript
var langValue = $F("language");
alert(langValue); //displays "JS"

オブジェクト指向(Object-Oriented:OO)のJavaScript

 Prototypeでは、OOスタイルに非常によく似たJavaScriptコードを作成することもできます。例えば、次のクラス定義を見てみましょう。

// Class definition
var Person = Class.create();

// Class methods
Person.prototype =
{
    //Constructor
    initialize : function(firstName, lastName, age)
    {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    },

    //method #1
    toString : function()
    {
        return this.firstName + " " + this.lastName + ", " + this.age;
    },

    //method #2
    displayFirstName : function()
    {
        alert(this.firstName);
    }
};

var myPerson = new Person("Alessandro", "Lacava", 30);
alert(myPerson.toString()); //displays "Alessandro Lacava, 30"

 見ての通り、コンストラクタは(慣例により)initializeメソッドを使って定義されています。さらに、この例では他にtoStringdisplayFirstNameの2つのメソッドも定義されています。もちろん、メソッドは必要な数だけ定義できます。

 また、Prototypeでは、Object.extendメソッドによって既存のクラスを拡張することもできます。このメソッドは、あるオブジェクトのプロパティとメソッドを別のオブジェクトにコピーします。構文はObject.extend(destination, source)です。ここでdestinationにはsourceのプロパティとメソッドで拡張するオブジェクトを指定します。

「this」の参照先が期待どおりではない場合

 既にご存知のように、JavaScriptの関数は本格的なオブジェクトです。PrototypeはJavaScriptのFunctionクラスにさらに2つの素晴らしいメソッドbindbindAsEventListenerを追加します。この2つのメソッドは、イベントハンドラの働きを設定するときに非常に役に立ちます。これらのメソッドの利点をよく理解するために、次のコードを見てみましょう。このコードでは、Personオブジェクトを作成し、そのdisplayFirstNameメソッドを<div>のクリックイベントのイベントリスナとして設定します。

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

// JavaScript
var person = new Person("John", "Brown", 20);
$("elem").onclick = person.displayFirstName;

 ここでの目的は、ユーザーが「Click Here」をクリックしたときにファーストネーム(John)を表示することです。しかし、クリックしてみても、undefinedが表示されてしまいます。なぜかと言うと、$("elem").onclick = person.displayFirstNameというコードは、「<div>onclick関数の本体をperson.displayFirstName関数の本体で置き換える」、つまりalert(this.firstName);に置き換えることを事実上意味しているからです。

 問題は、onclickが呼び出されたときに、thisキーワードがもはやPersonを参照していないことです。thisが参照するのは、firstNameプロパティを持っていない<div>要素です。Prototypeでは、bindメソッドを次のように利用してこの問題を見事に解決できます。

$("elem").onclick = person.displayFirstName.bind(person);

 これで、thisキーワードはPersonクラスを参照するようになります。このコード行を言葉で表現するなら、「<div>onclickの本体をperson.displayFirstNameの本体で置き換え、かつ、thisキーワードとpersonオブジェクトをbindでバインドする」となります。bindAsEventListener関数は同じことを実行するだけでなく、クロスブラウザ方式で呼び出された関数にeventオブジェクトを渡します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

  • Alessandro Lacava(Alessandro Lacava)

    イタリアを活動拠点とするソフトウェア開発者、テクニカルライター。Javaと.NETテクノロジ、Webアプリケーション、通信システムを得意分野とする。通信エンジニアリングの資格を保有。連絡先については個人のWebサイトを参照。

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5