このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第15回

どこよりも早い「Yahoo! UI Library 3」(YUI 3)入門

2009年10月15日 12時46分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「古籏一浩のJavaScriptラボ」の第15回です。過去の記事も合わせてご覧ください。

YUI 3

 最新のライブラリーや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)

fig1-1.png
YUIの公式サイト

●Yahoo! UI Library ver 3
http://developer.yahoo.com/yui/3/


fig1-2.png
簡単なアニメーションのサンプルドラッグドロップのサンプル

 この連載では、今回から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の登場時と同じく、順次追加されていくはずです。

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

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング