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

ES(ECMAScript)とは?jsがブラウザによって動いたり動かなかったりするのはなぜ?

概要

・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で書いてた)。
ということがあるかと思います。

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

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

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

参考

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

minato-naka
アジアクエスト株式会社(福岡オフィス) PHP/Laravel/AWS/Vue.js/Docker
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