クラスを作ろう！ (1/5)

JavaScriptでは、オブジェクトを作成する方法はいろいろとありました。普通にnew Objectしてからプロパティやメソッドを追加することもありますし、コンストラクタ関数を作って利用することもあります。

が、こうした方法は、一般のオブジェクト指向言語ではあまり使われません。もっとも多いのは、「クラス」と呼ばれるものを使った方法です。

クラスというのは、オブジェクトの設計図となるものです。ECMAScript 6という新しいJavaScriptの仕様から、このクラスは使えるようになりますが、TypeScriptはそれを先取りしているといってよいでしょう。

クラスの中には、JavaScriptのオブジェクトでもおなじみの「プロパティ」や「メソッド」などを用意しておくことができます。このクラスをあらかじめ用意しておき、そのクラスを元にオブジェクトを作成することができます。コンストラクタ関数と似ていますが、クラスにはコンストラクタ関数にはない様々な機能が用意されています。

このクラスは、以下のような形で作成します。

class クラス名 {

    ……プロパティの宣言……

    ……メソッドの宣言……

}

classの後にクラスの名前をつけ、その後の{}内にクラスに用意するプロパティやメソッドを記述します。プロパティは、JavaScriptのコンストラクタ関数などと同じく、ただ変数の宣言を用意するだけでOKです。

ただし、メソッドはちょっと違います。メソッドは、「関数の定義から最初のfunctionをとったもの」と考えると良いでしょう。引数や返値などは、普通の関数と同様に定義できます。

こうして用意したクラスは、「new」を使ってオブジェクトを生成できます。JavaScriptの「new Object」と同じような感覚で「new クラス」すればオブジェクトが作成されます。

クラスから作成されたオブジェクトは、一般に「インスタンス」と呼ばれます。クラスを定義し、newでインスタンスを用意して利用する、これがTypeScriptの基本です。

では、簡単な例を挙げておきましょう。MyObjectクラスを用意し、setNameで名前を設定し、printでメッセージを取り出して表示しています。MyObjectクラスの中に、nameプロパティ、setNameメソッド、printメソッドといったものが用意されていることがわかるでしょう。

また、new MyObjectした後、setNameやprintを呼び出している部分を見て下さい。このあたりはJavaScriptのオブジェクトとまったく同じであることがわかるはずです。同じオブジェクト内にあるプロパティやメソッドを呼び出す場合は「this」を使うのもJavaScriptと同じです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

class MyObject {
    name:string;
    
    setName(n:string){
        this.name = n;
    }

    print():string {
        let msg:string = '<h1>My name is ' + this.name + '.</h1>'
        return msg;
    }
}

var obj: MyObject = new MyObject();
obj.setName('Taro');
document.write(obj.print());