ECMAScript6(ES6,ES2015）におけるクラスについて

ECMAScript6(ES6,ES2015）について

簡単に言うとECMAScriptとはJavaScriptのバージョンのことですね。

以前に書いた「ストップウォッチを作る」でのコードにおいては、ECMAScript5の文法にて書かれています。

ES6では進化してバグが発生しにくい書き方であったり、同じ処理を少ないコード量で書けるようになったりしています。

ES5に比べてES6の主な変更点はこちらです。

const / let

テンプレートリテラル

アロー関数

関数のデフォルト引数

分割代入

クラス

promise

クラスについて

クラスはオブジェクトの考え方と密接に関係しているので、オブジェクトについておさらいします。

オブジェクトはプロパティ（データ）とメソッド（操作）をまとめている概念です。

例えば、Stringオブジェクトはlengthというプロパティ持っています。またtoUpperCaseというメソッドを持っています。

const str = new String(‘test’);
console.log(str.length);
console.log(str.toUpperCase());

console.log(str.length);では文字数として４と表示されます。
console.log(str.toUpperCase());では大文字にしてTESTと表示されます。

クラスについて

オブジェクトを作る一つの方法です。クラスを作ることによって次のルールを定義できるようになります。

・クラスが所有している変数（プロパティ）を明示する。

・クラスで利用できる関数（メソッド）を明示する。

クラスを定義すると先に出てきた「new」というキーワードでオブジェクトを作れます。

クラスを使うことでプログラムを適切な形で分割したり、再利用しやすくできます。

クラスの基本

クラスはclass宣言によって定義します。続くTestはクラスの名前として扱われます。そして{～}がクラスの中身になります。

次にメソッドを定義してみます。このときfunctionは書きません。今回は平均値を求めるのでavg()としました。

クラスはインスタンスを変数に代入して、初めて使えるようになります。インスタンス化（実体化）とはクラスを使えるように実体化することです。

var a1 = new Test();newを使い、その次にクラス名を書き、それを変数に代入します。するとインスタンス化されクラスが使えるようになります。

メソッドを使うには、a1.avg();とします。

class Test {
avg(){
console.log((80+70) /2);
}
}
var a1 = new Test();
a1.avg();

コンソールで確認してみて下さい。正しく75と表示されると思います。

引数を入れる

class Test {
avg(english,math){
console.log((english + math) /2);
}
}
var a1 = new Test();
a1.avg(90,90);

これなら変数a1が変わっても、クラスの書き換えが必要なくなり、クラスを使いまわすこともできるようになります。

コンソールで確認してみて下さい。正しく90と表示されると思います。

プロパティについて

プロパティとはクラス内で定義された変数のことです。

プロパティ

class Test {
avg(english,math){
console.log((english + math) /2);
}
}
var a1 = new Test();
a1.name = “taro”
a1.avg(90,90);
console.log(a1.name)

コンソールで確認してみて下さい。メソッドでの90とプロパティでのtaroが表示されます。

コンストラクタについて

プロパティはインスタンスごとに存在し、インスタンスの数が増えると同じ数だけプロパティを定義する必要になり面倒になります。

そこで便利なのがコンストラクタです。コンストラクタはインスタンス化されるときに呼び出されるメソッドです。

別名、初期化メソッドとも呼ばれます。インスタンス化すれば必ず呼び出されるメソッドになります。

あとから作るプロパティを初期化メソッドでつくっておけば楽になります。

thisはインスタンス化されたオブジェクト自身を示している変数です。

コンストラクタ

class Test {
constructor(){
this.name = “”;
}
avg(english,math){
console.log((english + math) /2);
}
}
var a1 = new Test();
a1.name = “taro”
console.log(a1.name)

var a2 = new Test();
console.log(a2.name)

あなたもコードを書いてみてコンソールで確認してみて下さい。

a1.nameで定義したtaroと、まだ定義してないa2ではthis.name=””とした空の値が表示されると思います。

わからないことはプロフェッショナルから学ぶのが一番