JavaScriptでもクラスが記述出来ます。クラスという概念は、オブジェクト指向の要ですが、オブジェクト指向の心は、「再利用」にあります。ですからJavaScriptも再利用に便利な記述が使えるようになったと理解しておきましょう。
この記事ではJavaScriptでのクラス記述方法と利用例について詳しく説明します。
JavaやC#などのオブジェクト指向言語同様にclassが宣言出来るようになったのです。（カッコいい!）
しかし、まだまだ発展途上のようです。なぜなら現時点でのJavaScriptのclass宣言は、functionによる宣言の置き換えだからです。
ですからコンストラクタのオーバーロードが出来なかったり、プロパティ変数のカプセル化など出来ません。（と、今言った用語が？？？の方は、この記事をご覧になって大丈夫です）
JavaScriptでのクラス（class）宣言方法
クラスとは、設計図のようなものです。
最低限必要なものは、クラス名です。
// クラスの中身
}
Hogeというクラスを作るなら以下のようにします。
// クラスの中身
}
ただし、クラスHogeは、設計図なのでこのままでは、実行できません。
利用するには、new演算子を使ってクラスをインスタンス化します。
クラス（設計図）を元に実体化することを意味します。
C言語などの変数宣言をイメージすると分かり易いです。
int a;
の場合、intという型をaという変数名を通して利用できるようにしています。
ここでいう変数aをインスタンス、intをクラスととらえると分かり易いと思います。
クラスHogeをインスタンス化するには、次のようにします。
これ以降、hogeというインスタンス変数を通してHogeクラスを利用できるようになります。
hogeは、変数名同様プログラムする人が付ける名前です。let a = new Hoge();でも問題ありません。
クラスHogeは、中身が何もありませんでした。（わたしと同じ）
実際のクラスは、new演算子を使ってインスタンス化したときに1度だけ実行するコンストラクタ（constructor）や特定の処理を記述したメソッド、クラス内で利用できる変数プロパティなどから成っています。
ですから一般的には、JavaScriptのクラス定義は、次のようになります。
class クラス名{
constructor(引数1, 引数2, ....省略可能){
// クラスをインスタンス化したときに1回だけ実行する処理
// プロパティ（クラス内で使用できる変数）もここで宣言する
:
}
メソッド名(){
// メソッドの処理
:
}
}
実際に利用しないと分かりませんよね。
次の項目で簡単なクラスを作って、プログラムから利用してみます。
クラスを使った基本的なプログラム
長方形を表すクラスBoxを考えてみます。
機能として、長方形の縦と横の長さから面積をコンソールに表示するメソッドをクラスに含めてみます。
こんな感じです。
/* Box.js : 長方形クラス*/
class Box{
// コンストラクタ（クラスをインスタンス化＜new＞したときに実行される処理）
constructor(width, height){
this.width = width; // 幅
this.height = height; // 高さ
}
// メソッド（インスタンスを通して呼び出すことができる関数）
showMenseki(){
console.log(this.width * this.height); // 面積をコンソールに表示
}
}
このクラスを利用するには、以下のようにします。
let box = new Box(100, 200); box.showMenseki();
実行結果（コンソールに表示）
20000
解説
let box = new Box(100, 200)としてクラスBoxをインスタンス化しています。
これ以降、boxというインスタンスを通してBoxクラスにアクセスできます。
この時点でconstructorの引数widthには100が、heightには200が代入されます。
constructor内の処理に注目してください。
this.height = height;
this.widthとthis.heightは、プロパティと呼びます。
クラスBox内で利用できる変数です。
変数名の手前にthis.をつけるとJavaScriptでは、そのクラス内で利用できる変数であるプロパティ扱いとなります。（ちなみにプロパティは、クラスのメソッド内でも宣言可能です）
this.widthとthis.heightには、それぞれ100と200が代入されることになります。
このようにコンストラクタの引数を使って、そのクラスに値を受け渡すことが可能です。
showMensekiメソッドでは、コンソールに面積を表示しています。
クラス内では、constructor内で定義したプロパティを利用することが可能です。
メソッドは、関数と同じ考え方で利用できますので、戻り値（return文）の利用も可能です。
次の例を見て下さい。
クラスのメソッドが戻り値を持つ場合
先ほどのクラスBoxの面積を表示するメソッドshowMensekiの部分を、面積の値を返すgetMensekiに変更してみました。
return文で呼び出し元に幅×高さの計算結果を返しています。
/* Box.js : 長方形クラス*/
class Box{
// コンストラクタ（クラスをインスタンス化＜new＞したときに実行される処理）
constructor(width, height){
this.width = width; // 幅
this.height = height; // 高さ
}
// 面積を返すメソッド
getMenseki(){
return ( this.width * this.height );
}
}
この場合、利用例としては、次のような形になるでしょう。
let box = new Box( 100, 200 );
console.log("面積は、" + box.getMenseki() );
最後に「再利用」を考慮したクラスの利用例を示します。
再利用を考えたクラスの例（MyDateクラス）
日付を取得できるDateオブジェクトというものがJavaScriptに存在します。
西暦や月日、時分秒などは、割と簡単に取得できるのですが、曜日に関しては数値での取得しかできません。
日曜日の場合「0」月曜なら[1」。
日本人なら曜日を「月」とか「土」などのように取り出せると便利です。
そこで曜日の取得をクラス記述を利用して日本語で取得できるようにしてみます。
MyDateクラス定義
/* 日付クラス*/
class MyDate{
// コンストラクタ
constructor(){
let myDate = new Date();
this.year = myDate.getFullYear();
this.month = myDate.getMonth() + 1;
this.date = myDate.getDate();
const week = ["日", "月", "火", "水", "木", "金", "土"];
this.day = week[myDate.getDay()];
}
// メソッド
getYear(){ // 年を返す
return this.year;
}
getMonth(){ // 月を返す
return this.month;
}
getDate(){ // 日を返す
return this.date;
}
getDay(){ // 曜日を返す
return this.day;
}
getToday(){ // 「2020年7月24日(水)」の形式で返す
return (this.year + "年" + this.month + "月" + this.date + "日" + "(" + this.day + ")" );
}
}
利用例
let date = new MyDate();
console.log("今日は" + date.getMonth() + "月" + date.getDate() + "日の" + date.getDay() + "曜日です");
console.log(date.getToday());
実行結果
今日は2月19日の火曜日です
2019年2月19日(火)
再利用ということを考えるとクラスMyDateの部分をMyDate.jsなどと別ファイルで保存しておき、利用するHTMLファイルのheadタグ内で、
<script src="MyDate.js" type="text/javascript"></script>
とすれば色々なサイトで再利用できます。
実際の利用例とプログラムは、以下で確認できます。
参考文献
ちなみにECMAScript 2015で新たに導入されたJavaScriptの機能は、以下の記事に分かり易く書かれていました。
参考
ECMAScript 2015(ES6)の概要と次世代JavaScriptの新たな機能 – HTML5Experts.jp
MDNのサイトには、クラスについての詳しい説明とサンプルがあります。
一度目を通しておくと良いです。
クラス – MDN
コメント