【JavaScript】次世代JavaScript技術「ECMAScript2015」とは？

ECMAScriptとは？

ECMA Internationalによって標準化されたJavaScriptです。

現在は、2015年6月に採用された第6版であるECMAScript2015(ES2015)または、ECMAScript6(ES6)が最新版です。

ECMAScriptのバージョン履歴

バージョン	リリース年月	説明
1	1996年
2	1998年6月
3	1999年12月	単一のJavaScriptをＨＴＭＬに読み込ませるという方式でした。
4	放棄	2008年に廃止されて、今では幻のバージョンとなっている。FlashのActionScriptとして採用された。
5	2009年11月
6(2015)	2015年6月
7

ECMAScript2015の特徴

ECMAScript2015は、端的に言えば、これまで見慣れてきたようなJavaScriptコードとは見栄えが大きく変化しています。

具体的には下記のような特徴を持ちます。

Javaのようにclass定義が可能になった。

もともと、そうだったのですが、より直感的に「オブジェクト指向プログラミング」を行えるようになりました。

従来のオブジェクト指向の記述もできますが、ECMAScript2015の書き方も覚えておきましょう。

なお、変更のポイントとしては、JavaやC#のようにクラスベースのオブジェクト指向の書き方ができるようになった点です。

class命令の追加

コンストラクタの定義について

コンストラクタの名前は、「constructor」で固定になります。

なお、Javaのように、アクセス修飾子(public,protected,private)は使えないので注意です。

classで作成されたクラスの特徴

あくまでクラスではなく、プロトタイプベースの関数である

内部的には関数であり、あくまでプロトタイプベースのオブジェクト指向を覆い隠すというイメージの使い方になります。

関数としての呼び出しはできない。

class命令で定義されたクラスは、直接関数として呼び出すことはできないので注意です。

あくまで、new演算子を使って呼び出すことになります。

import/export文によるコードのモジュール化をサポート

詳しくは下記の記事でも解説しています。

【JavaScript】「ECMAScript2015」から導入された「モジュール」について

アロー関数、引数のデフォルト化、可変長引数等のサポート

アロー関数については、下記の記事で解説しています。

【JavaScript】「アロー関数」について

let/const命令によるブロックスコープの導入

for…of命令による値の列挙が可能に。

イテレータ/ジェネレータによる列挙可能なオブジェクト操作が可能になった。

組み込みオブジェクトが拡充された。（Promise,Map,Set,Proxy等）

String,Number,Array等の既存組み込みオブジェクト機能が拡張された。

ECMAScript2015の注意点

全てのブラウザが対応しているわけではない点は注意です。

ES5以前の文法も取り入れていくとよいでしょう。

ECMAScript2015のブラウザ対応状況を確認するには？

「ECMAScript 6 compatibility table」で各ブラウザの対応状況を確認できます。

https://kangax.github.io/compat-table/es6/

Firefox、Chrome、Edge等は、対応率が高いですが、IE11やSafariでは、対応率が低いです。

ECMA2015で作ったコードを以前のブラウザで動かすには？

トランスコンパイラを使います。ES6で作ったコードをES5以前のコードに変換することができます。例としては下記のようなものがあります。

• Babel
• Webpacker

Webpacker

Ruby on Railsで標準で使われているトランスコンパイラです。