最近、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)』になります。
公式へのリンクはこちらです。
- ECMAScript 2015 Language Specification – ECMA-262 6th Edition
- ECMAScript® 2016 Language Specification
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
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る