【JavaScript/TypeScript】JavaScriptのオブジェクトとTypeScriptのクラス

【JavaScriptのオブジェクトついて】

◆オブジェクト
・名前の付いた値（プロパティ）を格納する入れ物。
→つまり、名前（プロパティ名）と値（プロパティ値）を持つプロパティを格納する

◆メソッド
・オブジェクトの中で関数オブジェクトを持つプロパティ
→要するにオブジェクトの中に格納された関数=メソッド

◆コンストラクタ関数
・あらかじめ決められたオブジェクトを生成するテンプレート
→たい焼きを例にするなら、たい焼き器の型

◆Object()オブジェクト
・Object()コンストラクタを使って生成されたオブジェクト

◆インスタンス
・コンストラクタ関数を用いて生成されたオブジェクト
→コンストラクタ関数を用いてオブジェクトを生成することをオブジェクトの「インスタンス化」という
→たい焼きを例にするなら、たい焼き器の型であるコンストラクタ関数によって焼かれた（生成された）各々のたい焼きのようなもの。

◆オブジェクト関数の2つの生成方法
(1)オブジェクトリテラルでの生成

//オブジェクトリテラルでのオブジェクトの生成

//右辺でオブジェクトを生成して、左辺の変数に代入する
//area()は、オブジェクトの中の関数なので、メソッド

var triangle = {height: 10, base:5, area() {
return this.height * this.base
* 0.5 }
};

window.alert("三角形の面積は、" + triangle.area());

(2)コンストラクタ関数を利用した生成

//コンストラクタ関数を利用したオブジェクトの生成

//コンストラクタ関数を作成
var triangle = function(height, base) {
    this.height = height;
    this.base = base;
    this.area = function() { 
        return this.height * this.base * 0.5;};
    
};
var triangleArea = new triangle(10, 5);
window.alert("三角形の面積は、" + triangleArea.area());

【TypeScriptのクラスついて】

◆クラス
・インスタンスを生成するためのテンプレート
→たい焼きを例にするなら、たい焼き器の型

◆インスタンス
・クラスによって生成されたオブジェクト
→たい焼きを例にするなら、たい焼き器の型であるクラスよって
焼かれた（生成された）各々のたい焼きのようなもの。

//クラスを用いてインスタンスを生成

//クラスの定義
class Triangle {
    //プロパティ（変数）の宣言
    height: number;
    base: number;
    //メソッド（関数）の宣言
    area() {
        return this.height * this.base * 0.5;
    };
};

//クラスを用いてtriangleAインスタンスを生成
var triangleA = new Triangle();
//プロパティの値を設定
triangleA.height = 10;
triangleA.base = 5;


//クラスを用いてtriangleBインスタンスを生成
var triangleB = new Triangle();
//プロパティの値を設定
triangleB.height = 20;
triangleB.base = 10;

//triangleAとtriangleBを　に表示させる。

/*Triangleという1つのクラスをもとにtriangleBと
triangleAという2つの値の異なるインスタンスが生み出された。
*/

window.alert("triangleAの面積は" + triangleA.area() + "、" + "triangleBの面積は"+ triangleB.area());

参考文献
Cody Lindley　著、和田祐一郎　訳（2013）『開眼！ JavaScript――言語仕様から学ぶJavaScriptの本質』オライリージャパン

わかめまさひろ（2014）『TypeScriptリファレンス Ver.1.0対応』インプレスジャパン

参考にさせていただいたサイト
羽山博（2016）「TypeScriptで学ぶJavaScript入門：第12回　クラスの利用」,
<http://www.ne.jp/asahi/coffee/house/ARG/compass-028.html> 2016年8月28日アクセス.