ECMAScript 6の新しい構文をつかってみる#1

ECMAScript 6の新機能を使ってみよう

ここではECMAScript 6(以下ES6)の実行環境をつくり、動かしてみました。 環境もできたので、ES6の新機能を試してみましょう。

動作環境

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

• OS : MacOS X 10.9.4
• Node : v0.10.33

ここの記事に従いtraceur-compilerをインストールしておいてください。

ECMAScript 6の新機能をためしてみる

※traceurが実験的にサポートしてるものも含む

Array Comprehension

Array内包表記機能です。配列の中でforループや関数、if分などを使用して処理をさせることができます。 適当な場所にes6.jsファイルを作成し、次のような内容で Array内包を使ってみましょう。

//Array内包
var array = [for (x of [0, 1, 2]) for (y of [0, 1, 2]) x + '' + y];
console.log(array);

//if文(フィルター)も使用可能
var array2 = [for (i of [1,2,3,4,5]) if (i > 3) i]
console.log(array2);

experimentalオプションをつけてtraceurを実行します。 配列内での処理ができていますし、if文でのフィルターもできています。

% traceur --experimental es6.js //experimentalを忘れずに
[ '00', '01', '02', '10', '11', '12', '20', '21', '22' ]
[ 4, 5 ]

Arrow Functions

ScalaとかCoffeeScriptとかでも使うやつです。 いちいちfunction(x)〜とかかかなくてもよくなります。

var square = (x) => {
  return x * x;
};
//引数１つならさらに省略可能
var square2 = x => x * x;
console.log(square(10));
console.log(square2(20));

実行結果は以下のとおり。

% traceur --experimental es6.js
100
400

Block Scoped Binding

いままでのvarキーワードは関数スコープでしたが、今回追加されるletで変数宣言することでブロックスコープを使うことができます。

function blockScope() {
  let a = "hello";//変数aをブロックスコープで定義
  if (true) {
    //スコープは、ifブロック内のみ
    let a = "bye";
    console.log(a);// byeが出力
  }
  console.log(a); //helloが出力
}

constキーワードは、代入後は二度と値を変更できない定数を定義します。こちらもブロックスコープです。

const a = "hello";
console.log(a);
a = "bye"; //error.a is read-only

Computed Property Names

プロパティのキー部分で演算可能に。

var x = 0;
var obj = {
  ["prop_" + x]: 'a',
  ["prop_" + (x + 1)]: 'b',
  ["prop_" + (x + 2)]: 'c'
};

console.log(obj);

%traceur --experimental es6.js 
{ prop_0: 'a', prop_1: 'b', prop_2: 'c' }

Default Parameters

関数の引数にデフォルトパラメータが指定できるようになりました。

function increment(x, y = 1) {
  return x += y;
}

console.log(increment(10,5)); //15
console.log(increment(20)); //21

まとめ

とりあえずES6の構文をいくつか紹介しました。 上記以外にもまだまだいっぱい新しい機能があります。それについてはまたのちほど。