ES2015(ES6)のクラス、アロー関数の基礎

前書き

Reactを使用するためにES6に関する知識が必要だったので、最低限の知識としてクラスとアロー関数について、簡単な例を通してまとめる。

クラス

class Person {

  // クラスの構造を決める
  constructor(name,age){
    this.namae = name; // nameをthis.namaeに設定。
    this.toshi= age// ageをthis.toshiに設定。二つの属性を持ちました。
  }

  // クラス内にメソッドを作ってみる。
  sayHello(){
        console.log("Hello");
  }

  sayName() {
    console.log(this.namae);
  }

  sayAge(){
        console.log(this.toshi);
  }

  // このメソッドはstaticで設定してみる。
  static sayBye(){
    console.log("バイバイ")
  }
}
// クラスの利用はこんな感じ。構造はconstructorで確認しよう。
let me = new Person("太郎",18);
// メソッドを呼び出す
me.sayHello(); // Hello
me.sayName(); // 太郎
me.sayAge(); // 18

// 一つだけstaticで設定しました。これはクラス名から呼び出す。
Person.sayBye(); // バイバイ

// 継承
// クラス:Personと同じ機能を持つクラスを作る。
class Student extends Person{
}

// 呼び出してみよう。
let you = new Student("花子",18);
you.sayName(); // 花子
// Personと同じ機能を持っている。

// さらに継承。機能を加えたり、改変してみよう。
class club_member extends Person{

    // constructorにclubを加える。
    constructor(name, age, club){ 
    super(name, age); // これでname,ageに関してはPersonと同じ設定を引きつぐ。
    this.club = club; // 属性:clubを追加。
  }

  // メソッドを追加してみる。
  sayClub(){
    console.log(this.club);
  }

  // メソッドを上書きしてみる。オーバーライド。
  sayAge(){
        console.log("今"+this.toshi+"歳です");
  }
}

let him = new club_member("一郎",17, "卓球部");
him.sayClub(); // 卓球部
him.sayAge(); // 今17歳です

アロー関数

// アロー関数を使わない書き方
let Hello = function(day){
    console.log("今日は" + day + "日です。こんにちは");
}
Hello(12); // 今日は12日です。こんにちは

// これもあるね
function goodMorning(day){
    console.log("今日は" + day + "日です。おはよう");
}
goodMorning(21); // 今日は21日です。おはよう

// これをアロー関数で書いてみよう
let goodEvening = (day) => {
    console.log("今日は" + day + "日です。こんばんは");
}
goodEvening(31); // 今日は31日です。こんばんは

// 一行で収まるならこれでもいい。
let goodNight = (day) => console.log("今日は" + day + "日です。おやすみ");
goodNight(13); // 今日は13日です。おやすみ

// 変数が一つなら()がなくてもいい。
let goodEvening = day => {
    console.log("今日は" + day + "日です。こんばんは");
}
goodEvening(31); // 今日は31日です。こんばんは

// アロー関数を使うとthisに関する挙動がちょっと変わるぞ
let typeA = {
  val: "ドラゴン",
  show: function(){    
    let A = function (){
        console.log(this); // thisの値には何が入っているでしょうか
    }
    A();
  }
}
typeA.show(); //Windowの情報が出る。 ※ブラウザで動作させた場合

let typeB = {
  val: "ドラゴン",
  show: function(){  
    let B = () => {
        console.log(this); // thisの値には何が入っているでしょうか
    }
    B();
  }
}

typeB.show(); // {val: "ドラゴン", show: ƒ()}
// このようにthisの挙動が変化する。

以上です。thisが簡単に宣言元を参照できる点でアロー関数の利点が大きいです。