Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

Yahoo! UI Library Ver.3 を使ってみよう(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:Yahoo! UI Library Ver.3 を使ってみよう

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5