Yahoo! UI Library3（YUI3）のコア機能（ノード・イベント）

Yahoo! UI Library Ver.3 を使ってみよう（2）

　YUI3は処理をモジュールという形で提供しています。ユーザーは、モジュールを指定して、その中に含まれているメソッドやプロパティを使ってプログラムを組んで行きます。今回と次回で、YUI3のコアと呼ばれる部分をみていきます。今回は、その中でもノードとイベントについて説明したいと思います。

はじめに

　YUI3（Yahoo! UI Library 3）はオープンソースで、BSDライセンスで提供されており、企業内でもアプリケーション作成で自由に使うことができます。開発者は、原始的なコーディングに気をとられず、アプリケーションで何を表現し、何を訴えたいのかを中心に考えて作成していけると思います。

　YUI3は処理をモジュールという形で提供しています。ユーザーは、モジュールを指定して、その中に含まれているメソッドやプロパティを使ってプログラムを組んで行きます。

　今回と次回で、YUI3のコアと呼ばれる部分をみていきます。YUI3は、コアに基本機能をまとめています。コア機能には、ノード／イベント／標準オブジェクトがありますが、今回は、その中でもノードとイベントについて説明したいと思います。

対象読者

　Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。

必要な環境

　HTMLとJavaScriptが作成でき、インターネットにつながっているパソコンであれば、例題の作成、確認ができます。

YUI3の基本的な使い方

　YUI3は、使用したいモジュールを宣言してプログラムを組んで行きます。

モジュールについて

　YUI3は多種のクラスをもっています。クラスはサブモジュールにまとめられ、さらにモジュールとしてまとめられています。それぞれのクラスは必要により、複数のモジュールから呼び出すことができるようになっています。

　ユーザーは、一つのモジュールを指定するだけで、関係する主な処理命令を使うことができます。「このクラスを使いたいのだけど、別のモジュールを呼ばなければいけないので面倒」というようなことはほとんどありません。

　YUI3の基本機能がまとめられたコアの機能は、どのモジュールにも含まれています。コアそのものもモジュールとしてまとめられていますが、実際の開発で直接指定して使用することは、あまりないでしょう。

モジュールの指定方法

　読み込みたいモジュールの指定は、YUI().use()メソッドを使って行います。

［構文］useメソッドの指定方法

YUI().use(読み込むモジュール名,...,処理関数)

    読み込むモジュール名：モジュール名はカンマをつけて複数設定可能
    処理関数:コールバック関数（function(Y){・・・｝）

　指定したモジュールを読み込むと、内部で必要なクラスを読み込んだ後、引数で指定された処理関数が呼び出されます。

　コールバック関数とは、呼び出したメソッド（useメソッド）の処理の中で実行されるように、メソッドの引数に指定する関数のことです。

　処理関数に行いたい処理を記述します。以下YUI3の基本的な書き方を示します。

［リスト1］YUI3の基本的な書き方

YUI().use(読み込むモジュール名,function(Y) {
    //ここに処理したいプログラムを書く
}

　リスト1に準じた書き方をすると、コードを書いた本人以外の人がプログラムを読んでも理解しやすくなると思います。

コアのモジュールについて

　コア機能について、概要を説明します。

（1）ノード

　モジュールnodeにまとめられています。ノードは、DOM操作の基本操作部分を担当しています。ユーザーが直接利用することも、他のモジュールが使用することもあります。コンテンツを作成する上で必要になる部分です。

（2）イベント

　モジュールeventにまとめられ、ユーザーとの対話的な処理には必要となるものです。ボタンを押したときなど、コンテンツの変化で発生するイベントと、対応するイベントハンドラのサポートなどを行います。

（3）標準オブジェクト

　モジュールyuiにまとめられています。配列操作の基本部分や、パラメータのデフォルト処理、待ち行列のサポートなど、縁の下の力持ち的な存在です。

　次節からは、ノードとイベントについて説明したいと思います。