ECMAScript6の新機能

以下はGithubで2万☆を獲得している、Overview of ECMAScript 6 featuresというコンテンツの日本語訳です。

Introduction

ECMAScript2015とも言われているECMAScript6は、ECMAScript標準の最新バージョンです。
ES6は、2009年に標準化されたES5以来、初めての重要なアップデートになります。
主要なJavaScriptエンジンにおいて、現在これら新機能の実装が進行中です。

ES6の完全な仕様については、ES6 standardを参照してください。
ES6には、以下のような新機能が含まれています。

ECMAScript 6 Features

arrows

アロー=>は、functionの省略表記で、C#、Java8やCoffeeScriptのアローと似たような構文で書けるよ。
式と文どちらの書き方もサポートするよ。
呼び出し方でthisが変わるfunctionとは違い、アローのthisは常にその周囲と同じスコープになるよ。

    // 式
    var odds = evens.map(v => v + 1);
    var nums = evens.map((v, i) => v + i);
    var pairs = evens.map(v => ({even: v, odd: v + 1}));

    // 文
    nums.forEach(v => {
      if (v % 5 === 0)
        fives.push(v);
    });

    // thisのスコープ
    var bob = {
      _name: "Bob",
      _friends: [],
      printFriends() {
        this._friends.forEach(f =>
          console.log(this._name + " knows " + f));
      }
    }

より詳細はMDN Arrow Functionsを参照すること。

classes

ES6のクラス構文は、プロトタイプベース言語をオブジェクト指向に見せかけるシンタックスシュガーです。
ひとつ便利な定義を追加することで、クラス構文が使いやすくなり相互運用性も高まります。
クラスは継承、super、インスタンスメソッドとクラスメソッド、コンストラクタをサポートします。

    class SkinnedMesh extends THREE.Mesh {

      // コンストラクタ
      constructor(geometry, materials) {
        // super.constructor()
        super(geometry, materials);

        this.idMatrix = SkinnedMesh.defaultMatrix();
        this.bones = [];
        this.boneMatrices = [];
        //...
      }
      // インスタンスメソッド
      update(camera) {
        //...
        super.update();
      }
      // getter
      get boneCount() {
        return this.bones.length;
      }
      //setter
      set matrixType(matrixType) {
        this.idMatrix = SkinnedMesh[matrixType]();
      }
      // クラスメソッド
      static defaultMatrix() {
        return new THREE.Matrix4();
      }
    }

より詳細はMDN Classesを参照すること。

enhanced object literals

オブジェクトリテラルはfoo:fooの省略、メソッド定義、super()、プロパティ名の演算などに対応しました。
オブジェクトリテラルとクラス構文を一緒に利用することで、これらがより便利に扱えるようになります。

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // handler: handlerの略
    handler,
    // メソッド
    toString() {
      // theProtoObj.toString()を呼んでる
      return "d " + super.toString();
    },
    // 計算結果をプロパティ名にできる
    [ 'prop_' + (() => 42)() ]: 42
};

より詳細はMDN Grammar and types: Object literalsを参照すること。

template strings

テンプレートリテラルは文字列を作成するためのシンタックスシュガーです。
これはPerlやPythonなどのヒアドキュメントと似ています。
オプションで、タグを付けることで文字列作成をカスタマイズすることができます。
インジェクション攻撃を防いだり、より高度な文字列作成ができるでしょう。

    // 基本
    `In JavaScript '\n' is a line-feed.`

    // 複数行
    `In JavaScript this is
     not legal.`

    // 文字列展開
    var name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`

    // POST関数が呼ばれる
    POST`http://foo.org/bar?a=${a}&b=${b}
         Content-Type: application/json
         X-Credentials: ${credentials}
         { "foo": ${foo},
           "bar": ${bar}}`(myOnReadyStateChangeHandler);

より詳細はMDN Template Stringsを参照すること。

destructuring

分割代入は配列とオブジェクトによるバインディングをサポートしています。
分割代入はfoo["bar"]の参照と同じようにフェールセーフで、値がなかったらundefinedを返します。

    // 配列
    var [a, , b] = [1,2,3];

    // オブジェクト
    var { op: a, lhs: { op: b }, rhs: c }
           = getASTNode()

    // オブジェクトの短縮形
    var {op, lhs, rhs} = getASTNode()

    // 引数
    function g({name: x}) {
      console.log(x);
    }
    g({name: 5})

    // フェールソフト
    var [a] = []; // a === undefined

    // デフォルト値があればそっちになる
    var [a = 1] = []; // a === 1

より詳細はMDN Destructuring assignmentを参照すること。

default + rest + spread

関数呼び出し時に引数が無かった場合はデフォルト値が使用される。。
呼び出される方に書く...はRest parametersと呼ばれ、余った引数が全て配列で入ってくる。
呼び出す方に書く...はスプレッド演算子と呼ばれ、配列を展開して呼び出し先に渡される。

    function f(x, y=12) {
      // 第二引数が無いかundefinedのときはy=12になる
      return x + y;
    }
    f(3) // 15

    function f(x, ...y) {
      // y = ["hello", true]になる
      return x * y.length;
    }
    f(3, "hello", true) // 6

    function f(x, y, z) {
      return x + y + z;
    }
    // f(1, 2, 3)と同じ
    f(...[1, 2, 3]) // 6

より詳細はMDN Default parameters、Rest parameters、Spread Operatorを参照すること。

let + const

letはブロックスコープのvarで再代入可能。
constは再代入不可能。

    function f() {
      {
        let x;

        {
          // {}内のスコープになるので定義可能
          const x = "sneaky";
          // constは再代入不可なのでエラーになる
          x = "foo";
        }

        // 同スコープで既にletしてるのでエラーになる
        let x = "inner";
        // 再代入はOK
        x = "inner";
      }
    }

より詳細はMDN let statement、const statementを参照すること。

iterators + for..of

イテレータはIEnumerableやIterableのように反復処理をカスタマイズできます。
for-ofを使うと、for-inより簡単にイテレータから値を取り出せます。
特に何もしなくてもLINQのように遅延評価されます。

    let fibonacci = {
      [Symbol.iterator]() {
        let pre = 0, cur = 1;
        return {
          next() {
            [pre, cur] = [cur, pre + cur];
            return { done: false, value: cur }
          }
        }
      }
    }

    for (var n of fibonacci) {
      // 1000で終了
      if (n > 1000)
        break;
      console.log(n);
    }

イテレータのinterfaceをTypeScriptで書くと以下のようになります。

    interface IteratorResult {
      done: boolean;
      value: any;
    }
    interface Iterator {
      next(): IteratorResult;
    }
    interface Iterable {
      [Symbol.iterator](): Iterator
    }

より詳細はMDN for...ofを参照すること。

generators

ジェネレータは、function*とyieldを使ってイテレータを簡単に作れる機能です。
function*で宣言した関数はGeneratorインスタンスを返します。
ジェネレータはnextとthrowを持ったイテレータのサブタイプで、yieldで関数は動いたまま値を返します(もしくはthrowする)。

注：イテレータを使うとES7のawaitみたいなこともできるよ

    var fibonacci = {
      [Symbol.iterator]: function*() {
        var pre = 0, cur = 1;
        for (;;) {
          var temp = pre;
          pre = cur;
          cur += temp;
          yield cur;
        }
      }
    }

    for (var n of fibonacci) {
      // 1000で終了
      if (n > 1000)
        break;
      console.log(n);
    }

ジェネレータのinterfaceをTypeScriptで書くと以下のようになります。

    interface Generator extends Iterator {
        next(value?: any): IteratorResult;
        throw(exception: any);
    }

より詳細はMDN Iteration protocolsを参照すること。

unicode

ユニコードリテラル、RegExpのUnicodeフラグ、21ビットのコードポイントAPIなど、Unicodeサポートを強化しました。
これらにより、JavaScriptでグローバルなアプリ作成が容易になります。

    // これまでと同じ
    "𠮷".length == 2

    // Unicodeフラグ
    "𠮷".match(/./u)[0].length == 2

    // Unicodeリテラル
    "\u{20BB7}"=="𠮷"=="\uD842\uDFB7"

    // String.prototype.codePointAt()
    "𠮷".codePointAt(0) == 0x20BB7

    // イテレータ
    for(var c of "𠮷") {
      console.log(c);
    }

より詳細はMDN RegExp.prototype.unicodeを参照すること。

modules

コンポーネント定義のモジュールを言語レベルでサポートしました。
一般的なAMDやCommonJSみたいな形で書けます。
モジュールは非同期で、必要とされるまで中のコードは実行されません。

    // lib/math.js
    export function sum(x, y) {
      return x + y;
    }
    export var pi = 3.141593;

    // app.js
    import * as math from "lib/math";
    alert("2π = " + math.sum(math.pi, math.pi));

    // otherApp.js
    import {sum, pi} from "lib/math";
    alert("2π = " + sum(pi, pi));

追加機能としては、export defaultとexport *があります。

    // lib/mathplusplus.js
    export * from "lib/math";
    export var e = 2.71828182846;
    export default function(x) {
        return Math.log(x);
    }

    // app.js
    import ln, {pi, e} from "lib/mathplusplus";
    alert("2π = " + ln(e)*pi*2);

より詳細はMDN import statement、export statementを参照すること。

module loaders

モジュールローダは以下をサポートします。
・動的ローディング
・状態の分離
・グローバル領域を使わない
・コンパイル時フック
・仮想化のネスト

デフォルトのローダを変更することができ、また新しいローダを作成することもできます。

    // 動的ローディング 'System'はデフォルトのローダ
    System.import('lib/math').then(function(m) {
      alert("2π = " + m.sum(m.pi, m.pi));
    });

    // 新しいローダ
    var loader = new Loader({
      global: fixup(window) // 'console.log'を差し替える
    });
    loader.eval("console.log('hello world!');");

    // モジュールを直接操作
    System.get('jquery');
    System.set('jquery', Module({$: $})); // WARNING: not yet finalized

map + set + weakmap + weakset

一般的なアルゴリズムに対して効率的なデータ構造。
WeakMapはメモリリークのない、オブジェクトをキーとするKey-Valueストアです。

    // Set
    var s = new Set();
    s.add("hello").add("goodbye").add("hello");
    s.size === 2;
    s.has("hello") === true;

    // Map
    var m = new Map();
    m.set("hello", 42);
    m.set(s, 34);
    m.get(s) == 34;

    // WeakMap
    var wm = new WeakMap();
    wm.set(s, { extra: 42 });
    wm.size === undefined

    // WeakSet
    var ws = new WeakSet();
    ws.add({ data: 42 });
    // Weak*以外から参照がない場合、キーはGCされる

より詳細はMDN Map、Set、WeakMap、WeakSetを参照すること。

proxies

Proxyを使うと、おおよそあらゆるオブジェクトを上書きして挙動を変更することが可能になります。
傍受、オブジェクトの仮想化、ロギングなどに使用できるでしょう。

    // 普通のObject
    var target = {};
    var handler = {
      get: function (receiver, name) {
        return `Hello, ${name}!`;
      }
    };

    // targetをhandlerで上書き
    var p = new Proxy(target, handler);
    p.world === 'Hello, world!';

    // 普通の関数
    var target = function () { return 'I am the target'; };
    var handler = {
      apply: function (receiver, ...args) {
        return 'I am the proxy';
      }
    };

    // targetをhandlerで上書き
    var p = new Proxy(target, handler);
    p() === 'I am the proxy';

ランタイムレベルの操作も上書きできます。

    var handler =
    {
      get:...,
      set:...,
      has:...,
      deleteProperty:...,
      apply:...,
      construct:...,
      getOwnPropertyDescriptor:...,
      defineProperty:...,
      getPrototypeOf:...,
      setPrototypeOf:...,
      enumerate:...,
      ownKeys:...,
      preventExtensions:...,
      isExtensible:...
    }

より詳細はMDN Proxyを参照すること。

symbols

SymbolはObjectに対するアクセス制御を可能にします。
SymbolはObjectのキーとして設定できる、新しいプリミティブ型です。
引数descriptionを渡せますが、必須ではありません。
Symbolはgensymのように一意ですが、Object.getOwnPropertySymbolsで列挙できるのでprivateではありません。

    var MyClass = (function() {

      // Symbol
      var key = Symbol("key");

      // キーにする
      function MyClass(privateData) {
        this[key] = privateData;
      }

      MyClass.prototype = {
        doStuff: function() {
          ... this[key] ...
        }
      };

      return MyClass;
    })();

    var c = new MyClass("hello");
    // MyClass.keyとは別物なので参照不可
    c["key"] === undefined;

より詳細はMDN Symbolを参照すること。

subclassable built-ins

ES6ではArray、Date、DOM Elementsのような組み込み関数を継承できます。
オブジェクト生成時にCtorという関数が呼ばれ、以下の処理を行います。
・Ctor[@@create]を呼んでオブジェクトを生成する
・constructorを呼んでインスタンスを生成する

Symbol.createで既知の@@createを利用できます。
組み込み関数は@@createを公開しています。

    // Arrayの擬似コード
    class Array {
        constructor(...args) { /* ... */ }
        static [Symbol.create]() {
            // Install special [[DefineOwnProperty]] to magically update 'length'
        }
    }

    // Arrayのサブクラス
    class MyArray extends Array {
        constructor(...args) { super(...args); }
    }

    // newすると`@@create`、`constructor`を順に呼び出す
    var arr = new MyArray();
    arr[1] = 12;
    arr.length == 2

math + number + string + array + object APIs

Mathライブラリ、配列変換、文字列操作、Object.assignなど多くのライブラリが追加されました。

    Number.EPSILON;
    Number.isInteger(Infinity); // false
    Number.isNaN("NaN"); // false

    Math.acosh(3); // 1.762747174039086
    Math.hypot(3, 4); // 5
    Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2); // 2

    "abcde".includes("cd"); // true
    "abc".repeat(3); // "abcabcabc"

    Array.from(document.querySelectorAll('*')); // Arrayを返す
    Array.of(1, 2, 3); // new Array()とほぼ同じだが、引数が一つのときに動作が変わらない
    [0, 0, 0].fill(7, 1); // [0,7,7]
    [1, 2, 3].find(x => x == 3); // 3
    [1, 2, 3].findIndex(x => x == 2); // 1
    [1, 2, 3, 4, 5].copyWithin(3, 0); // [1, 2, 3, 1, 2]
    ["a", "b", "c"].entries(); // [0, "a"], [1,"b"], [2,"c"]のイテレータ
    ["a", "b", "c"].keys(); // 0, 1, 2のイテレータ
    ["a", "b", "c"].values(); // "a", "b", "c"のイテレータ

    Object.assign(Point, { origin: new Point(0,0) })

より詳細はMDN Number、Math、Array.from、Array.of、Array.prototype.copyWithin、Object.assignを参照すること。

binary and octal literals

数値リテラルに2進数表記bと8進数表記oが追加されました。

    0b111110111 === 503 // true
    0o767 === 503 // true

promises

Promiseは非同期処理を行う第一級関数ライブラリです。
Promiseは既に多くのJavaScriptライブラリで使用されています。

    function timeout(duration = 0) {
        return new Promise((resolve, reject) => {
            setTimeout(resolve, duration);
        })
    }

    var p = timeout(1000).then(() => {
        return timeout(2000);
    }).then(() => {
        throw new Error("hmm");
    }).catch(err => {
        return Promise.all([timeout(100), timeout(200)]);
    })

より詳細はMDN Promiseを参照すること。

reflect api

リフレクションAPIはObjectに対するメタ操作を可能とします。
これはProxy APIの逆みたいなもので、Proxy同様呼び出しをフックできます。
Proxyの実装に特に便利です。

    // サンプルはないよ

より詳細はMDN Reflectを参照すること。

tail calls

末尾再帰を最適化します。
再帰的なアルゴリズムに無限の入力があっても今後は安心です。

    function factorial(n, acc = 1) {
        'use strict';
        if (n <= 1) return acc;
        return factorial(n - 1, n * acc);
    }

    // 今はStack overflowが起こるけど、ES6では安全になる
    factorial(100000)

感想

PHP5.0からPHP5.3に進化したみたいなかんじ？

正直ES6よくわかってないので、読んでもわからないところが多かった。
というかこのGithub全体的にあまりに端折りすぎてて、詳細を見ない限り機能が存在することくらいしかわからない。
さらに更新が一年前から止まっていて、大量のプルリクも放置状態。
どうして2万も☆がついてるのかよくわからない。

あとCtor[@@create]が何なのか全くわからなかった。