最新のライブラリーや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の公式サイト

簡単なアニメーションのサンプル		ドラッグドロップのサンプル

　この連載では、今回から3回にわたって、簡単なサンプルプログラムを作りながらYUI 3の使い方を解説します。1回目はYUI 3によるマウスオーバー／アウト処理（ロールオーバー処理）を試してみましょう。

---

*1　途中のバージョンからサポートされたYUILoaderを使えばモジュール単位での読み込みもできます。

*2　手軽に使えるようになった反面、YUI 3はYUI 2.xとは互換性がまったくなく、YUI 2.xで用意されていた機能のほとんどは現時点では利用できません。カレンダーやタブパネル、ウィンドウなど、目立ったUIもほとんどありません。おそらくYUI 2の登場時と同じく、順次追加されていくはずです。

ツイートする

この連載の記事

• 第53回  Mac用ウィジェットをHTML/CSSで自作
• 第52回  Web技術で作るDashboardウィジェット開発入門
• 第51回  iOS 4.2×localStorageで作るGPSレコーダー
• 第50回  HTML5 SVGで作るシューティングゲーム
• 第49回  HTML5のInline SVGをJavaScriptで操作
• 第48回  HTML5で注目！インラインSVGの使い方
• 第47回  iOS 4.2の新機能で作るHTML5+JSアプリ
• 第46回  JavaScriptでEPUBビューアーを自作してみた
• 第45回  Audio Data APIでブラウザーをシーケンサーに！
• 第44回  Firefoxでソフトシンセも作れるAudio Data APIの使い方
• この連載の一覧へ

この記事の編集者は以下の記事をオススメしています

• 古籏一浩のJavaScriptラボ

• Ext JSでGoogleマップを表示するチュートリアル

• jQueryとも共存できる「Ext JS 3.0」入門

• PhotoshopのフィルターをJavaScriptで作る！

• Web制作の現場で使えるjQuery　UIデザイン入門（目次）

• JavaScriptライブラリで作るリッチUI（まとめ）

• 29分でできる！ あのサイトの“技”を盗め

• JSで超ド派手なアニメが作れる「UIZE Framework」入門

• JS超えた!? UIZE Frameworkの特殊効果を見せます！

• 飛び出すカルーセルをUIZE Frameworkで作る（前編）

• 飛び出すカルーセルをUIZE Frameworkで作る（後編）

• JSでWeb制作を自動化するAdobe Bridge活用入門

• Adobe BridgeのJavaScriptでXMLを操作しよう

• JavaScriptでRSSからPhotoshop画像を生成！

• 画像の自動アップロードもJavaScriptにお任せ！

関連記事

• iBooks AuthorでHTML5の電子書籍作ってみた

• HTML5のゲーム開発を効率化！国産ライブラリー

• PhoneGapでiPhoneのコンパスアプリを再現

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識727 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2209 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1495 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1214 users

最新記事

• 音楽は「クックパッド」になっていく

  

• 人気のタブレット対応フレキシブルアームがスマホにも対応

  

• 「GALAXY S II」より安い！　韓国版「GALAXY S II LTE」

  

• GALAXY TabにSDカードとUSB機器を接続できるアダプター

  

• AntecのPLATINUM電源は、回路やファンもプラチナ級！