traceur-compilerを使ってECMAScript 6を試してみる

#Node.js

#JavaScript

中村修太

2014.12.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

そろそろ使ってみたいES6

ECMAScriptとは、JavaScriptの仕様です。 ECMAScript 6 は「Harmony」とか「ES.next」などと呼ばれているJavaScriptの次期標準仕様であり現在はドラフトになってます。どうやら2015年６月には正式公開になるらしいです。しかしすでにコンパイラがいくつかあったり、IDEが対応してたりして、すぐにでも試せる状態になってます。せっかく環境があるので、正式公開の前にECMAScript 6の新機能について知っておきましょう。

traceur-compilerとは

traceur-compilerとは、Googleが開発しているECMAScript 6のコンパイラです。これを使用すると、 ECMAScript 6で書かれたコードをECMAScript 5に変換して実行することが可能になります。

動作環境

今回使用した動作環境は以下のとおりです。

OS : MacOS X 10.9.4
Node : v0.10.33

ES６のサンプルプログラムを動かしてみる

コマンドラインでコンパイル

traceur-compilerはnode.jsのnpmモジュールとしてインストールすることができます。

% npm install -g traceur

次のようなjsファイルを作成します。 ECMAScript 6で導入されるアロー記法をつかって関数を記述しています。

//es6.js
var num = 5;
var square = x => { return x * x; };
console.log(square(num));

traceurコマンドを使用すれば、そのまま実行できます。

% traceur es6.js
25

なお、outオプションを使うと、ECMAScript 5形式に変換したファイルを生成してくれます。

% traceur es6.js --out ec6-compile.js

生成されたファイルはこんな感じです。後述するtraceur.jsとともに使用することでブラウザ上で動きます。

System.registerModule("es6.js", [], function() {
  "use strict";
  var __moduleName = "es6.js";
  var num = 5;
  var square = (function(x) {
    return x * x;
  });
  console.log(square(num));
  return {};
});
System.get("es6.js" + '');

生成したファイルをブラウザで実行してみる

次にブラウザ上でECMAScript ５に変換したファイルを実行してみます。まずはtraceur-compilerをGithubからもってきて、下記のようにセットアップします。

% git clone https://github.com/google/traceur-compiler.git
% cd traceur-compiler
% npm install
% make

次にtraceur-compilerディレクトリにさきほどのec6-compile.jsをコピーし、次のようなindex.htmlを作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, ECMAScript 6!</title>
    <script src="../bin/traceur.js"></script>
    <script src="../src/bootstrap.js"></script>
    <script src="../es6-compile.js"></script>
  </head>
  <body>
  Hello, ECMAScript 6!
  </body>
</html>

ブラウザで確認すると、先ほどと同じ結果がconsole.logで出力されます。