SHOEISHA iD

パスワードを忘れた場合はこちら

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

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

講座

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

大西 武

加山 恵美

WINGSプロジェクト 山田 研二

柳井 政和

Innerstudio 鍋島 理人
イベント
イベント

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

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

CodeZine BOOKS（コードジン・ブックス）は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
渋谷テクニカルナイト講師陣が語る新技術動向

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

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

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

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

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

はじめに

　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の実行結果

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

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

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

メールバックナンバー

次のページ
継承

NEXT

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
渋谷テクニカルナイト講師陣が語る新技術動向連載記事一覧

もっと読む

この記事の著者

米持 幸寿（ヨネモチ ユキヒサ）

日本アイ・ビー・エム公認 ソフトウェア・エバンジェリスト。alphaWorks、developerWorks、インキュベーション系製品、アセットなどのテクノロジーの推進をしつつ、テクノロジー戦略、エバンジェリストチームをリードしている。講演や執筆も多数。主な著書に「かんたんサーバーサイドJava」（翔泳社）、「Webサービス完全解説」（翔泳社）がある。developerWorks Japan ブログ 「米持幸寿のブログ」

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

この著者の最近の執筆記事

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine（コードジン）
https://codezine.jp/article/detail/3476 2009/02/02 14:01
" ); }

おすすめ

アクセスランキング

  1. 1
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！
  2. 2
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう NEW
  3. 3
    「イテレータ」　～マンガでプログラミング用語解説
  4. 4
    より使いやすくなったPHP 8.4の新機能──クラス定義や言語仕様とデータベース関連の強化ポイント NEW
  5. 5
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  1. 6
    Fish Shell 4.0 ベータ版リリース、C++からRustに移行 NEW
  2. 7
    簡潔でわかりやすいドキュメントを書くときに最低限押さえておくべき4つのポイント NEW
  3. 8
    JavaScriptに関する年次調査「State of JavaScript 2024」の結果が発表
  4. 9
    Mozilla、Web開発の初心者向けの学習サイト「MDN」を刷新 NEW
  5. 10
    管理職の24.1％、今後管理職を「続けたくない」と回答。理由は「責任やストレス」が最多に

アクセスランキング

  1. 1
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！
  2. 2
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう NEW
  3. 3
    「イテレータ」　～マンガでプログラミング用語解説
  4. 4
    より使いやすくなったPHP 8.4の新機能──クラス定義や言語仕様とデータベース関連の強化ポイント NEW
  5. 5
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  6. 6
    Fish Shell 4.0 ベータ版リリース、C++からRustに移行 NEW
  7. 7
    簡潔でわかりやすいドキュメントを書くときに最低限押さえておくべき4つのポイント NEW
  8. 8
    JavaScriptに関する年次調査「State of JavaScript 2024」の結果が発表
  9. 9
    Mozilla、Web開発の初心者向けの学習サイト「MDN」を刷新 NEW
  10. 10
    管理職の24.1％、今後管理職を「続けたくない」と回答。理由は「責任やストレス」が最多に
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」　～マンガでプログラミング用語解説
  3. 3
    ITエンジニア本大賞2025、投票締切直前！ みんなで選んだ歴代の大賞本を振り返って一挙紹介
  4. 4
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 5
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  6. 6
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  7. 7
    管理職の24.1％、今後管理職を「続けたくない」と回答。理由は「責任やストレス」が最多に
  8. 8
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  9. 9
    2024年の提示年収が高いプログラミング言語は？ paiza調査によるランキングが発表
  10. 10
    ランサーズ、「2024年必要とされたスキルランキング」を公開。「Lancers」上のデータを集計

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！
  2. 2
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう NEW
  3. 3
    「イテレータ」　～マンガでプログラミング用語解説
  4. 4
    より使いやすくなったPHP 8.4の新機能──クラス定義や言語仕様とデータベース関連の強化ポイント NEW
  5. 5
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  1. 6
    Fish Shell 4.0 ベータ版リリース、C++からRustに移行 NEW
  2. 7
    簡潔でわかりやすいドキュメントを書くときに最低限押さえておくべき4つのポイント NEW
  3. 8
    JavaScriptに関する年次調査「State of JavaScript 2024」の結果が発表
  4. 9
    Mozilla、Web開発の初心者向けの学習サイト「MDN」を刷新 NEW
  5. 10
    管理職の24.1％、今後管理職を「続けたくない」と回答。理由は「責任やストレス」が最多に

アクセスランキング

  1. 1
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！
  2. 2
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう NEW
  3. 3
    「イテレータ」　～マンガでプログラミング用語解説
  4. 4
    より使いやすくなったPHP 8.4の新機能──クラス定義や言語仕様とデータベース関連の強化ポイント NEW
  5. 5
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  6. 6
    Fish Shell 4.0 ベータ版リリース、C++からRustに移行 NEW
  7. 7
    簡潔でわかりやすいドキュメントを書くときに最低限押さえておくべき4つのポイント NEW
  8. 8
    JavaScriptに関する年次調査「State of JavaScript 2024」の結果が発表
  9. 9
    Mozilla、Web開発の初心者向けの学習サイト「MDN」を刷新 NEW
  10. 10
    管理職の24.1％、今後管理職を「続けたくない」と回答。理由は「責任やストレス」が最多に
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」　～マンガでプログラミング用語解説
  3. 3
    ITエンジニア本大賞2025、投票締切直前！ みんなで選んだ歴代の大賞本を振り返って一挙紹介
  4. 4
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 5
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  6. 6
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  7. 7
    管理職の24.1％、今後管理職を「続けたくない」と回答。理由は「責任やストレス」が最多に
  8. 8
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  9. 9
    2024年の提示年収が高いプログラミング言語は？ paiza調査によるランキングが発表
  10. 10
    ランサーズ、「2024年必要とされたスキルランキング」を公開。「Lancers」上のデータを集計