ファイルの管理
同じJavaScriptファイルで複数のクラスを定義することもできますが、クラスごとにファイルを分けるほうがよいでしょう。
クラスの定義
クラスを定義するやり方としては、オブジェクトリテラルを使用する方法と関数を使用する方法の二通りがあります。一般にオブジェクトリテラルは、すべての静的メソッドが含まれ、コンストラクタの初期化が必要でないクラスを定義するのに便利です。例として、オブジェクトリテラルアプローチによってUtilクラスを定義する方法を示します。
ファイル「util.js」に次のものが含まれているとします。
if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};
DevX.myapp.Util = {
TIMEOUT : 5, // Timeout constant in minutes for server requests
isBrowserIE : function() {
return YAHOO.env.ua.ie > 0;
}
}
このクラスを使用する場合、Utilのインスタンスを作成する必要はありません。代わりにメンバに直接アクセスします。
if(DevX.myapp.Util.isBrowserIE()) {
// IE specific behavior
}
もう1つの方法は関数を使ってクラスを定義するというものです。ファイル「main.js」に次のものが含まれているとします。クラス定義についてはインラインコメントを見てください。
if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};
DevX.myapp.Main = function (title) { // Constructor
var t = title; // Private variable
/**
* Private method
*/
function getTitle() {
return t;
}
/**
* Public method
*/
this.refresh = function () {
// Refresh the main page
}
};
次のようにすると、定義したクラスをインスタンス化して使用できます。
var main = new DevX.myapp.Main('Home page');
main.refresh();
クラスに機能を追加していくと、コンストラクタが拡大していきます。その中ですべてのメンバが定義されるからです。追加のメソッドとフィールドを定義する場合、メソッドYAHOO.lang.augmentを使用すれば、コンストラクタの外でメソッドとフィールドを定義できます。次のコードでloginメソッドをどうやってクラスMainに追加しているかを考えてみましょう。
YAHOO.lang.augment(DevX.myapp.Main, {
login : function(username, password) {
// perform login operation
}
});
継承の実装
継承はユーティリティメソッドYAHOO.lang.extendを使って実装できます。クラスMainのサブクラス化とメソッドrefreshの動作の変更について考えてみましょう。
例えば、ファイルアプリケーション「main.js」に次のものが含まれているとします。
if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};
DevX.myapp.AppMain = function () {
//Call the super class constructor
DevX.myapp.AppMain.superclass.constructor.call(this, 'App Main');
// Derived class specific initialization goes here
}
YAHOO.lang.extend(DevX.myapp.AppMain, DevX.myapp.Main);
DevX.myapp.AppMain.prototype.refresh = function () {
// Modify refresh behavior
}
prototypeキーワードはこのクラスの構造を示しています。
Webアプリケーションデザイン
この時点で、myappの例に関して2つの疑問を持つJava開発者もいるでしょう。「YUIを使うとHTMLを書く必要がなくなるのか?」「このライブラリはJava Swing APIと同じようなものか?」――残念ながら、どちらの問いについても答は「いいえ」です。前掲のアプリケーションでは基本的なUI要素にHTMLページを使用しています。けれども、あらゆるページがJavaScriptコードで支持され、アプリケーションの要求に応じてYUIやその他のJavaScriptライブラリが使われます。YUIはページのUI要素、AJAXサーバ対話、そしてデータテーブルやページネーションなどのUI要素のイベント処理に使用されます。
表1にWebアプリケーションのクラスデザインの原則を示します。アプリケーションに2つのページがあって、各ページに種々のUI要素があるとすれば、HTMLとJavaScriptのクラスは表1のような働きをします。
| HTMLとJavaScriptのクラス | 説明 |
|---|---|
| /cxt/page1/Page1.html | UI要素、レイアウト |
| /cxt/page1/page1.css | page1のスタイルシート |
| /cxt/page1/page1.js | page1のメインクラス。コンポーネントを初期化し、イベントを登録し、メソッドコールバックを処理し、サーバ対話を遂行する。 |
| /cxt/page1/page1_util.js | page1に適用できるユーティリティメソッド |
| /cxt/page1/page1_datatable.js | page1で使用されるDataTableインスタンスの抽象表現 |
| /cxt/page2/Page2.html | |
| /cxt/page2/page2.js | |
| /cxt/shared/js/util.js | 共通ユーティリティメソッド |
| /cxt/shared/js/myapp-datasource.js | カスタマイズされたDataSource |
| /cxt/shared/js/myapp-connection.js | カスタマイズされたサーバ接続クラス |
| /cxt/shared/css/myapp-table-skin.css | DataTableのCSSプロパティ |
このアプリケーションがただリッチなユーザーインターフェースを含んでいるだけの単純なページではなく、もっと複雑なものである場合は、おそらくクラスデザインに関して別の方策を考える必要があるでしょう。
これからの課題
以上で、アプリケーションにとってのYUIの有用性、Webページとクラスを開発するためのオブジェクト指向デザインアプローチ、JavaScriptによる開発のベストプラクティス、そして独自のクラスの書き方とクラスを継承して動作を変更する方法がわかったことと思います。
次回はYUIのレイアウト、基本的なウィジェット、イベント処理、およびサーバ対話について説明します。ご期待ください。
