SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 YUI3は処理をモジュールという形で提供しています。ユーザーは、モジュールを指定して、その中に含まれているメソッドやプロパティを使ってプログラムを組んで行きます。今回と次回で、YUI3のコアと呼ばれる部分をみていきます。今回は、その中でもノードとイベントについて説明したいと思います。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ノード(DOMのサポート)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4832 2010/02/19 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング