ECMAScript 6
Web ブラウザでは JavaScript を使ってプログラムを書くができます。実は JavaScript という言葉は狭義には Mozilla の実装だけを指します。言語そのものは ECMA という機関によって ECMAScript という名前で標準化されています。
現在その ECMAScript のバージョン6 (以下 ES6 と略します) が策定されている途中です。現在の Web ブラウザはだいたい ES5 に準拠していて ES6 の機能はまだ使えないものが多いのですが、トランスレータやポリフィルが開発されていて、それを使えば ES6 を使ってプログラムを書くことが可能です。今回はトランスレータの1実装である 6to5 を使う方法を試してみます。
必要な知識
6to5 は npm で公開されているので、 npm の使い方を知っておく必要があります。
ES6 でプログラムを書く
まずは ES6 で書かれたプログラムを用意します。アロー関数という機能を使ってみます。
window.addEventListener('DOMContentLoaded', () => {
var div = document.createElement('div');
div.textContent = 'Hello, World!';
document.body.appendChild(div);
});Web ページが読み込まれたら画面に Hello, World と表示する簡単なプログラムです。 function() { ... } を () => { ... } と矢印(アロー)のような記号を使って短く書いています。
このファイルを src/a.js に保存します。
ES6 から ES5 に変換する
src/a.js を変換していきます。まずは 6to5 をインストールします。
$ npm install -g 6to5うまくいったら以下のコマンドで変換を実行します。
$ 6to5 --out-dir lib srcこれで lib のなかに a.js というプログラムが出来ました。中を覗いてみると () => { ... } という部分が function() { ... } という馴染みのある形に変換されているのがわかるはずです。
--source-maps や --source-maps-inline というオプション引数を付けることで SourceMaps もつけることができます。デバッグも安心です。
なぜ ES6 なのか
他にも ES6 では多くの便利な機能があります。他の altJS を含む言語から持ってきたものも多かったりします。
altJS ではなく ES6 使う理由としては将来変換無しで実行できるようになる(はずだ)からです。 altJS の開発はもしかしたら終わってしまうこともあるかもしれないですが、 ECMAScript は Web の標準なので将来もサポートされ続けるはずです。
また、 TypeScript なども ES6 の機能を積極的に取り入れていく予定なので、 TypeScript を使い続ける場合でも、今 ES6 を試していれば新機能をいち早く予習することができます。
まとめ
- 新しい JavaScript 仕様 ECMAScript 6
$ npm install -g 6to5で 6to5 をインストール$ 6to5 --out-dir lib srcでsrcの中のファイルを変換してlibに保存する- ES6 使っておくと将来有利かもしれない