STAFF BLOG スタッフブログ

JavaScript と ES(ECMAScript) の話

モダンな Javascript を書くための第一歩

ECMAScript とは

フロントエンドで JavaScript を使っている方は ES6 や ES2015 などの表記を見たことがあると思います。
ES は ECMAScript(以下、ES) の略で各ブラウザに実装される JavaScript の仕様そのもので、
TC39 という仕様策定委員会が最終的に決定しています。

表記と正式名称は以下の通り。

Edition 正式名称 リリース
ES8 ES2017 2017年6月
ES7 ES2016 2016年6月
ES6 ES2015 2015年6月
ES5.1 ES5.1 2011年6月
ES5 ES5 2009年12月
ES1 ES1 1997年6月

何故同じ言語でブラウザによって対応状況が違うのか

ES で決定した言語仕様を元にそれぞれのブラウザが JavaScript を実行するのに使っている
JavaScriptエンジンに実装していきます。
Webkit や Blink といったレンダリングエンジンと同様ブラウザ毎に違っているのでどこまで実装してるかが異なってきます。

Chrome, Node.jsV8
SafariJavaScriptCore
FireFoxSpiderMonkey
IEChakra

実装が早く、ブラウザの自動アップデートをする Chrome の V8、
実装も遅く、古いバージョンを使ってるユーザーの多い IE の Chakra といったイメージです。

実装されていない機能を使いたい場合

モダンなフロントエンドツールを使おうとすると ES6(ES2015) 以降などを要求されるケースが多々あります。
例えば ES6 からは ES Modules が使えるのでモジュールを読み込んで使うような規模のコードになると
ほぼ必須になってくる機能があります。
(これに関しては 2018/07 時点では IE 以外ほぼ実装されています。)

この問題に関しては、トランスパイラの Babel を使えば ES6 で書かれたコードを、
どのブラウザでも実装されているES5 で書かれたものに変換できます。
(それでもダメな一部の機能には polyfill ライブラリも提供されています。)
Babel の使い方については NodeSchool の教材で tower-of-babel が公開されています。

Babel を使うことを想定した AltJS という JavaScript の拡張言語も存在していて、
静的型付けをサポートする TypeScript やFlow などがあります。
今では TypeScript を推奨するプロジェクトも増えてきており、ESのバージョン解決以外にも欠かせないツールになりつつあります。

ES で仕様の確定していない機能を使う

他にも Babel を使えば最新の ES に含まれていない策定中の機能を使用することもできます。

ECMAScriptの策定プロセスは

Stage状態
0Strawman - アイデア
1Proposal - 提案
2Draft - ドラフト
3Candidate - 実装候補
4Finished - 実装予定
となっており、ステージが低いものは実装されなかったり、仕様が大きく変更される可能性があります。

この辺りは使ってるモジュールで要求されて導入することもあります。
その時新しいものを使いたくて入れる分はいいのですが、
1年もすると ES2015 stage-0 だったり ES2016 だったりして仕様も若干違うし
気軽に使うのは個人的にはあまりおすすめしません。

まとめ

・新しい JavaScript は他の言語の長所も取り入れられていて書きやすいし、ES2015の壁は大きい。
・IE でうまく動かないといった状況になる可能性があるぐらいなら Babel(polyfill有り) 通したほうが手軽で安心。
・AltJSも使えるし、minify するのに Gulp 使うぐらいなら手間は増えない。

INDEXブログ一覧へ
CONTACTお問い合わせはこちら