JavaScript
ECMAScript
babel

ざっくり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等のポリフィルが必要