YUI3の特徴
本体はYahoo!のWebサイトにあります。本体とはAPI(Application Program Interface)といわれる命令や関数の集合体のことです。Yahoo!が実際に使用しているライブラリーの中で公開可能なものをライブラリーとしてまとめています。APIの詳細説明ファイルはダウンロードページにある、Full Developer Kitに含まれています。
YUI3はコアを中心として、いくつかの部品に分類されます。
YUI3コア
YUI3ライブラリーの基本となる部分です。YUI3を使用するためには、YUI seedと呼ばれるシードファイルをページに組み込んで作成します。バージョン3からは軽量化されました。シードファイルをページに組み込んで定義した関数を通して、いろいろなYUI3の基本ライブラリーにアクセスします。
YUI3のシードファイルとは、YUI3のアクセス方法を定義したテキストファイルです。YUI3を利用するときは必ず読み込んでおく必要があります。コアといわれる部分はシードファイルに定義されています。もちろんシードファイルのみでアクセスできない処理もあります。いくつかのJavaScriptファイルを設定してプログラムを書いていくことになります。
シードファイルを定義するには、URLでYahoo!内のファイルを指定することも、シードファイルをダウンロードして、直接ダウンロードしたファイルを指定することもできます。以下のリストはシードファイルを定義する2つの方法の例です
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script> (1) <script src="./yui-min.js"></script> (2)
(1)はYahoo!のサーバー内にあるyui-min.jsを呼び出しています。(2)はダウンロードしたJavaScriptを呼び出しています。どちらの定義でも大丈夫です。
コアには以下の要素が含まれています。それぞれ単体で使うというより組み合わせることによって、アニメーション効果やドラッグ&ドロップなどの機能を提供します。
(1)Global Object(標準オブジェクト)
YUI3のための言語ユーティリティと基本の関数群、ビルドインローダーが設定されています。以下のコンポーネントが含まれます。
| コンポーネント | モジュール | 説明 |
| Array Operations | array | 配列の操作 |
| YUI Core | core | コアとなる部品 |
| Language helper methods | lang | 命令が使える範囲の確認など |
| Periodic execution method | later | 定期的な処理の実行 |
| Logging support | log | ログのサポート |
| Object Operations | object | オブジェクトの操作 |
| Browser Sniffing | ua | ブラウザの検出 |
| YUI Object | yui | YUIの全体の基本となる部分をまとめたもの |
| Dynamic script and css loading | get | 必要になったときに読み込む処理のサポート |
| YUI Loader | loader | 各コンポーネントの読み込み |
(2)Node(ノード)
DOM操作のためのインターフェイスです。標準のDOM APIをベースにして、操作を容易にします。DOM(文書オブジェクトモデル)とはライブラリーへのアクセスや操作の方法を定義するモデルです。以前のバージョンのDOM操作はここでサポートされています。
(3)Event(イベント)
ブラウザ内でのイベント(マウスのクリックや状態の変化などで起こるもの)処理をサポートするものです。DOMイベント、マウスイベント、キーイベントなどがあります。動的なWebページを作成するためにはなくてはならないものです。
Component Infrastructure:基盤となる部品
各要素の基本となる部分をまとめたものです。以下のものがあります。
(1)Attribute:属性の設定
各要素に個別に属性を追加することができます。デフォルト値を設定したり、読み取り専用に設定したり、指定された値を読み込んだりする処理をサポートします。
(2)Base:基本部品
YUI3の基礎クラスとなるものです。初期化や終了の処理の一貫性を提供します。
(3)Pluigin:(Beta)プラグイン
プラグインとはアプリケーションに小さなプログラムを追加するものです。
- FocusManager Node Plugin(Beta):選択された場所の表示のサポートソフト
- MenuNav Node Plugin(Beta):メニュー表示を便利にするソフト
- Console Filters Plugin(Beta)入出力データから必要なものを取り出すソフト
などがあります。
現在Beta版ですが、将来いろいろなものが追加されていくと思います。
(4)Widget:(Beta)ウィジェット
ウィジェット関係のものです。ウィジェットはYahoo!が進めているJavaScriptをベースとして作成されている、小さくて便利なプログラムです。「Yahoo!ウィジェットエンジン」と呼ばれるものをパソコンにインストールすると「ウィジェット」と呼ばれるプログラムをデスクトップ上で使えるようになります。ウィジェットはいろいろなWeb上のツールをアクセスすることができます。Widget部品は、ウィジェットの作成を手助けするライブラリーです。
CSS resource:スタイルシート
スタイルシート関係のものです。
- CSS Reset:スタイルシートの初期化を担当します
- CSS Base:CSSの基本となる部分が含まれます
- CSS Font:フォント関するCSSのサポートです
などを含みます。スタイルシートはこれからのWebアプリケーション作成に重要な位置を占めるようになると思います。
Developer tools:開発ツール
ページ作成時に便利なツールをまとめたものです。Console(Beta)・Profiler・Testなどがあります。
Profilerは動作中のプログラムがどの処理をどういった順序で実行したかを監視します。TestはJavaScriptのテストフレームワークです。デバッグを容易にします。
プログラムを作成するのは「作成4、デバッグ6」と言われるくらい、実行テスト(デバッグ)は大事です。実行中に思わぬバグを見つけることがあります。どれだけデバッグをやったかで、作成されたプログラムの完成度は変わってきます。開発用のツールが整備されることはとてもありがたいことです。

