【JavaScript入門】クラスの定義方法（ES2015より前）

ES2015のclassが使えない環境での、クラスの定義方法をまとめました。

本当は最新のブラウザでclassが使えれば、それにこしたことはないのですが、諸事情によりレガシー対応しなきゃいけない場合、こちらの方法でclassを定義します。

プライベートメンバについてはこちらに記載しています。

ES2015より前のClass定義方法

Class定義のポイントは３つ

1. プロパティ

クラスで定義した変数のことです。

静的プロパティ、インスタンスプロパティがあります。

静的プロパティ
クラスをインスタンス化しなくても使用できます。
なので、インスタンス全体で共有する用途で使用します。

インスタンスプロパティ
インスタンス化しないと使用できません。
なので、各インスタンスごとに管理したい値に使用します。

2. メソッド

クラスに持たせる機能（関数）のことです。

prototypeを使用して定義します。

静的メソッド、インスタンスメソッドがあります。

静的メソッド
クラスをインスタンス化しなくても使用できます。
なので、インスタンス全体で共有する機能で使用します。
なお、静的メソッドからインスタンスプロパティにはアクセスできません。

インスタンスメソッド
インスタンス化しないと使用できません。
なので、インスタンス変数を使用して行う処理に使用します。

3. コンストラクター

クラスをインスタンス化した時の初期化処理を定義します。

以下では、車クラスを例にどのようにクラスを定義するかみていきます。

車クラスの仕様（かなりざっくりです）

＜プロパティ（変数）＞
① 燃費【静的プロパティ】
② ナンバー【インスタンスプロパティ】
③ 残燃料【インスタンスプロパティ】

＜メソッド（機能）＞
④ 燃費をコンソールに出力【静的メソッド】
⑤ ナンバーの値をコンソールに出力【インスタンスプロパティ】
⑥ 燃費と残燃料から、走行可能距離（km）を計算【インスタンスプロパティ】

＜その他＞
⑦ 燃料は全ての車インスタンスで共通（15km）
⑧ ナンバーと、残燃料は車インスタンス生成時に設定（コンストラクター）

Classの定義例

// Carクラスを定義
var CarClass = function( number, remainingFuel ) { // ⑧ コンストラクター
  // インスタンスプロパティ
  this.number = number; // ② ナンバー
  this.remainingFuel = remainingFuel; // ③ 残燃料
};

// 静的プロパティ
CarClass.fuel = 15 // ①、⑦ 燃費

// 静的メソッド ④
CarClass.showFuel = function(){
  console.log('燃費：' + CarClass.fuel);
}

// インスタンスメソッド ⑤、⑥
CarClass.prototype = {
  showNumber : function(){
    console.log(this.number); // ナンバーを表示
  },
  calcTravelableDistance : function(){
    return this.remainingFuel * CarClass.fuel; // 走行可能距離
  }
};

// 静的メソッドを実行
CarClass.showFuel();

// Carクラスをインスタンス化
var car1 = new CarClass('1234',30);

// インスタンスメソッドを実行
car1.showNumber(); // ナンバーをコンソールに表示
console.log(car1.calcTravelableDistance());  // 走行可能距離を表示

// Carクラスを定義

var CarClass = function( number, remainingFuel ) { // ⑧ コンストラクター

// インスタンスプロパティ

this.number = number; // ② ナンバー

this.remainingFuel = remainingFuel; // ③ 残燃料

};

// 静的プロパティ

CarClass.fuel = 15 // ①、⑦ 燃費

// 静的メソッド ④

CarClass.showFuel = function(){

console.log('燃費：' + CarClass.fuel);

}

// インスタンスメソッド ⑤、⑥

CarClass.prototype = {

showNumber : function(){

console.log(this.number); // ナンバーを表示

calcTravelableDistance : function(){

return this.remainingFuel * CarClass.fuel; // 走行可能距離

}

};

// 静的メソッドを実行

CarClass.showFuel();

// Carクラスをインスタンス化

var car1 = new CarClass('1234',30);

// インスタンスメソッドを実行

car1.showNumber(); // ナンバーをコンソールに表示

console.log(car1.calcTravelableDistance()); // 走行可能距離を表示

と、上記のコードをみて、ぴーんときた方は、以下の説明は見なくても大丈夫かと思います。

JavaScriptのクラス定義は、function関数を使用して行います。

プロパティの定義

静的プロパティの定義は、以下のように行います。

// 静的プロパティ
CarClass.fuel = 15 // ①、⑦ 燃費

1 2	// 静的プロパティ CarClass.fuel = 15 // ①、⑦ 燃費

書式

クラス名.変数名 = 値;

1	クラス名.変数名 = 値;

インスタンスプロパティの定義は、以下のように行います。

var CarClass = function( number, remainingFuel ) { // ⑧ コンストラクター
  // インスタンスプロパティ
  this.number = number; // ② ナンバー
  this.remainingFuel = remainingFuel; // ③ 残燃料
};

var CarClass = function( number, remainingFuel ) { // ⑧ コンストラクター

// インスタンスプロパティ

this.number = number; // ② ナンバー

this.remainingFuel = remainingFuel; // ③ 残燃料

};

書式

this.変数名 = 値;

1	this.変数名 = 値;

ここでのthisはインスタンス自身を指します。

メソッドの定義

静的メソッドの定義は、以下のように行います。

// 静的メソッド ④
CarClass.showFuel = function(){
  console.log('燃費：' + CarClass.fuel);
}

// 静的メソッド ④

CarClass.showFuel = function(){

console.log('燃費：' + CarClass.fuel);

}

書式

クラス名.メソッド名 = function(引数は任意){処理};

1	クラス名.メソッド名 = function(引数は任意){処理};

引数は任意の数指定できます。静的メソッドからインスタンス変数にはアクセスできない点に注意です。

インスタンスメソッドの定義は、以下のように行います。

// インスタンスメソッド ⑤、⑥
CarClass.prototype = {
  showNumber : function(){
    console.log(this.number); // ナンバーを表示
  },
  calcTravelableDistance : function(){
    return this.remainingFuel * CarClass.fuel; // 走行可能距離
  }
};

// インスタンスメソッド ⑤、⑥

CarClass.prototype = {

showNumber : function(){

console.log(this.number); // ナンバーを表示

calcTravelableDistance : function(){

return this.remainingFuel * CarClass.fuel; // 走行可能距離

}

};

書式（複数定義する場合は、カンマ（,）で区切ります）

クラス名.prototype = {
  メソッド名 : function(){
    処理;
  }
};

クラス名.prototype = {

メソッド名 : function(){

処理;

}

};

コンストラクタの定義

// Carクラスを定義
var CarClass = function( number, remainingFuel ) { // ⑧ コンストラクター
  // インスタンスプロパティ
  this.number = number; // ② ナンバー
  this.remainingFuel = remainingFuel; // ③ 残燃料
};

// Carクラスを定義

var CarClass = function( number, remainingFuel ) { // ⑧ コンストラクター

// インスタンスプロパティ

this.number = number; // ② ナンバー

this.remainingFuel = remainingFuel; // ③ 残燃料

};

書式

var クラス名 = function( 任意の引数 ) {
  処理;
};

var クラス名 = function( 任意の引数 ) {

処理;

};

メソッドの実行方法

静的メソッド

インスタンス化しなくても使用することができます。

// 静的メソッドを実行
CarClass.showFuel();

1 2	// 静的メソッドを実行 CarClass.showFuel();

このように、クラス名.メソッド名で簡単に使用することができます。

インスタンスメソッド

クラスをインスタンス化して、インスタンスから呼び出します。

// Carクラスをインスタンス化
var car1 = new CarClass('1234',30);

// インスタンスメソッドを実行
car1.showNumber(); // ナンバーをコンソールに表示
console.log(car1.calcTravelableDistance());  // 走行可能距離を表示

// Carクラスをインスタンス化

var car1 = new CarClass('1234',30);

// インスタンスメソッドを実行

car1.showNumber(); // ナンバーをコンソールに表示

console.log(car1.calcTravelableDistance()); // 走行可能距離を表示

このように、インスタンス名.メソッド名で簡単に呼びだすことができます。

まとめ

ES2015より前の世界の、JavaScriptのクラス定義方法について記載しました。

全体を通してのポイントは、以下になります。

① Class自体は、function(){} を使用して定義する。

② ①のfunctionの定義内容がコンストラクタとなる。

③ プロパティは変数、メソッドは機能を定義する。

④ 静的〜は、インスタンス化せず、クラスオブジェクトからそのまま使用できる。

⑤ インスタンス〜は、インスタンス化したのち使用することができる。