Javascript ES5,6 の新機能（letとconst,アロー関数,クラスなど）

公開日： 2020/05/29 : javascript

Javascript let const アロー関数クラス

ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript の標準規格のこと。ECMASCript5は2009年12月、ECMASCript6（正式名ES2015）は2015年に標準化された。
今回はそこから分かりにくい変数定数宣言、アロー関数、クラスなどをメモっておこうと思います。

let と const

Javascript の変数宣言は var のみだったが、ES6 から let と const が採用された。

var、let、const の使い分け

var：変数の使用開始を明示的に宣言
let：ブロックの中だけで有効な局所変数宣言
const：定数宣言

var、let、const 再宣言と再代入

var a = 1;
let b = 1;
const c = 1;
var a = 2; // 再宣言OK
let b = 2; // 再宣言エラー
const c = 2; // 再宣言エラー
a = 3; // 再代入OK
b = 3; // 再代入OK
c = 3; // 再代入エラー

var、let、const ブロックスコープ

let と const はブロック｛｝内のみで有効になる。

{
    var a = 1;
    let b = 2;
    const c = 3;
}
console.log(a); // 1 (出来る)
console.log(b); // undefined (出来ない)
console.log(c); // undefined (出来ない)

関数

デフォルト引数

引数を省略した場合のデフォルト値を指定できる。

function f(a, b = 2) { return a + b; }
console.log(f(1));//デフォルト値が2なので3が出力される

可変長引数

個数が変動する引数。関数に渡された全ての引数を arguments で取得できる。

var f = function(){
    for(let i = 0; i < arguments.length; ++i){ 
        console.log(arguments[i] * 2);
    }
};
f(0, 1, 2, 3);//0246

アロー関数

アロー関数は関数をより短く記述できる。

function () {} //通常関数
 ↓ 省略
() => {} //アロー関数

// 通常の無名関数
var f = function (a, b) { return a + b; };
 ↓ 省略
// アロー関数にできる
const f = (a, b) => { return a + b; };
 ↓ 省略
// 単一式の場合は｛｝やreturn を省略できる
const f = (a, b) => a + b;
 ↓ 
// ｛｝やreturn を省略してオブジェクトを返したい場合はカッコ()で囲む
const f = (a, b) => ({ sum: a + b });

// 通常の無名関数
function (a) { return a + 2; };
 ↓ 省略
// アロー関数 引数が1個の場合は ( ) を省略可
a => { return a + 2; }

// 通常の無名関数
function () { return 10; };
 ↓ 省略
// アロー関数 引数が0個の場合は ( ) が必要
() => { return 10; }

※ 通常の関数では this の値は呼び出される時に決まるが、アロー関数では関数が宣言された時に確定するので注意。

クラス

クラスの定義

定義の方法は「クラス宣言文」と「クラス式」の2種類あります。

class クラス名 { }; //クラス宣言文
const 変数名 = class クラス名 { }; //クラス式
const 変数名 = class { }; //クラス式でクラス名の省略形

クラスの基本例

class Myclass {
    constructor(a, b) { //初期化関数コンストラクター
        this.a = a;
        this.b = b;
    }
}
let obj = new Myclass(1, 2);
console.log(obj.a);// 1

コンストラクタ(constructor)はオブジェクトを生成する際に最初に呼ばれるメソッド。
class 自身はインスタンスオブジェクト(this)に代入される。

メソッド

class Myclass {
  f1(a) {
    this.a = a;
  }
  f2() {
    return this.a;
  }
}
var obj = new Myclass();
obj.f1("test");
console.log(obj.f2());//test

スタティックメソッド(static)

スタティック関数は、new でオブジェクトを生成しなくても呼び出すことができるメソッドです。

class Myclass {
  static f1() {
    console.log("test");
  }
}
Myclass.f1();    // test

ゲッター(getter)とセッター(setter)

ゲッターはプロパティとしてアクセスされた場合に実行される。
セッターはプロパティに値を代入された際に実行される。

class Myclass {
  get f1() {
    return this._a;
  }
  set f2(a) {
    this._a = a;
  }
}
var obj = new Myclass();
console.log(obj.a); // プロパティアクセスなので getter メソッドが呼ばれる
obj.a = "test"; // 代入なので setter メソッドが呼ばれる

外から直接読み書きしてほしくないプライベート的なプロパティを _（アンダーバー）を付けた書き方は、見やすくするだけのよく使われるルールで特に特性はない。

プロトタイプ(prototype)

定義済のクラスに変数やメソッドを追加することができる。

class Myclass { }
Myclass.prototype.f1 = "test1";
Myclass.prototype.f2 = function() {
  console.log("test2");
}
var obj = new Myclass.();
console.log(obj.f1); // test1
obj.f2(); // test2

継承(extends)

class Myclass {
  f1() { console.log("test1"); }
}
class Exclass extends Myclass {
  f2() { console.log("test2"); }
}
var obj = new Exclass();
obj.f1(); // test1
obj.f2(); // test2