ざっくりECMAScriptとBabelの話

ECMAScriptとは？

ECMAScriptは、JavaScriptを元にして標準規格化されたスクリプト言語です。

JavaScriptはNetscapeによって開発されましたが、それをベースにしたJScriptをマイクロソフトが独自に開発していたりと、互換性に乏しい状態でした。そこで、1990年代後半に、情報通信システムの分野における国際的な標準化団体であるEcma Internationalによって、JavaScriptを元にした標準規格のECMAScriptが策定されました。

ECMAScriptのバージョン

ECMAScriptは、ECMA-262という規格番号で標準化されています。
1997年に、1st editionである、ECMAScript 1が策定され、2009年に5th editionのECMAScript 5（以下、ES5）とアップデートをしてきました。
（4th editionは仕様がまとまらず、破棄されました）

2015年の6th editionから、それまでのECMAScript 番号というeditionベースの略称から、年号ベースの仕様書名で呼ばれることが推奨されるようになり、ECMAScript 2015（以下、ES2015）と表記されています。

JavaScript系のブログ等で、ES6/ES2015と、2つの表記が混在しているのは、そのためです。

また、ES2015からは毎年改訂が行われるようになり、2018年10月現在は、ES2018までが策定されています。

Babelの機能と役割

ECMAScriptは、ES5からES2015で大きく変化しました。
クラスやモジュール、イテレーター、アロー関数、分割代入等、とても便利な記法が追加されたわけですが、ECMAScriptの変化にブラウザやクローラーがピッタリとついてきているわけではありません。
たとえば、Internet Explorer 11（以下、IE11）やGooglebotのレンダリングはES5相当なので、ES2015以降のバージョンでかかれたJavaScriptは、それらの環境では正しく動作しません。

しかし、ES2015以降の便利な記法は、どんどん利用したい。。
そこで、Babelの出番です。

Babelは、ES2015〜2018の記法を、ES5に自動的に変換してくれるツールです。
（変換することをトランスパイルとも言います）

Babelを利用することにより、モダンなJavaScriptの記法を使用しながら、レガシーな環境にも対応できるわけです。
便利ですね！

Babel使用時の注意点

BabelはES2015〜2018をES5相当までトランスパイルしてくれますが、機能を追加するわけではありません。
たとえば、async/awaitとかそのまま使うと「Promiseねえよ！」って、IEで怒られたりします。
そういった場合は、@babel/polyfill等のポリフィルを使う必要があります。

まとめ

• ECMAScriptは、JavaScriptを元にして標準規格化されたスクリプト言語
• 5th editionまではES5のようにバージョン表記で、6th editionからはES2015のように年号表記
• ES2015から多くの機能・記法がついかされたが、ブラウザやクローラーが追いついていないので、レガシー環境に対応する場合はBabelでトランスパイルしてあげる必要がある
• 機能まで欲しい場合は、@babel/polyfill等のポリフィルが必要