ECMAScript6 - 次期のJavaScriptはこうなる？

ECMAScript？

ブラウザやnode.jsなどに使われているスクリプト言語のJavaScriptなんですが、実は親が「ECMAScript」という言語である。JavaScriptの文法などはすべてECMAScriptを基準にしているので、ECMAScriptの新機能や基準も次期のJavaScriptに移行する可能性が高い。

ECMAScript 6

現行のJavaScriptはECMAScript5をベースにしている。ECMAScript6は次期のJavaScriptとも考えられる。（すべての新機能が取り入れるかどうかはわからない。）

ECMAScript6が楽しみなとこ

ECMAScript6を試してみたところ、すごい楽しみな新機能がいくつあった：

「=>」矢印

JavaScriptを書く人はわかると思うが、一日function()を何回書いたのかわからないぐらい繰り返してる。ECMAScript6はもっと便利な記述方を導入しました。

Before

var animals = ["dog", "cat", "duck"];
animals.map(function(s){
    return s.toUpperCase();
});
 
var my_fav = [];
animal.forEach(function (a) {
   if (a == "duck") {
      two_foot.push(a);
   }
});
console.log(my_fav); //[ 'DOG', 'CAT', 'DUCK' ]

After

let animals = ["dog", "cat", "duck"];
animals.map(s => s.toUpperCase());
//[ 'DOG', 'CAT', 'DUCK' ]
 
var my_fav = [];
animals.forEach(a => {
    if (a == "cat") {
        my_fav.push(a);
    }
});
console.log(my_fav); //[ 'duck' ]

これまさに今すぐでもほしい機能だと思う。CoffeeScriptはすでに導入されているが、やはりこれは言語レベルでサポートしてほしい！

文字列の補間

JavaScriptで変数と文字列を混ぜてプリントする時に、+で変数と文字列と繋がってプリントするのが一般的：

var name = "みらい";
var greeting = "よろしくお願いします。";
console.log(name　+ 'です。' + greeting);
// みらいです。よろしくお願いします。

ECMAScript6では、\`という符号が導入された。上記の例をECMAScript6で書くと下記のようになる：

var name = "みらい";
var greeting = "よろしくお願いします。";
console.log(`${name}です。${greeting}`);
// みらいです。よろしくお願いします。

このような記述方はPHP、RubyやScalaにもすでに存在しているが、今のJavaScriptにはまだない。

そして、気になるのは、なぜECMAScript6が他の言語にあまり使われてない記号\を起用したのか。この記号を使うメリットは**、’（シングルクォテーション）と”`（ダブルクォテーション）も気にせずに構文の中に書けるというとこ。そして、Markdownに馴染んでるプログラマーにも優しい**と思う。

引数

ECMAScript6では引数にデフォルト値が指定できる：

function sayHello(name, greeting = 'こんにちは') {
    console.log(`${name}「${greeting}」`);
}
sayHello('みらい');
// みらい「こんにちは」

引数の数が不定の場合は、...を使うと、一個目以降渡された引数は配列として渡される：

function sum(a, ...b) {
    var count = 0;
    b.forEach(a => count+=a);
    return a+count;
}
console.log(sum(1,2,3,4,5,6)); // 21

ジェナレーター(Generator)

Generatorの導入で、ロープ処理はかなり便利になる。

function* fibonacci()
{
  let [prev, cur] = [0, 1];
  for(;;) {
    [prev, cur] = [cur, prev+cur];
    yield cur;
  }
}
 
let all = fibonacci();
// all.next()は{value:<value>, done: <bool>}というオブジェクトを返す
console.log(all.next().value); // 1
console.log(all.next().value); // 2
console.log(all.next().value); // 3
console.log(all.next().value); // 5
console.log(all.next().value); // 8
console.log(all.next().value); // 13
console.log(all.next().value); // 21
console.log(all.next().value); // 34
 
var output = [];
for (var n of fibonacci()) {
   if (n > 100) break;
   output.push(n);
}
console.log(output.join(', '));
//1, 2, 3, 5, 8, 13, 21, 34, 55, 89

まとめ

ECMAScript6をサポートしているブラウザやプラットフォームはまだ少ないんだが、いつかJavaScriptに移行することは確信できる。自分はこの数日間ECMAScript6を試したところ、JavaScriptも関数型プログラミングに向いてるのでないかと思った。では〜

今すぐECMAScript6を使いたいという方は、ECMAScript6のコードを書いて、babel.jsを利用してJavaScriptにコンパイルすることができる。