Help us understand the problem. What is going on with this article?

ざっくりECMAScriptとBabelの話

More than 1 year has passed since last update.

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等のポリフィルが必要
otsukayuhi
ゆめみ所属のフロントエンドウェブデベロッパーです。藤子・F・不二雄先生を尊敬する、キーボードマニアでもあります。
https://otsukayuhi.app/
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away