Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Dojoツールキットで始めるオブジェクト指向

渋谷テクニカルナイト講師陣が語る新技術動向 第1回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/02 14:01

 DojoツールキットではJavaScriptのオブジェクト指向開発を助けるために、JavaScriptの言語仕様を拡張しています。本記事では、その基本となるDojoツールキットでのクラス宣言や継承の方法を解説します。

目次

はじめに

 DojoツールキットではJavaScriptのオブジェクト指向開発を助けるために、JavaScriptの言語仕様を拡張しています。本記事では、その基本となるDojoツールキットでのクラス宣言や継承の方法を解説します。

 この記事では、Dojoツールキットの利用方法を既に知っていることを前提にしています。

JavaScriptのオブジェクト指向とは?

 JavaScriptと言えば「スクリプト言語」「関数」「HTMLの付属品」というようなイメージが強いと思います。しかし、JavaScriptでもオブジェクト指向開発が可能なことを皆さんはご存じでしょうか。

 オブジェクト指向という言葉を聞いて、オブジェクト指向を知っている人なら何を思い浮かべるでしょうか。多くの場合「クラス」「継承」「インスタンス」「クラス変数」「クラスメソッド」「抽象クラス」というようなことを思い浮かべるに違いありません。しかし、JavaScriptのオブジェクト指向はこれとは違う概念で動作するようになっています。

 JavaScriptでは、ほとんどのものをオブジェクトとして扱っています。リテラル、変数、メソッドさえもオブジェクトです。オブジェクトには参照名と値があり、複合物や配列を作ることもできます。複合物は { と } で囲んだ、名前:値を並べたものとなります。間をカンマ「,」で分けます。配列は [ と ] で囲み、間をカンマ「,」で分けます。項目に名前は付けられません。

JavaScript のオブジェクトの例
people1 = {
   name : "米持幸寿",
   getName : function() {
      return this.name;
   }
}
JavaScript の配列の例(関数が並んでいる配列)
methods = [
   function() { /* なんらかの処理 */ },
   function() { /* なんらかの処理 */ },
   function() { /* なんらかの処理 */ }
]

 クラスのようなものを作りインスタンス化することもできます。その場合、コンストラクターとなる関数を定義し、その中にクラス変数やクラスメソッドを定義していきます。また、「プロトタイプ」という機能があり、この機能を利用すると継承が可能ですし、メソッドを差し替えることができますのでメソッドのオーバーライドが可能、ということになります。

 しかし、これらはどちらかと言うと「手作り」感たっぷりのオブジェクト指向です。一般的にオブジェクト指向言語として知られているC++、Java、C#のような宣言型のオブジェクト指向言語とは違う感覚でプログラミングをしますし、そもそもそういうことを考慮しなくても使える点が、JavaScriptがオブジェクト指向言語としてあまり認知されない理由かもしれません。

 この記事はprototypeを基本としたJavaScriptのオブジェクト指向を学んでもらおうというものではないので、これくらいでやめておきます。ポイントは「JavaScriptのオブジェクト指向は、よく知られているものとは何か違う」ということです。

クラス宣言「dojo.declare」

 Dojoツールキットでは、コアライブラリにおいてJavaScriptの言語仕様を拡張し、一般的なオブジェクト指向言語に似た形でオブジェクト指向開発(クラス宣言やインスタンス化)を実現できるようにしています。

 Dojoツールキット(コア)がロードされていると、JavaScriptにおいて「dojo.declare」関数でクラス宣言をすることができます。

図1 dojo.declareによるクラス宣言
図1

 これで、いくらか一般的なオブジェクト指向に近い形になります。すこし蛇足になりますが、Javaで書くとしたらこうなるでしょう。

リスト1 Javaで表現(※JavaScriptには引数などの型宣言がないため、???で表現しています)
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が指定されています。コンストラクターもクラス変数もクラスメソッドもありません。

リスト2 sample01.html
<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で表示されます。実行すると次のようになります。

図2 sample1の実行結果
図2 sample1の実行結果

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

著者プロフィール

  • 米持 幸寿(ヨネモチ ユキヒサ)

    日本アイ・ビー・エム公認 ソフトウェア・エバンジェリスト。alphaWorks、developerWorks、インキュベーション系製品、アセットなどのテクノロジーの推進をしつつ、テクノロジー戦略、エバンジェリストチームをリードしている。講演や執筆も多数。主な著書に「かんたんサーバーサイドJava」(...

バックナンバー

連載:渋谷テクニカルナイト講師陣が語る新技術動向

もっと読む

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