JavaScriptでクラスを定義する方法！

JavaScriptを記述する場合、基本的には専用のjsファイルを作成して、処理を記述するのが一般的ですね。
しかし、何も考えずに処理を記述すると下記のように関数（function）が増えていってしまいます。

function() {
alert('処理1');
}
function() {
alert('処理2');
}
function() {
alert('処理3');
}

処理内容が小さければ、上記のような記述でも問題ありませんが、処理の内容が大きいと可読性やメンテナンス性が損なわれます。

大規模なプロジェクトを経験した方であれば、JavaScript地獄なんて言葉を聞いた方も多いと思います。

私も別のプログラマーが作った10万ステップのJavaScriptの改修を任され、とても苦労した経験があります。

そこで今回は、JavaScriptをクラス定義で記述し、可読性やメンテナンス性に優れたコーディング方法を紹介します。

##JavaScriptでクラスを定義する方法

もっともシンプルな中身のないクラスを定義する方法は簡単で、ただ空の関数リテラルを代入するだけです。

var Member = function() {};

そして、インスタンス化するには、以下のように記述します。

var member = new Member();

ただし、空の関数リテラルを代入しただけなので、このインスタンス化したクラスは意味がありませんね。

そこで、もう少し一般的な使い方を考慮してクラス定義していきます。

##プロパティとメソッドを持つクラスを定義する方法

プロパティとメソッドを持つクラス定義は、下記のとおりです。

var Member = function(firstName, lastName) {
    // 名前（名）
    this.fistName = fistName;
    // 苗字（姓）
    this.lastName = lastName;

    /**
     * 名前を返却.
     * @return string 苗字（姓）と名前（名）を連結して返却
     */
    this.getName = function() {
        return this.lastName + ' ' + this.fistName;
    }
}

インスタンス化するには、以下のように記述します。

// 苗字（姓）と名前（名）を引数にクラスをインスタンス化する
var member = new Member('一郎', '鈴木');

// 名前を出力する
alert(member.getName());

以上で、苗字（姓）と名前（名）を保持し、連結した名前を返却するメソッドのクラスを定義することができました。

しかし、このクラス定義には以下の問題点があります。

• メソッドの数に比例して”無駄”なメモリを表示する

つまり実際の開発現場では、上記のようなクラス定義は行ってはダメです！！！

ではJavaScriptでクラス定義は意味ないの？

JavaScriptには、上記のような問題を解決する方法が用意されています。

実際の開発現場では、下記の方法でクラス定義を行いましょう！

##JavaScriptでクラス定義する場合はprototypeを付加する！

var Member = function(firstName, lastName) {
    // 名前（名）
    this.fistName = fistName;
    // 苗字（姓）
    this.lastName = lastName;
}

// prototypeを付加してメソッドを定義
Member.prototype.getName = function() {
    return this.lastName + ' ' + this.fistName;
}

名前（名）と苗字（姓）は今までどおり関数リテラルを記述すればOKです。

注目は、getNameメソッドを定義するときに「prototype」を付加するところです。この「prototype」を付加することで、”参照”されるようになります。

つまり、複数インスタンス化した場合でも、関数オブジェクトは暗黙的な参照を持つことになり、無駄に作られることはありません。

つまりメモリの消費を抑えることができるようになります。

ちなみに関数を定義する際に下記のように毎回prototypeを付加するのは大変ですね。。

var Member = function(firstName, lastName) {
    this.fistName = fistName;
    this.lastName = lastName;
}
Member.prototype.getName1 = function() {
    return this.lastName + ' ' + this.fistName;
}
Member.prototype.getName2 = function() {
    return this.lastName + ' ' + this.fistName;
}

そのため、複数の関数リテラルを定義する場合は、以下のように書き換えることができます。

var Member = function(firstName, lastName) {
    this.fistName = fistName;
    this.lastName = lastName;
}
Member.prototype.getName1 = {
    getName1 : function() {
        return this.lastName + ' ' + this.fistName;
    },
    getName2 : function() {
        return this.lastName + ' ' + this.fistName;
    }
}

##まとめ：JavaScriptでクラス定義する場合は、prototypeを付加して無駄なメモリを消費しないようにしよう！

JavaScriptでクラスを定義することで、可読性やメンテナンス性に優れたプログラムを記述することができます。

そして、prototypeを付加することで無駄なメモリを消費せず、スマートな定義ができるようなります。

以上、JavaScriptでクラスを定義する方法でした。