はじめに
The Yahoo! User Interface Library （YUI）はAJAXベースのリッチなユーザーインターフェースを開発するためのオープンソースのJavaScriptライブラリです。新しいYahoo! MailではYUIが使われているので、このライブラリがいかに強力なものか想像できるでしょう。本稿は3回シリーズの1回目です。このシリーズの主な対象読者は、JavaScriptの専門知識はあまりないけれども、サーバーサイドフレームワーク（JavaServer Pages、Struts、Springなど）を使ったWebアプリケーション開発はそれなりに経験しているというJava開発者です。今回はJavaScriptの初心者のために、セットアップやデザインにおけるYUIの利用方法と、オブジェクト指向JavaScriptプログラミングについて説明します。既にJavaScriptに精通している方は、このシリーズをYUIライブラリへの手引きとしてご利用ください。
このシリーズの2回目と3回目では次のトピックを取り上げます。
- コンテナ、レイアウト、ウィジェット、イベント処理、AJAXコンポーネント、サーバーサイド対話
- DataTable、ページネーション、ソート、JSON、エラー処理
YUIの概要
簡単に言うと、YUIライブラリはWebアプリケーションのさまざまな面に対応するためのコンポーネントの集まりです。これらのコンポーネントは次のカテゴリに大別されます。
- コントロール／ウィジェット
- Panel、Tooltip、Dialogなどのコンテナコンポーネント
- Button、Calendar、DataTable、Menu、Paginator、Rich Text EditorなどのUIウィジェット
- サーバーサイドモジュールと対話するためのコンポーネント
- DOMおよびイベント処理を扱うためのコンポーネント
- アニメーション、ドラッグ＆ドロップ、ページレイアウトなどを管理するコンポーネント
どのコンポーネントもYUIソースコードは3種類の形式で提供されており、アプリケーション固有の問題をデバッグするのに役立ちます。
- 「標準形式」―コンポーネントの実装を知るのに役立ちます。
- 「デバッグ対応」―デバッグ情報を出力します。
- 「圧縮」―ダウンロードのパフォーマンスを高めるために空白が削除されています。
JavaScriptプログラミングの落とし穴
JavaScriptアプリケーションの開発とデバッグは骨の折れる仕事です。Java開発者にとっては特にそうです。FirebugのようなJavaScriptデバッガを使用したとしても、エラーを突き止めるのは容易ではありません。JavaScriptプログラミングでよく見られる次の落とし穴とその解決策を簡単に紹介しておきます。
- 関数の宣言時にローカル変数の頭に
varキーワードを付けると、関数の範囲外でも値が維持されます。こうすると、何がまずかったのか判断しにくくなります。 - JavaScriptでは何もかもが関数なので、クラスのインスタンスを作成するには
newキーワードを正確に使用しなければなりません。そうしないと、JavaScriptが関数を呼び出して、左側のオペランドに戻り値を代入します。 - 関数に参照を渡すときに関数名の末尾に左右の丸括弧を付けてはなりません。こうすると、実際に関数が呼び出されます。
- DataTableコンポーネントに渡す列幅はIEとFirefoxとで異なります。Firefoxでは、IEよりも列幅が20ピクセル小さくなければなりません。
- JavaScriptコードの動作はブラウザによって異なります。そのため、アプリケーションに変更を加える際には対象となるすべてのブラウザでアプリケーションをテストしなければなりません。
- 新しいYUIコンポーネントを使用するときにソースJavaScriptファイルを取り込むのを忘れると、エラーは出されませんが、そのコンポーネントは動作しません。YUI Loaderを使って必要に応じてソースファイルをダウンロードするという方法もありますが、私は使用中のコンポーネントの個々のソースファイルをリンクするという方法を好んで使用しています。そうすれば、ダウンロードするものを正確にコントロールできます。これはJavaプログラムに必要なクラスをインポートするのとよく似た単純なアプローチです。
YUIのオブジェクト指向JavaScriptデザイン
AJAXフレームワークが出現するまで、JavaScriptはアプリケーション開発プラットフォームとして扱われていませんでした。オブジェクト指向デザインのサポートがあるにもかかわらず、JavaScriptは最小限の動的Webページ動作を実装するための単なるスクリプト言語として扱われていました。JavaScript開発でオブジェクト指向デザインを利用するため、YUIはすべてのコンポーネントでオブジェクト指向デザインを使用しています。
以下では、JavaScriptでのオブジェクト指向プログラミングを実際に示し、オブジェクト指向JavaScriptアプリケーション用のクラスを構築するためのアプローチを紹介します。YUIライブラリはこのスタイルの開発を容易にしてくれるコンポーネントを提供します。
名前空間の作成
エンタープライズソフトウェアでは、クラスをそれぞれの動作に基づき名前空間の下でグループ化するのが普通です。そのため、クラスとオブジェクトの作成方法を学ぶ前に、名前空間について学ぶことが大切です。
必要な名前空間をすべてYAHOO名前空間に入れるようにしたい場合は、それらを次のようにして作成します。
YAHOO.namespace("myapp");
YAHOO.namespace("myapp.util");
YAHOO.namespace("myapp.ui");
YAHOO.myapp.Main = function() {
}
このコードによって3つの名前空間が作成され、YAHOO.myapp名前空間の下にクラスが作成されます。
あるいは、次のようにして独自の名前空間を定義することもできます。
if(!DevX) DevX = {};
if(!DevX.myapp) DevX.myapp = {};
DevX.myapp.Main = function() {
}
