ES2015(ES6)：次世代JavaScriptはもう実戦投入出来るか？

2015年10月16日

カテゴリー：

この記事の目的

この記事は2015年10月に公開されました

次世代JavaScriptとして長らく策定中であったES2015(旧名称＝ES6：以下ES2015で統一します)ですが、2015年6月にようやく言語仕様が正式公開されました。フロントエンジニアとしては早く新しいJavaScriptを試してみたいところですよね。

現在はまだES5が主流ですが、将来的には確実にES2015が主流になるはずです。なのでフロントエンジニアにとってES2015の学習は必修科目ではあると思うのですが、どうせなら実戦投入を見据えて仕事を兼ねて学んでいきたいところです。ですがその場合は当然ながらブラウザの対応状況を考慮しなければなりません。

ブラウザの対応状況次第ではまだまだ実戦投入は先の話になるかもしれませんが、実際のところどうなんでしょうか？

今回は「ES2015はもう実戦投入出来るか？」という点に絞ってまとめてみました。私自身が今からES2015を始めるかどうかの判断をするためにまさにそこが知りたかったからです。ですので、本稿ではES2015の新たな言語仕様等については触れていません。これらは改めて別エントリとしてまとめる予定です。

「ES6 or ES2015」次のJavaScriptの正しい名称について

本稿のテーマからは少し外れるのですが、新しいJavaScript(ECMA Script)の名称について少し。

これまでは「ES6」という名前が一般的でしたが、先日の仕様公開の際には「ES2015」という名前で呼ばれていたそうなので、本稿では「ES2015」で統一します。なぜそのような呼び名に変更になったのかについては、下記サイトに詳しく説明がありましたので、一部を引用させて頂きます。

ECMAScriptを策定しているTC39は、策定に膨大な時間がかかってしまったES6の反省を活かし、今後は機能単位で策定を行い、その年にまとまった機能をES2016, ES2017と年次ベースで標準化してリリースすることを計画しています。今回の名称変更はこれに合わせたものです。

ES6 or ES2015 ? 〜WEB+DB PRESS Vol.87 ES6特集に寄せて〜 – Cybozu Inside Out | サイボウズエンジニアのブログ

ちなみに、現時点では既に「ES6」の呼び名の方が広く浸透しているので、敢えて「ES6」表記のままにしてある書籍やサイトも多いそうです。どちらの呼び方を使うかは各自の判断、ということでしょうかね。
いずれにせよ、「ES6 = ES2015」とおぼえておけば問題ないと思います。

ブラウザの対応状況について

さて、肝心の各ブラウザにおける現時点でのES2015の対応状況ですが、下記ページで現在の対応状況を確認することができます。

http://kangax.github.io/compat-table/es6/

ECMAScript 6 compatibility table

横軸に実行環境（ブラウザ、サーバランタイム、コンパイラ）、縦軸がES2015の新機能で示されており、緑が対応、赤が未対応となっています。

パッと見で分かりますが、全体的にまだ赤部分（未対応）が目立ち、各ブラウザ間の実装にもかなりばらつきがあります。特にIEに関してはほとんど対応が進んでいないような状態です（ただし、Microsoftの新ブラウザEdgeでのサポート状況は良好）。
またIE9以下に関しては項目名すら有りません。正確なところは分かりませんが、おそらくIE9以下ではES2015は非対応なのかもしれません。


これらの状況を踏まえると、少なくとも現時点ではES2015を「そのまま」現場に持ち込むことは現実的とは言えないでしょう。だとすると、主要なブラウザが完全にES2015をサポートするまで実戦投入は出来ないということになるのでしょうか？

「トランスパイラ」を使うという選択肢

主要なブラウザが完全にES2015をサポートするまでにはまだまだ時間がかかりそうです。「いつ対応完了するのか？」については分かりませんが、おそらくまだ数年は先の話になるのではないでしょうか？

それまでは現状のES5でコードを書き続けるのも良いのですが、ES2015は確実に次の標準になってくるものなので、先行投資的な意味でもやはり今のうちから馴染んでおきたいところです。しかもあくまで「実戦」で。

さて、そんなワガママな要望を叶えてくれるものはないかと調べてみたところ、「トランスパイラ」という選択肢があることを知りました。

トランスパイラとは一言でいうとES2015で書かれたコードをES5のコードへ変換を行う仕組みです。もちろんES5ベースのコードであれば、現在のモダンブラウザではほぼ完全にサポートされているはずですので、現時点ではこれを利用するのが最善のアプローチではないかと思われます。

トランスパイラにはいくつかのツールが存在しますが、大きな分類としては以下の２つに分けられます。

タイプ 特徴 主なツール
ライブラリ等
実行時変換方式 特別なツールを必要とせず、HTML内のscriptタグでトランスパイラを読み込むだけで利用可能。ページを表示する際にリアルタイムでスクリプトの変換を行います。

手軽に利用できる反面、実行時に都度スクリプト変換を行うため、その分処理時のオーバーヘッドが大きい。 　
  • es6-shim.js
  • browser-polyfill.js
  • traceur-runtime.js
事前コード変換方式 専用の変換ツールを使用し、ES2015→ES6への事前コード変換を行う方式。HTMLファイルからは変換後のスクリプトファイルを参照する。

ツールの準備が必要で、かつES2015のコードの更新時にコード変換を行うステップが増えるが、実行時のオーバーヘッドはほとんど無い。
  • Babel(旧6to5)
  • traceur-compiler
  • closure compiler

各方式には一長一短があります。どちらを採用するかはケースバイケースだとは思いますが、個人的にはテストもしくはプロトタイプ用途であれば手っ取り早い「実行時変換方式」。それ以外の場合は「プリコンパイル方式」を使うべきかな、と考えています。

実行時変換方式の方が手軽に使えますが、ページ表示の度に都度スクリプト変換を行うのはどう考えても無駄なオーバーヘッドでしかないので、やはり本サービス用としては「プリコンパイル方式」を採用すべきかと思います。もちろん、ツールの準備やスクリプトの変換作業が必要になりますが、一度軌道に乗せてしまえば気にならないのではないかと。（まぁまだ使ったこと無いんですけどね。）

ちなみに、事前コード変換方式のトランスパイラの中では、今のところ「Babel」が最も信頼できるツールとして評価されているようです。先ほどの対応状況チャートを見ても横軸の「Compilers/polyfills」グループの中では最も対応が進んでいます。

トランスパイラを使う場合の注意

今からES2015で開発をするにあたってトランスパイラの使用は確かに最有力候補だとは思いますが、いくつか注意しなければならない点もあるでしょう。

現時点ではトランスパイラも完全ではない

トランスパイラも全てのES2015の機能をサポートしているわけではありません。もちろん現在も対応が進められており今後も頻繁にアップデートされるとは思いますが、それでも使用出来ない機能・構文に遭遇することもあるかもしれません。もしそのようなケースに陥った場合の対処法は事前に考慮しておくべきかと思います。

個人的な見解ではありますが、ある特定の機能がうまく変換されない場合、変換後のコードを修正するのはあまり現実的ではないと思われます（次の変換時に上書きされてしまうため）。そのような場合は変換できないコードをES5ベースの別ファイルへ切り出し、トランスパイラの変換対象から外す、などの対応が必要だと思います。

古いブラウザでは注意

そもそもIE6や7とかは論外として、（最近はやや減ってきたものの）未だにちょいちょい対応を求められるIE8。
こういった古いブラウザも対応させようとすると色々と問題があるようです。全く出来ないというわけではなさそうですが。

この記事を見るとIE8対応がつらそうです。
JavaScript – Babel で IE8 対応する地獄 – Qiita

IE8もサポートしなければならないような案件の場合は、素直にES5で書いた方が（精神衛生上）良い気がします。

まとめと個人的な結論

各ブラウザの対応状況を考慮すると、現時点ではES2015で書かれたコードをそのままWEBサイトに適用するのは現実的ではないと言えそうです。ブラウザの対応を待つ場合は今後数年間は従来のES5ベースでコードを書かなくてはならないでしょう。

今からES2015を実戦投入したいのであれば「トランスパイラ」を利用するのが最善のアプローチだと考えられます。ただし現時点ではトランスパイラも完全ではないため、利用の際は注意です。変換後のコードについては入念なテストをしておいた方が良いでしょう。また、トランスパイラでうまく変換できなかった場合にの対処法についても事前に考慮しておいた方が良さそうです。

結論：今からES2015を使うか？

個人的な結論ではあるのですが、案件次第で使っていきたいなと考えています。IE8もサポートに含まれるような案件の場合はES5で、それ以外ならES2015を積極的に採用したいのですが、トランスパイラの信頼度がまだ未知数ということもあり、比較的小規模な案件から実践していこうと思います。

次回からはトランスパイラを使ったES2015の実践についてまとめていく予定です。

【参考にしたサイト】