※この記事は「古籏一浩のJavaScriptラボ」の第15回です。過去の記事も合わせてご覧ください。
最新のライブラリーやJavaScriptの新しい活用法を紹介する「JavaScriptラボ」。今回は、9月末にリリースされたばかりの「YUI 3（Yahoo! UI Library Version 3）」を取り上げます。
Yahoo! UI Libraryとは？
「Yahoo! UI Library」（以降、YUI）はその名の通り、ユーザーインターフェース周りを得意とする米ヤフー製のAjaxライブラリーです。YUIは、Ajaxが普及し始めた2005年に登場し、面倒なUI周りを簡単に処理できることから次第に普及していきました。実は、以前取り上げたAjaxフレームワーク「Ext JS」も、もともとはYUIの機能拡張(Extension)として生まれたものです。
YUIはタブパネルやスライダー、ドラッグ＆ドロップ、アニメーション機能など、他のライブラリーやフレームワークを凌ぐ充実したUI部品と豊富な機能を備えています。Yahoo!をはじめとする大規模サイトで使用されている実績もあり、非常に動作が安定しているのも特徴です。Prototype.jsやjQuery、MooToolsなどではうまくいかない複雑なDOM操作（複雑なHTML構造でのエレメント座標値の取得など）も、YUIなら何の問題もなく実現できることも少なくありません。
YUIは非常に高性能なAjaxライブラリーですが、現在広く利用されているjQueryに比べると、手軽さに欠けます。YUIは、組み込む機能に応じてscriptタグで関連ライブラリーファイルを一式読み込まなければならないなど、煩雑な面もあり(*1)、意外と利用されていないのが実情のようです。
そうした中、YUIの新バージョン「Yahoo! UI Library ver 3」（YUI 3）の正式版が2009年9月末にリリースされました。YUI 3では設計が見直され、YUI 2.xに比べて手軽に使えるようになっています（*2）。
YUIの公式サイト
●Yahoo! UI Library ver 3
http://developer.yahoo.com/yui/3/
簡単なアニメーションのサンプル
ドラッグドロップのサンプル
この連載では、今回から3回にわたって、簡単なサンプルプログラムを作りながらYUI 3の使い方を解説します。1回目はYUI 3によるマウスオーバー／アウト処理（ロールオーバー処理）を試してみましょう。
●連載ラインナップ
- 第1回 ライブラリの読み込みとイベント処理（この記事）
- 第2回 YUI 3のアニメーション機能を使う
- 第3回 YUI 3を使ったアニメーションスライドショー
*1 途中のバージョンからサポートされたYUILoaderを使えばモジュール単位での読み込みもできます。
*2 手軽に使えるようになった反面、YUI 3はYUI 2.xとは互換性がまったくなく、YUI 2.xで用意されていた機能のほとんどは現時点では利用できません。カレンダーやタブパネル、ウィンドウなど、目立ったUIもほとんどありません。おそらくYUI 2の登場時と同じく、順次追加されていくはずです。
