Dojo道場 ～ 第8回「コンポジット・ウィジェットでコンポーネント・プログラミング」

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

　本稿では、オープンソースのJavaScriptライブラリ「Dojo Toolkit」の既存ウィジェットを組み合わせて、アプリケーションが必要とする機能を提供するコンポジット・ウィジェットを作成する例を紹介します。

はじめに

　前回の記事ではカスタム・ウィジェットの作成を通して、ウィジェットの基本的な仕組みやテンプレートの活用方法を紹介しました。

　ある程度以上の規模のアプリケーション開発においては、Dojo Toolkitのウィジェットのようなコンポーネント・ベースのプログラミングが重要な要素となります。コンポーネント化は単に再利用性を高めるだけではなく、プログラムの責任範囲を明確にしたり、関連したコードをまとめることで、プログラムの見通しがよくなり、機能追加、問題修正、保守などにおける生産性の向上につながります。

　特に、Webアプリケーションのユーザー・インターフェースは、HTML、CSS、JavaScriptを組み合わせて実装するため、これらのコードを適切に関連付け、管理できるウィジェットはキーのコンポーネント技術になります。また、ユーザー・インターフェースのコンポーネント化では、下位のコンポーネントを組み合わせて上位のユーザー・インターフェースを実現するコンポジット・コンポーネントを実装する手法が広く行われています。

　今回の記事では、既存のウィジェットを組み合わせて、アプリケーションが必要とする機能を提供するコンポジット・ウィジェットを作成する例をご紹介します。

テンプレートの利用

　ここで例にとるのは、アプリケーション画面の一部に表示するコメント送信フォームを実現するウィジェットです。このウィジェットは、コメントと名前を入力して、ボタンをクリックすることで、AJAXを利用して、サーバーにコメントを送信する機能を提供するものとします。まずは、前回同様、テンプレートの機能を利用して、ウィジェットの大まかなレイアウトをデザインします。以下のような HTMLとJavaScriptのコードにより、コメント送信ウィジェットのベースを作成します。

リスト1. レイアウトのみのテンプレートHTML (examples/widget/templates/CommentForm.html)

<div>
    <div>
        <textarea>コメント</textarea>
    </div>
    <div>
        <input value="名前"/>
        <button>コメント送信</button>
    </div>
</div>

リスト2. テンプレートを利用したウィジェット・コード (examples/widget/CommentForm.js)

dojo.provide("examples.widget.CommentForm");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("examples.widget.CommentForm", [dijit._Widget, dijit._Templated], {
    // テンプレートHTMLの指定
    templateString: dojo.cache("examples.widget", "templates/CommentForm.html")
});