JavaScriptでクラスを定義する方法を勝手に定義

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

JavaScriptはプロトタイプベースの言語なので、
自由度が高すぎてクラスを実現する方法が色々とあります。

C/C++やJavaなどを学んでJavaScriptに流れてきた人は書き方の違いに
戸惑った経験があるのではないでしょうか?

私はその口です。
毎回どう書こうか迷ったり戸惑ってしまったりしてしまうので、
自分がよく採用している描き方をまとめてみました。

sample

実際のプログラムです。
http://tm-labo.com/laboratory/finding/define-class-definition/

Vector2クラスを定義(script.js)

/**
 * @author phi
 */

// ネームスペース
var TM = {};


/**
 * Vector2 class
 */
(function(namespace){
    // ネームスペース
    // 指定がなかった場合デフォルトでグローバル(window)に追加する
    namespace = namespace || window;
    
    // コンストラクタ
    var Vector2 = namespace.Vector2 = function(x, y){
        this.x = x || 0;
        this.y = y || 0;
    }
    
    // プロトタイプ
    // ここでメンバ変数(プロパティ)やメンバ関数を宣言&定義する
    Vector2.prototype = {
        // --------------------------------
        // property list
        // --------------------------------
        x:0,
        y:0,
        
        // --------------------------------
        // function list
        // --------------------------------
        // 長さ
        length:function(){
            return Math.sqrt(this.x*this.x+this.y*this.y);
        },
        // 文字列に変換
        toString:function(){
            return '(' +this.x+', '+this.y+')';
        },
        // エレメントに書き込む
        writeToElement:function(element) {
            element.innerHTML += this.toString() + "<br />";
        },
        // パラメータをアラート
        alert:function(){
            alert(this.toString());
        }
    }
    
    // スタティックなメンバを定義
    // オブジェクトを生成しなくても使える変数や関数です
    Vector2.className   = "Vector2";
    Vector2.version     = "1.0.0";
    Vector2.detail      = 
        "ためしに作ってみたVector2クラスです。\
        あくまでクラス定義のサンプルなので、\
        normalizeがないとか内積、外積は??\
        といったツッコミはなしでお願いしますw";
        
})(TM);

// 下記を書けば"TM."を付けなくても使えるようになる
// window.Vector2 = TM.Vector2;

    

TMというネームスペースにVector2というクラスを定義しています。
いつもこんな感じでオブジェクト指向を実現しています。

使用例(index.html)

<!DOCTYPE html>
    
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Define class definition</title>
        
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                var vector_list = [];   // 配列
                
                // ベクトル2クラスを生成
                for (var i=0; i<32; ++i) {
                    vector_list.push(new TM.Vector2(Math.random()*100, Math.random()*100));
                }
                
                // クラス名を表示
                var class_name_element = document.getElementById("class-name");
                class_name_element.innerHTML += TM.Vector2.className;
                
                // クラスの情報を表示
                var class_info_element = document.getElementById("class-info");
                class_info_element.innerHTML += TM.Vector2.detail;
                
                // エレメントを取得
                var msg_element = document.getElementById("message");
                
                // x,yを表示しまくる
                for (var i=0; i<vector_list.length; ++i) {
                    msg_element.innerHTML+=(i+1)+". ";
                    vector_list[i].writeToElement(msg_element);
                }
            }
        </script>
    </head>
    
    <body>
        <h1>Define class definition</h1>
        <p>
            勝手にクラス定義の方法を定義してみました。
        </p>
        
        <h2 id="class-name"></h2>
        <p id="class-info"></p>
        <div id="message"></div>
        
        <hr />
        <a href="/">Home</a>
    </body>
</html>
    

Vector2のx, yの値をダダァーっと羅列するだけのプログラムですが、
このxとyの値をプレイヤーや敵の座標として使ったりすれば、
少しはクラス定義した意味を感じられるのでは?と思います。

なにかアドバイス、質問いただけるとうれしいです。

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT

  • TM Life より:

    […] GCもあるしってことで、前回書いたクラスを定義にnew […]

  • yamashita より:

    大変、解りやすいソース説明で勉強になります。早速ですが、お願いがあります。
    Titaniumの開発環境からenchant.jsとgameファイルをインポートとする方法が
    解りません。是非、初期段階での設定方法を説明して頂ければ嬉しいです。
    後、Titanium以外でも構いませんがゲームが動くまでの設定を書いて頂ければ助
    かります。では、宜しくお願い致します。以上

    • phi より:

      参考になったみたいで良かったです.
      Titanium は dom という概念がないので内部的に dom を使っている enchant.js を使うのは難しいですね.
      役に立てなくてスイマセン.

      一応, 以前 enchant.js を使ってゲームを作る流れは以前ブログにまとめてたので
      リンク貼っておきますね.
      http://tmlife.net/programming/javascript/enchant-js-game-create.html
      PC の Webブラウザでも iPhone の Web ブラウザでも動きます.

      また何かあれば気兼ねなく聞いてくださいな♪