レガシーなJavaScriptのクラス

JavaScriptでクラスと言っても、現行のバージョンではclass構文が実装されていない為、 クラスを使いたい場合はレガシーな方法をとるか、フレームワークの機能やクラスライブラリを使ってクラスを定義する事になります。

今回は生のJavaScriptでレガシーなクラス（のようなもの）を書いてみる事とします。

プロトタイプを利用するタイプ

// コンストラクタ
var Person = function(name, age){
    this.name = name;
    this.age = age;
};
// 属性の定義
(function(my){
    my.name = null;
    my.age = null;
    my.hello = function(){
        return "こんにちは、{{name}}です。{{age}}歳です。"
            .replace("{{name}}", this.name)
            .replace("{{age}}", this.age);
    };
}(Person.prototype));

var john = new Person("ジョン・カビラ", 54);
john.hello(); // "こんにちは、ジョン・カビラです。54歳です。"

function の prototype に属性を生やしていき、new でインスタンスを生成します。 生成されたオブジェクトは、 prototype の中身を全て継承します。 人によって書き方や趣向がかなり異なる印象です。 jQuery等を読み込んであるならば、extendを利用しても見易くて良いかもしれません。

$.extend(true, Person.prototype, {
    name: null,
    age: null,
    hello: function(){ ... }
});

同じく $.extend で他のクラスの継承も出来ますね。

$.extend(Person.prototype, Animal.prototype);

コンストラクタ内だけで完結するタイプ

関数型などと呼ばれているのを聞いた事があります。 前項の物と大きく異るのが、プロトタイプからの継承ができない点でしょうか。

var Person = function(name, age){
    this.name = name;
    this.age = age;
    this.hello = function(){
        return "こんにちは、{{name}}です。{{age}}歳です。"
            .replace("{{name}}", this.name)
            .replace("{{age}}", this.age);
    };
};

非常に狭いスポットで使用したい場合などはお手軽で良いのかもしれませんが、 prototype を継承して新しいインスタンスを生成するのが new 演算子の本分だと思うので、 基本的にはそれに則った形をとったほうが良いかな、と考えています。

レガシーではない選択肢

昨今では新しい実装やリソースも沢山増えてきたので、選択肢が幅広くあります。

altJSを使う

ここ数年で一気に盛り上がってきた altJS はおそらくどれもクラスが実装されているはずなので、それを利用する選択肢。 ポピュラーなのは CoffeeScript、TypeScript、Haxe、JSX 等。 ネックは、いずれも大なり小なりJavaScriptから離れた構文になる為、学習コストがかかる点です。

例えば、Haxeでクラスを定義するとこんな具合になる様です。 ActionScript3（EcmaScript4）にかなり近い構文になっているので親しみを感じる人もいるかもしれませんね。

class Person {
    public var name:String;
    public var age:Int;
    public function new(name, age){
        this.name = name;
        this.age = age;
    }
    public function hello(){ ... }
}

フレームワークを使う

最近一番耳にするのは Backbone.js です。

Backbone には Model や View　などの基底クラスが実装されていて、 それを継承して独自のクラスを定義していきます。 例えば Model であれば、ゲッターセッターや Ajax まわりの機能が既に盛り込まれているので、 それらを覚えさえすれば非常に効率的にアプリケーションを制作できるでしょう。

var Person = Backbone.Model.extend({
    defaults: {
        name: null,
        age: null
    },
    initialize: function(name, age){
        this.set({ name: name, age: age });
    },
    hello: function(){ ... }
});

var person = new Person("John", 54);

参考資料

• jQuery.extend() | jQuery API Documentation
• List of languages that compile to JS · jashkenas/coffee-script Wiki
• index – Haxe
• Backbone.js

jQuery.class.js

• mach3/js-jquery-class – GitHub

Prototype.jsライクなclassを生成する為のシンプルなライブラリ。
cf ) jQueryでPrototype.js風のクラス定義をしてみる | Mach3.laBlog

更新内容

• jQuery.on/off()でイベントを扱えるようにしました

これだけです。
jQuery 1.7+ で使えるようになったon/off()メソッドに対応しました。
従来通りbind/unbindも使えます。
また、あわせて例示を大きく改めました

var Data = Class.create();
Data.prototype = {
    EVENT_ITEM_ADDED : "item_added",
    items : [],
    addItem : function(){
       for(i in arguments){
          this.items.push(arguments[i]);
       }
       this.trigger(this.EVENT_ITEM_ADDED);
    },
    getItemCount : function(){
       return this.items.length;
    }
};

var myData = new Data();
var onAdded = function(){
    console.log("Items added. I have " + this.getItemCount() + " items now.");
};

/**
 * on()でイベントリスナの追加
 * bind()でも可
 */
myData.on(myData.EVENT_ITEM_ADDED, onAdded);
myData.addItem("hoge"); // => Items added. I have 1 items now.
myData.addItem("fuga","foo","bar"); // => Items added. I have 4 items now.

/**
 * off()でイベントリスナの解除
 * unbind()でも可
 */
myData.off(myData.EVENT_ITEM_ADDED, onAdded);
myData.addItem("piyo"); // (nothing occurs)

また、少し自分でまともに運用してみて、欲しいメソッドがあれば新たに生やすかもしれません。
何かありましたらどうぞ。

HashChangeとは

たとえば、いわゆるページ内リンクで

http://www.example.com/

から

http://www.example.com/#foobar

にURLが変わったタイミングにイベントを受け取って
なんやかんやする為のもの。

わりと有名だと思われるのが、jQuery hashchange eventプラグインですね。
» Ben Alman » jQuery hashchange event

あとは、冒頭で言ったSammy.js。こちらもjQueryプラグインです。
» Sammy.js / A Small Web Framework with Class / RESTFul Evented JavaScript

車輪の再発明です

本稿は車輪の再発明です。
日々変わりゆく自分のJSの書き方をログっておくのに丁度良い題材な気がしたので。

特にクラスの書き方なんかはなかなか定まらず、ふらふらしてます。
近いうちにそこら辺もまとめておきたい物です。

書いたもの

» location.hashの変更イベントを受け取るためのもの。 — Gist

今回は敢えてjQueryから切り離した作りにしてみた。

/*!
 * HashChange.js
 * @version 1.0
 * @author mach3
 * @example
 * var foo = new HashChange();
 * foo.config({ onInit:myInitFunc, onChange:myChangeFunc, interval:100 });
 * foo.start(); // When start to observe.
 * foo.stop(); // When stop to observe.
 */

/**
 * Creates a new HashChange.
 * @constructor
 * @class observe changes of locatin.hash.
 * @param {Object} options Configuration options.
 */
var HashChange = function( options ){

    var my, vars, methods ;

    my = this;
    vars = {
        onChange : null,
        onInit : null,
        interval : 100,
        timer : null,
        hash : null
    };
    methods = {
        isFunction : function( target ){
            return typeof( target ) === "function" ;
        }
    };

    /**
     * Configure options.
     * @param {Object} options Configuration options.
     */
    my.config = function( options ){
        for( i in options ){
            if( !vars.hasOwnProperty( i ) ){ continue; }
            vars[i] = options[i];
        }
    };
    /**
     * Start to observe.
     */
    my.start = function(){
        my.run();
    };
    /**
     * Check whether location.hash has been changed or not,
     * call onInit/onChange function if set,
     * and call itself by timeout again.
     */
    my.run = function(){
        var h = location.hash;
        if( vars.hash === null && methods.isFunction( vars.onInit ) ){
            vars.onInit( h );
        } else if ( vars.hash !== h && methods.isFunction( vars.onChange ) ){
            vars.onChange( h );
        }
        vars.hash = location.hash;
        vars.timer = setTimeout( my.run, vars.interval );
    };
    /**
     * Stop to observe.
     */
    my.stop = function(){
        clearTimeout( vars.timer );
    };

    my.config( options );
};

使い方

var myHashChange = new HashChange();
myHashChange.config({
    onInit : function( hash ){
        console.log( "Initialize : " + hash );
    },
    onChange : function( hash ){
        console.log( "Change : " + hash );
    }
});
myHashChange.start();

config() でイベントリスナを含めたオプションを設定して、
start() すればlocation.hashの監視を始めます。
監視を停止したい時はstop()で。

尚、コンストラクタでもオプション受け取れます。

オプション

onInit

初期化時のイベントリスナ

onChange

location.hashが変更された時のイベントリスナ

interval

監視用タイマーのインターバル。デフォルトは100ミリ秒。

まとめ

やっぱりjQueryプラグイン！っていう感じの書き方より、
クラスベースっぽく書くのが好みみたいです。

ちょっとだけ、Prototype.jsに戻りたくなってきていたり。

基本的な形

プラグインとか書いた事もありましたが、
結局今は、こんなオーソドックスな形に収まっています。

var Person = function( name ){
    /* コンストラクタ */
    this.name = name;
};
Person.prototype = {
    name : null,
    sayHello : function(){
        console.log( "こんにちは！" + this.name + "です！" );
    }
};
var john = new Person( "まっは" );
john.sayHello(); // "こんにちは！まっはです！"

プロパティにオブジェクトを使う

オブジェクトに設定値をまとめてコンストラクタに引数で渡して～っていうのは結構頻出ですが、
プロパティにオブジェクトを使いつつ、インスタンスを複数作りたい場合は注意が必要。
普通に書いてしまうと、どのインスタンスもprototypeのメンバを参照してしまい、
或るインスタンスで値を変えると、他のインスタンスでも変わってしまうという困った事になります。

こちらの記事がわかりやすかったです。

• zudolog » prototypeでメンバにオブジェクト指定してるとハマるかも

そこで、上の記事を参考にこんな感じ書いておきます。

var Person = function( option ){
    this.option = $.extend( {}, this.option ); // 重要！
    this.setOption( option );
};

コンストラクタ一行目、optionを空のオブジェクトに格納しなおして代入しています。
こうすることで、インスタンス毎に別のオブジェクトを扱えるという寸法。なるほどなるほど。

Person.prototype = {
    option : {
        name : null,
        age : null
    },
    setOption : function( option ){
        $.extend( this.option, option );
    },
    sayHello : function(){
        console.log(
            "こんにちは！" + this.option.name + "です！" +
            "永遠の" + this.option.age + "歳です！"
        );
    }
};

var john = new Person( { name : "ジョン", age : 29 } ),
    tom = new Person( { name : "トム", age : 16 } );

john.sayHello(); // "こんにちは！ジョンです！永遠の29歳です！"
tom.sayHello(); // "こんにちは！トムです！永遠の16歳です！"

コンストラクタの一行目の処理がない場合、
上の出力結果はどちらもトム16歳になってしまいます。

カスタムイベントを使う

AS3のdispatchEventみたくカスタムイベントを利用してみます。
同じ内容を確か以前書きましたが、まとめの為、一応。

var Items = function( data ){
    this.data = $.extend( [], this.data, data );
};
Items.prototype = {
    EVENT_ADDED : "added",
    data : [],
    add : function( value ){
        this.data.push( value );
        $(this).trigger( this.EVENT_ADDED );
    },
    bind : function( type, handler ){
        $(this).bind( type, handler );
    }
};

といっても、自身を格納したjQueryオブジェクトからbind/triggerを呼び出してるだけですが…。

var MyItems = new Items;
MyItems.bind( MyItems.EVENT_ADDED, function(){
    console.log( this.data );
});

MyItems.add( "foobar" ); // ["foobar"]

イベントリスナの登録はbindを使います。
addメソッドで値を追加すると、”added”イベントに着火される仕組み。

あまり頻繁に使う事もない気がしますが。

と、こんな感じで書いておりますが、
他の方がどのように書いているのかも知りたいところですね！

ソース

mach3’s js-jquery-class at master – GitHub

あるの？ないの？console.log

引っかかったのは、インスタンスにlogメソッドを生やしている部分。
console.logの有無で分岐をした…つもりだったんですが、

if( $.isFunction( console.log ) ){ ... }

当たり前なのですが、
console.logが、というかconsoleがなければここで処理は止まってしまいます…。
なんでこんなのに気付かなかったのかというと、IE8で処理が止まらなかったから。
なぜなら、consoleもconsole.logも有るから！（実は知らなかったーー！！）

そんなわけで、条件を修正。
なんかもうちょっとスマートに書きたいですが…

typeof(console)!=="undefined" && typeof(console.log)!=="undefined"

IE8の開発者ツールをちゃんと使って無かったって事ですね。反省。
でも次からは楽になりますね！

追記 : 2013/10/13

実は、これでいいですよね。

!! window.console && !! window.console.log

この不具合、特別必要なかったオマケ機能だった事もあって、結構悔しいです…

jquery.class.js

mach3’s js-jquery-class at master – GitHub

※Prototype.jsをモデルにしていますが、実装を複製したものではありません。
ですので、本家とは細かい部分で実装が異なり、本家同様に動くわけではありません。

伝統的なPrototype.jsライクな使い方（Class.create）

基本的な定義の仕方は本家のそれに則っています。
cf) Prototype JavaScript framework: Defining classes and inheritance

クラス定義

var Human = Class.create();
Human.prototype = {
    name:null,
    age:null,
    initialize:function( name, age ){
        this.name = name;
        this.age = age;
    },
    introduce:function(){
        alert("私の名前は" + this.name + "、" + this.age + "歳です");
    }
};
var mach3 = new Human("まっは", 3);
mach3.introduce();

Class.create()が渡されたオブジェクトは、
インスタンス生成時にinitializeメソッドを実行するようになります。
勿論、引数も渡せます。

継承

var Animal = Class.create();
Animal.prototype = {
    walk:function(){
        alert("てくてく");
    },
    eat:function(){
        alert("もぐもぐ");
    }
};
var Dog = Class.create( Animal );
Dog.prototype = {
    bark:function(){
        alert("ワンワン");
    }
};

Class.create()の引数にクラスオブジェクトを渡す事で、
それを親とする派生クラスを定義する事が出来ます。

よりコンパクトな使い方（Class.get）

こちらの書き方は、本家の物とは違うのでご注意を。
引数だけで完結できるClass.get()とやらを実装してみました。

クラス定義

var Human = Class.get({
    name:null,
    age:null,
    initialize:function( name, age ){
        this.name = name;
        this.age = age;
    },
    introduce:function(){
        alert("私の名前は" + this.name + "、" + this.age + "歳です");
    }
});

prototypeを定義しなくて良い分、少しだけコンパクトに。

継承

var Dog = Class.get({
    bark:function(){
        alert("ワンワン");
    }
}, Animal );

第二引数にクラスオブジェクトを渡せば継承が出来ます。

イベント管理（bind/trigger）

イベントの管理にはjQueryのbind/triggerを利用します。
生成されたクラスインスタンスにはbind/triggerメソッドを備えてありますので、
$(this)等して別途用意しなくても呼び出す事が出来ます。

var Data = Class.get({
    ITEM_ADDED:"item_added", //イベント名の定義
    items:[],
    addItem:function( item ){
        this.items.push( item );
        this.trigger( this.ITEM_ADDED ); //イベント着火
    },
    getItemCount:function(){
        return this.items.length;
    }
});

var myData = new Data();
// bindでイベントリスナーの追加
myData.bind( myData.ITEM_ADDED, function(e){
    alert("ItemsCount : " + this.getItemCount() );
});
myData.addItem( "hoge" );

おまけ機能

bind/triggerのついでですが、
各ブラウザの開発者ツールのコンソールに出力するconsole.log()のラッパーも
log()として実装してみました。

var MyClass = Class.get({
    initialize:function(){
        this.log("Initialized !"); //Firebugのコンソールに出力
    }
});

自分用に作ったので当たり前ですが、個人的には大変使いやすいです。
色々ヒントをいただいたginpei_jp氏、nicericeさん、
この場を借りて、どうもありがとう！