概要

・ESとはECMAcriptの略
・ESとはJavaScriptの標準規格のこと
・jsはもともと標準規格がなく、各ブラウザで仕様の違いがちょこちょこあったらしい
・ECMA Internationalという団体により、jsの標準規格が作成された
・そのES仕様に従って、各ブラウザベンダーがブラウザに機能を実装する

直近のESバージョン

直近リリースされているESバージョンはこんな感じ。

・ES5：2009年末にリリース
・ES5.1：2011年6月にリリース
・ES2015(ES6)：2015年6月にリリース
・ES2016：2016年6月にリリース
・ES2017：2017年6月にリリース
・ES2018：2018年6月にリリース
・ES2019：2019年6月にリリース

ほぼ全部のブラウザで動くのがES5。
いま標準になっているのがES6。
それ以降は毎年新バージョンがリリースされ、
年号をバージョン名としている。

ESバージョンで何が変わるのか

ESのバージョンが上がると具体的に何が変わるのか。
より書きやすく便利な文法が追加されたり、
便利な標準ライブラリが追加されたりする。

ES5とES6の例でメジャーなものだけをピックアップ。

アロー関数

ES5ではこのように書いていた。

var arrow = function arrow() {
  return 'アロー関数';
};

これをES6ではこのように書くことができる。

var arrow = () => {
    return 'アロー関数';
};

分割代入

ES5ではこのように書いていた。

var firstName = '田中',
    lastName = '一郎';

これをES6ではこのように書くことができる。

var [firstName, lastName] = ['田中', '一郎'];

Math

標準ライブラリとしてMathが追加された。

Math.abs(x)で絶対値を返したり、
Math.ceil(x)で切り上げしあり、
いろいろ便利な計算処理機能を提供している。

このほかにもいろいろと、
便利な記法や関数、ライブラリなどが追加されている。

各ブラウザの対応状況

ES最新バージョンがリリースされたからと言って、
全てのブラウザがその最新ES機能を使えるわけではない。

ブラウザAでは最新ESの機能がすべて実装されているが、
ブラウザBではES5までの機能しか使えない。
のようなことがある。

各ブラウザごとにどのESバージョンに対応しているのかを
このサイトでチェックすることができる。
http://kangax.github.io/compat-table/es6/

または、このサイトでは
使いたい機能をキーワードで検索し、
各ブラウザの対応状況を確認することができる。
https://caniuse.com/#search=arrow

IEはES5までしか対応していない

ここで重要なのは、
主要ブラウザである
Chrome、FireFox、Safari、Edgeなどは
基本的にES6以上に対応しているのに対し、
IEはES5までしか対応していないということ。

つまり、
上述したarrow関数や、Mathライブラリなど、
ES6の便利な機能を使って開発を進めていたが、
IEで動作確認したら全然動かなかった。
ということが起きてしまう。

IEへの対応方法

ES6の便利な機能をたくさん使って実装したいが、
IEでも動作する必要がある。
とか
ESの事情など知らずに実装してしまい、
最後に動作確認してみたらIEだけ全然動かなった（知らずにES6で書いてた）。
ということがあるかと思います。

そのような状況を解決してくれる
polyfillとbabelという便利なツールがあります。

ES6を使って効率的に開発を進めたうえで、
polyfillやbabelなどのツールを使ってIEに対応する。
というやり方が割と一般的なようです。

具体的な機能、使い方は個別記事を参照。
polyfill、babelとは？jsをどのブラウザでも動くようにしてくれる。（IE対応）

参考

https://www.sejuku.net/blog/100946
https://qiita.com/rifutan/items/a55f132d4dae7e2f1941
https://qiita.com/rana_kualu/items/1f98c1a642102f48aa78