概要
・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