ECMAScript について調べてみた

最近、ECMAScript2015 や ES6 などの言葉をよく聞くようになってきたので、復習も兼ねて、ECMAScript について調べてみました。

ECMAScript とは？

ECMAScript とは、標準化団体である Ecma International が策定している、JavaScript の標準規格のことです。

開発当初の JavaScript は、各ベンダーのブラウザによって独自拡張が数多く実装されており、互換性が低かったため、Ecma International が中心となり標準規格である ECMAScript が策定されました。

ECMAScript 6 / 2015 って何？

正式名称は『ECMAScript 2015』（省略して『ES2015』とも呼ばれる）。

リリースは2015年6月。

ECMAScript の 6th Edition である為、当初は『ES6』と呼ばれていたが、正式名称を『ECMAScript 2015』とし、今後年単位のリリースとし、バージョンを年（ES2017, ES2018, ...）にしていく予定のようです。

なお、最新のバージョンは2016年6月にリリースされた『ECMAScript 2016（ES2016）』になります。

公式へのリンクはこちらです。

ES2015 の新機能

ES2015 で追加された主な機能は下記になります。

let ・ const キーワードによる変数宣言
クラス構文
アロー関数
分割代入
配列展開
可変長引数
関数のデフォルト引数
テンプレート文字列

ここから1つひとつ見ていきましょう。

`let` ・ `const` キーワードによる変数宣言

これまでの var で変数を宣言した場合と違い、let ・ const で変数を宣言すると、その変数のスコープは宣言したブロック内になります。

if (1) {
    var foo = 'foo';
    let bar = 'bar';
    const baz = 'baz';
}

console.log(foo);  // foo
console.log(bar);  // エラー
console.log(baz);  // エラー

また、const は定数を宣言したい時に使用され、const で宣言された変数は、宣言時を除いて値の代入が不可能になります。

var foo = 'foo';
let bar = 'bar';
const baz = 'baz';

foo = 'foo2';  // 代入可能
bar = 'bar2';  // 代入可能
baz = 'baz2';  // エラー

クラス構文

ES2015 以前までは、prototype を利用することで、クラスのようなものを作成していました。

function Human(name) {
    this.name = name;
}

Human.prototype.hello = function () {
    console.log('私の名前は ' + this.name + ' です。');
};

obj = new Human('enomotodev');
obj.hello();
//=> '私の名前は enomotodev です。'

これをクラス構文を使用すると

class Human {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('私の名前は ' + this.name + ' です。');
    }
}

obj = new Human('enomotodev');
obj.hello();
//=> '私の名前は enomotodev です。'

このように書くことができます。

extends を使用してクラスの継承を行うことも可能です。

class Human {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('私の名前は ' + this.name + ' です。');
    }
}

class Engineer extends Human {
    constructor(name) {
        super(name);
        this.occupation = 'エンジニア';
    }
    hello() {
        super.hello();
        console.log('職業は ' + this.occupation + ' です。');
    }
}

obj = new Engineer('enomotodev');
obj.hello();
//=> '私の名前は enomotodev です。' 
//=> '職業は エンジニア です。'

なお、上記のように子クラスでは super() で親クラスの constructor の実行、super.メソッド名() で親クラスのメソッドの実行ができます。

アロー関数

これまでの funciton を使った関数宣言に加えて、=>（アロー）を用いた関数宣言が可能になりました。

アロー関数による関数宣言の特徴としては、

引数が1つの場合は () が省略可能
関数の中身が単一式の場合は、{} や return を省略できる

というものになります。

// これまでの function を使った関数宣言
var foo = function(x, y) {
  return x * y;
};

// アロー関数
var bar = (x, y) => {
  return x * y;
};

// 単一式の場合は {} や return を省略可能
var baz = (x, y) => x * y;

// 引数が1つの場合は () が省略可能
var qux = x => x * 2;

分割代入

複数の変数に、複数の値をまとめて代入できるようになりました。

// これまで複数にの変数に代入する場合
var foo = 'abc';
var bar = 123;

// 分割代入を使用した場合
var [foo, bar] = ['abc', 123];

配列展開

関数の呼び出し、配列への代入などに対して、... を使用することにより、配列を展開して使用する事ができるようになりました。

関数の呼び出し

var array = [1, 2, 3];
var foo = function(x, y, z) {
    console.log(x, y, z);
}

f(...array);
//=> 1 2 3

[1, 2, 3] という配列を展開しているので、f(...array) は foo(1, 2, 3) という引数での関数 foo の呼び出しと同じになります。

配列への代入

var array = [1, 2, 3];
var foo = [...array, 4, 5, 6];

console.log(foo);
//=> [1, 2, 3, 4, 5, 6]

可変長引数

関数を定義する際に、... を使用することによって、引数に可変長引数を指定することができるようになりました。

var foo = function(x, ...args) {
    console.log(x, args);
};

foo('a', 'b', 'c');
//=> a ["b", "c"]

foo('a', 'b', 'c', 1, 2, 3);
//=> a ["b", "c", 1, 2, 3]

foo('a');
//=> a []

デフォルト引数

関数宣言時に変数に代入を行うことで、デフォルト値を設定できるようになりました。

var foo = function(a, b = 1) {
  console.log(a + b);
};

foo(10);
//=> 11

テンプレート文字列

`` で文字列を囲むことで、文字列内での変数展開が ${} で行うことができ、改行もそのまま反映することができるようになりました。

var name = 'enomotodev';
var hello = `私の名前は
${name} です`;

console.log(hello);
//=> 私の名前は
//=> enomotodev です

ES2016 の新機能

ここまで ES2015 で追加された主な機能を確認してきましたが、ES2016 の新機能についても見ていきましょう。

べき乗演算子
Array.prototype.includes() メソッド

べき乗演算子

これまでべき乗の計算は、Math.pow() を使用してきましたが、** で簡単に記述できるようになりました。

// これまでの場合（2の5乗）
var foo = Math.pow(2, 5);

console.log(foo);
//=> 32

// ** を使用した場合（2の5乗）
var bar = 2 ** 5;

console.log(bar);
//=> 32

`Array.prototype.includes()` メソッド

Array.prototype.includes() メソッドは、配列内にある要素が含まれているかどうかを調べるためのメソッドです。

var foo = [1, 2, 3, 4, 5];

// 配列に 1 が含まれているかどうか
console.log(foo.includes(1));
//=> true

// 配列に 6 が含まれているかどうか
console.log(foo.includes(6));
//=> false

まとめ

新機能の紹介がメインとなりましたが、ES2015（ES6）と ES2016 について改めて調べてみました。

もちろん他にもたくさんの新機能がありますので、改めてきちんと学び直してみるのも良いと思います。

一部のブラウザによっては未対応の機能もあるので、Babel などを使いコンパイルする必要がありますが、それらについてはまた別の機会に記事にしたいと思います。

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

作者: Stoyan Stefanov,牧野聡
出版社/メーカー: オライリージャパン
発売日: 2017/03/11
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る