.png)
はじめに
DojoツールキットではJavaScriptのオブジェクト指向開発を助けるために、JavaScriptの言語仕様を拡張しています。本記事では、その基本となるDojoツールキットでのクラス宣言や継承の方法を解説します。
この記事では、Dojoツールキットの利用方法を既に知っていることを前提にしています。
JavaScriptのオブジェクト指向とは？
JavaScriptと言えば「スクリプト言語」「関数」「HTMLの付属品」というようなイメージが強いと思います。しかし、JavaScriptでもオブジェクト指向開発が可能なことを皆さんはご存じでしょうか。
オブジェクト指向という言葉を聞いて、オブジェクト指向を知っている人なら何を思い浮かべるでしょうか。多くの場合「クラス」「継承」「インスタンス」「クラス変数」「クラスメソッド」「抽象クラス」というようなことを思い浮かべるに違いありません。しかし、JavaScriptのオブジェクト指向はこれとは違う概念で動作するようになっています。
JavaScriptでは、ほとんどのものをオブジェクトとして扱っています。リテラル、変数、メソッドさえもオブジェクトです。オブジェクトには参照名と値があり、複合物や配列を作ることもできます。複合物は { と } で囲んだ、名前:値を並べたものとなります。間をカンマ「,」で分けます。配列は [ と ] で囲み、間をカンマ「,」で分けます。項目に名前は付けられません。
people1 = {
name : "米持幸寿",
getName : function() {
return this.name;
}
}
methods = [
function() { /* なんらかの処理 */ },
function() { /* なんらかの処理 */ },
function() { /* なんらかの処理 */ }
]
クラスのようなものを作りインスタンス化することもできます。その場合、コンストラクターとなる関数を定義し、その中にクラス変数やクラスメソッドを定義していきます。また、「プロトタイプ」という機能があり、この機能を利用すると継承が可能ですし、メソッドを差し替えることができますのでメソッドのオーバーライドが可能、ということになります。
しかし、これらはどちらかと言うと「手作り」感たっぷりのオブジェクト指向です。一般的にオブジェクト指向言語として知られているC++、Java、C#のような宣言型のオブジェクト指向言語とは違う感覚でプログラミングをしますし、そもそもそういうことを考慮しなくても使える点が、JavaScriptがオブジェクト指向言語としてあまり認知されない理由かもしれません。
この記事はprototypeを基本としたJavaScriptのオブジェクト指向を学んでもらおうというものではないので、これくらいでやめておきます。ポイントは「JavaScriptのオブジェクト指向は、よく知られているものとは何か違う」ということです。
クラス宣言「dojo.declare」
Dojoツールキットでは、コアライブラリにおいてJavaScriptの言語仕様を拡張し、一般的なオブジェクト指向言語に似た形でオブジェクト指向開発（クラス宣言やインスタンス化）を実現できるようにしています。
Dojoツールキット（コア）がロードされていると、JavaScriptにおいて「dojo.declare」関数でクラス宣言をすることができます。
これで、いくらか一般的なオブジェクト指向に近い形になります。すこし蛇足になりますが、Javaで書くとしたらこうなるでしょう。
package myModule;
public class myClass extends myBaseClass {
public myProp= "";
public myClass(??? myProp){
this.myProp = myProp;
…
}
public ??? myFunc(){
…
}
}
dojo.declareを使う場合、名前に接頭語（プリフィクス、名前空間、みたいなもの）を付けることができるようになります。例えば、yone.MyClassのようにです。
さて、では実際に動くコードで動作を確認していきましょう。sample01.htmlを見てください。dojo.require の直後にdojo.declareがあります。ここでは、yone.MyClassが宣言されます。何も継承していないので二番目の引数にnullが指定されています。コンストラクターもクラス変数もクラスメソッドもありません。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラスの定義：1ファイルバージョン</title>
<script type="text/javascript" src="../dojo-release-1.1.1/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.declare(
"yone.MyClass",
null,
{
}
);
dojo.addOnLoad(function(){
dojo.connect(dojo.byId("button1"), "onclick", function(){
var myClass = new yone.MyClass();
alert(myClass);
});
});
</script>
</head>
<body>
<div dojoType="dijit.form.Button" id="button1">クラス生成</div>
</body>
</html>
このコードでは、ロードされたときにdojo.declare()が呼ばれ、yone.MyClassが実行されます。ボタンをクリックするとnewされ、そのオブジェクトが生成されalertで表示されます。実行すると次のようになります。
