はじめに

ECMAScript6についてのは色々情報がでてきていて、またライブラリとかでも一部採用してるケースも見られてきました。

等など、色々紹介してるサイトはありますが、その中でもlukehoban/es6featuresはコード例が豊富に載っていて面白そうなので、写経してみました。

現在のES6とは

harmony:specification_drafts [ES Wiki]で公開されてるES6の仕様やES6FeatureSet.xlsx – Microsoft Excel Web App 等を見るとAPI的に固まってきている部分は何となく見える感じはします。

AngularJS 2.0 | AngularJSがES6ベースで書いていくと方針が発表されたことで、Traceur等を使ったES6で書いてES5に変換して動かす部分にも興味を持った人もいるかもしれません。

addyosmani/es6-tools等を見ると、現段階でES6の機能をpolyfillやtranspilerで持ってこられるツールなどについてまとまってます。

今回は、Traceurをベースにして、lukehoban/es6featuresのコードを写経してみました。

写経

写経したコードはazu/es6features-playgroundに置いてあります。

環境としては traceur 0.0.30 + Node.js V0.11です。

polyfillなどでは実現が難しそうな

  • Set
  • Map
  • WeakSet
  • WeakMap

などはNode.js v0.11 で --harmony のオプションを使うと大体利用できます。(V8のオプションなので、Chromeとかでもフラグ付きで利用できるはず)

以下の項目は traceur 0.0.30 では変換できなさそうな感じでした。

  • “Enhanced Object Literals”
  • “Const”
  • “Comprehensions”
  • “Module Loaders”
  • “Subclassable Built-ins”
  • “Tail Calls”

let はtraceurに --experimentalをフラグをつけると何故か対応してましたが、try-catchを使って無理やりやってたりしてて面白かったです(あんまり実用的じゃない感じだけど)

変換できない事が多く見えてしまうかもしれませんが、lukehoban/es6featuresに書かれてることはコレの3-4倍ぐらいあるので、意外と変換できるものは多いです。

class とかは traceur-runtime.js というランタイムファイルを読み込む必要があるのですが、Arrows FunctionやTemplate Strings、Destructuring、Default + Rest + Spreadあたりはそのままrun-timeなしで展開して使えるので、この辺があるだけで結構便利になります。

traceurが対応してるものは一応以下にも書かれています。

また、traceurのようなruntimeを使わないような変換ができることを目標にしてるtermi/es6-transpilerというプロジェクトもあります。

テスト

写経しながらテストコードもそのまま書いててて、
テストはmocha + power-assertで書いてます。

power-assertを使うときにintelli-espower-loaderをインストールしておくと楽です。(espower-loaderのラッパーです)

$ mocha --require intelli-espower-loader だけでpower-assertらしいテスト結果が出せるようになります。

NewImage 
"use strict";
var assert = require("power-assert");
describe("Default", ()=> {
    it("default parameter value", ()=> {
        function f(x, y=12) {
            return x + y;
        }
        assert(f(3) == 15);
    });
});
describe("Rest", ()=> {
    it("...parameter", ()=> {
        function f(x, ...y) {
            return x * y.length;
        }
        assert(f(3, "hello", true) === 6);
    });
});
describe("Spread", ()=> {
    it("pass each elem of array as argument", ()=> {
        function f(x, y, z) {
            return x + y + z;
        }
        assert(f(...[1,2,3]) === 6);
    });
});

Arrow Functionをそのまま使ってるので、BDD系のネストがあるやつも比較的見やすくなります。

Editor

azu/es6features-playground にも書いていますが、
WebStorm 8あたりからES6のサポートが色々改善されたので、traceurが扱えるコードはWebStormでも普通に書けるようになってます。(フォーマットとかリファクタリングとかできる)

また、File Watcherでtraceurは元から用意されてるので、結構気軽にtraceurを使ってES6ライクなJavaScriptを書けるようになってます。

感想

いろんなところで、「ES6はいつから使えるのか」という事について、「今すぐ使える」という話はよく聞くと思います。

実際に書いてみると、結構普通に使えてしまう感じがして感触は悪く無いです。

let や Generator 等変換を無理してやって使うべきじゃないものもありますが、ES6はシンタックスシュガー的なものも多いのでその辺は積極的に使いたいなーという感じになりました。(変換したもの自体は機械的に展開してる程度な感じのも多い)

Functional JavaScriptと合わせた話とか面白いOne Linerができたりするので、
Arrows Function、Template Strings、Destructuring、Default + Rest + Spreadとかは一度触ってみると楽しいと思います。