SHOEISHA iD

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

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

「Dojo道場」~実用アプリ構築のためのベストプラクティス

Dojo道場 ~ 第7回「カスタム・ウィジェット作成のためのウィジェット・ライフサイクル詳説」

「Dojo道場」~実用アプリ構築のためのベストプラクティス


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

 本稿では、Dojoのウィジェット・フレームワークが定義するウィジェットのライフサイクルの中で、重要となる幾つかのメソッドを解説し、簡単なカスタム・ウィジェットを例に、具体的にどのようなプログラミングが必要になるのかを紹介します。

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

はじめに

 DojoはWebアプリケーションを開発するために必要な豊富なウィジェットを提供していますが、実際に本格的なWebアプリケーションを開発する場合、提供されているビルトインのウィジェットをそのまま利用するだけでは要件を満たせないことが多々あります。そのような場合の解決策の一つとして、カスタム・ウィジェットを自作することが考えられます。カスタム・ウィジェットを作るには、ウィジェットがどのように生成され、最終的に廃棄されるか、いわゆるライフサイクルを正しく理解しておくことが重要です。

 本稿では、Dojoのウィジェット・フレームワークが定義するウィジェットのライフサイクルの中で、重要となる幾つかのメソッドを解説し、簡単なカスタム・ウィジェットを例に、具体的にどのようなプログラミングが必要になるのかを紹介します。

 なお、既にDojo 1.6がリリースされており、サンプル・ファイルはDojo 1.6でも動作することは確認済みですが、本稿の内容はDojo 1.5のものとなっていることをご了承ください。必要に応じて補足を追加していますが、Dojo 1.6でライフサイクルに関しての大きな変更はありません。また、サンプル・ファイルの実行方法については、『Dojo道場 ~ 第1回「グラフを使いこなす(前編)」』を参照してください

ウィジェットを動作させるには

 まずはじめに、Webブラウザ上でウィジェットを動作させる方法を簡単に解説します。ウィジェットはHTML、CSS、およびJavaScriptから成る、Webブラウザ上で動くユーザー・インターフェースの部品です。ウィジェットをWebブラウザ上で動作させるには、JavaScriptのコードで構築する(Programmatic)場合と、HTML上に宣言的に構築する(Declarative)場合の2通りがあります。

 JavaScriptのコードで構築する場合はnewオペレータでオブジェクトを生成し、HTMLの特定の場所に挿入します。ウィジェット自体はJavaScriptのオブジェクトですが、ウィジェット・フレームワークがdomNodeという、その名のとおりDOMのNodeをプロパティとして自動的に生成するので、HTML内に組み込むには以下のようなコードになります。

リスト1. JavaScriptのコードで定義する例
// Buttonオブジェクトの生成
var button = new dijit.form.Button({label: "OK"});
// 生成したDOMをHTML内に追加
dojo.place(button.domNode, dojo.body()); 
// button.placeAt(dojo.body()) や
// document.body.appendChild(button.domNode);  でも可
button.startup();

 HTMLとして宣言的に構築する場合は、以下のようにHTMLのタグにdojoTypeという属性を追加し、ウィジェットのクラス名を指定し、必要なプロパティはタグの属性として指定します。

リスト2. 宣言的に定義する例
<div dojoType="dijit.form.Button" label="OK"></div>

 どちらの場合もウィジェットのライフサイクルに応じてウィジェットが生成されます。宣言的に構築した場合は、Dojoのパーサーがリスト1に相当するJavaScriptのコードを自動的に実行すると考えればよいです。つまりウィジェットのライフサイクルはnewオペレータで開始され、通常のJavaScriptのオブジェクトと同様、constructorメソッドから始まり、次章に示すライフサイクル・メソッドが順に実行されることになります。

補足

 Dojo 1.5以前ではdojoTypeのようにHTMLには準拠しない属性を採用していましたが、Dojo 1.6ではHTML5に準拠して、カスタム・プロパティはdata-*を使用するように変更されました。今までの表記も使うことはできますが、例えばdojoTypeはdata-dojo-type、dojoConfigはdata-dojo-config、ウィジェット固有のプロパティはprop1="value1" prop2="value2"ではなく、data-dojo-props='prop1: "value1", prop2: "value2"'のように表記することが推奨されています。

ライフサイクル・メソッド

 カスタム・ウィジェットを開発する上で重要なライフサイクル・メソッドを以下に列挙します。

表1. ウィジェットのライフサイクル・メソッド
メソッド名 説明
constructor 通常のJavaScriptのオブジェクトと同様のコンストラクタメソッドです。ウィジェットのもつプロパティの初期化などを行います。
postMixInProperties ウィジェットのプロパティが挿入された後に実行されます。プロパティ値のバリデーションなどを行います。
buildRendering ウィジェットの基本となるDOMを構築するためのメソッドであり、テンプレートの仕組みを実現するためのメソッドと言っても過言ではありません。
postCreate ウィジェットの生成が終了した後に実行されます。イベント・ハンドラの定義などを行います。
startup 自分自身、および、子供のウィジェットが存在する場合は全ての子供が、HTML ドキュメントに挿入された後に実行されます。
destroy ウィジェットが廃棄される時に実行されます。特にIEなどで起こるメモリリークなどを避けるために必要な処理を行います。

 上記のライフサイクル・メソッドの内、destroy以外は全てウィジェットの生成に関わるものです。constructorはオブジェクトがnewされた時点で呼び出され、postMixInProperties, buildRendering, postCreateメソッドは、全てのウィジェットのベースクラスであるdijit._Widgetのcreateメソッド(注: Dojo 1.6ではdijit._WidgetBaseのcreateメソッド)で、順に呼び出されます。startupメソッドは、そのウィジェット、および子供のウィジェットが存在する場合は全ての子どもがドキュメントに挿入された後に実行されます。

補足

 実はどの処理をどのライフサイクル・メソッド内に記述するかは、あくまで目安に過ぎません。極端なことを言うと、ほとんどの処理をpostCreate内に記述しても問題なく動く場合もありますし、実際にそのように書かれているDojo自体のコンポーネントもあります。しかし、本稿では各ライフサイクル・メソッドのもつ元々の意味や用途を鑑み、こんな時はどのメソッドを実装すればよいかという判断の基準となるような、ベストプラクティス的な解説を目指します。

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

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

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

メールバックナンバー

次のページ
カスタム・ウィジェットの作成例

修正履歴

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

手島 拓也(テジマ タクヤ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所に勤務。現在は、検索およびテキスト解析ソフトウェア製品のUI開発を担当。

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

井上 基晴(イノウエ モトハル)

日本アイ・ビーエム株式会社 ソフトウェア開発研究所。現在は主にDojoを用いた製品開発を担当。

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5879 2012/01/30 11:47

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング