(1)

ECMAScript 6 Features

---

(2)

このスライドについて

• アウトライン, PDF 版, SlideShare 版
• ECMAScript 6 の新機能を紹介するスライドです
  • 仕様書：ECMAScript 2015 Language Specification – ECMA-262 6th Edition
• 処理系の対応状況は ECMAScript 6 compatibility table を参考に
  • 章立ておよび紹介の順序はこの表に従う
• 全機能を網羅しているわけではない
• 基本的に ES5 は ES3 の、ES6 は ES3, ES5 の上位互換
  • ES3, ES5 の機能は引き続き ES6 でも使えると思ってよい
  • "use strict"; で動かなくなる構文（with 文など）は避けるべき

---

(3)

TL;DR（抜粋）

• オブジェクトリテラルの略記 ({[x]: a}, {a, b}, { f(x) { ... } })
• 列挙 (for (var x of xs))
• テンプレートリテラル (`${x} + ${y} = ${x + y}`)
• 分割代入 ([x, y] = xs, {a, b} = obj)
• ブロックスコープ変数 (let) , 定数 (const)
• アロー関数 ((x, y) => { ... })
• クラス (class, extends, super)
• ジェネレータ (function *, yield)
• Promise

---

(4)

目次

• 最適化 (Optimization)
• 文法 (Syntax)
• 束縛 (Bindings)
• 関数 (Functions)
• ビルトイン (Built-ins)
• ビルトイン拡張 (Built-in extensions)
• サブクラス化 (Subclassing)
• モジュール (Modules)

---

(5)

最適化 (Optimization)

• 末尾呼び出し最適化

---

(6)

末尾呼び出し最適化

ES6

function gcd(m, n) {
    if (n === 0) {
        return m;
    } else {
        return gcd(n, m % n);
    }
}

• ES6 処理系では関数末尾での再帰呼び出しが最適化される（はず）
• 参考：BabelとTraceurでES6末尾再帰最適化を試す - teppeis blog

---

(7)

文法 (Syntax)

• デフォルト引数 (function (x, y = 42))
• 可変長引数 (function (x, ...ys))
• 配列の展開 (f(...xs), [x, ...ys, z])
• オブジェクトリテラルの略記 ({[x]: a}, {a, b}, { f(x) { ... } })
• 2進数 / 8進数リテラル (0b1010, 0o755)
• 列挙 (for (var x of xs))
• テンプレートリテラル (`${x} + ${y} = ${x + y}`)
• 新しい正規表現のフラグ (/.../y, /🍣🍺*🍖/u)
• 分割代入 ([x, y] = xs, {a, b} = obj)

---

(8)

デフォルト引数

ES3

function myPow(x, y) {
    if (typeof y === "undefined") y = 2;
    return Math.pow(x, y);
}
console.log(myPow(3));      // 9
console.log(myPow(2, 10));  // 1024

---

(9)

デフォルト引数

ES5

function myPow(x, y) {
    if (y === undefined) y = 2;
    return Math.pow(x, y);
}
console.log(myPow(3));      // 9
console.log(myPow(2, 10));  // 1024

• ES5 では undefined は immutable
  • なお undefined という名前のローカル変数は定義できる

---

(10)

デフォルト引数

ES6

function myPow(x, y = 2) {

    return Math.pow(x, y);
}
console.log(myPow(3));      // 9
console.log(myPow(2, 10));  // 1024

• 「デフォルト値を持つ引数」の後に「デフォルト引数を持たない引数」を置いてはならない
  • function (x = 2, y) はダメ

---

(11)

可変長引数

ES3 / ES5

function f(x) {
    console.log(x, Array.prototype.slice.call(arguments, 1));
}
f(2, 3, 5);  // 2 [ 3, 5 ]

• arguments は Array ではない
  • arguments を Array に変換するややこしいイディオムが存在する

---

(12)

可変長引数

ES6

function f(x, ...ys) {
    console.log(x, ys);
}
f(2, 3, 5);  // 2 [ 3, 5 ]

• ちなみに Array.from(arguments) で配列に変換することもできる

---

(13)

配列の展開（引数編）

ES3 / ES5

function f(x, y, z) {
    console.log(x + y * z);
}
f.apply(null, [2, 3, 5]);  // 17

---

(14)

配列の展開（引数編）

ES6

function f(x, y, z) {
    console.log(x + y * z);
}
f(...[2, 3, 5]);           // 17

---

(15)

配列の展開（配列リテラル編）

ES3 / ES5

var xs = [5, 7];
var ys = [2, 3].concat(xs, [11, 13])
console.log(ys);  // [ 2, 3, 5, 7, 11, 13 ]

---

(16)

配列の展開（配列リテラル編）

ES6

var xs = [5, 7];
var ys = [2, 3, ...xs, 11, 13];
console.log(ys);  // [ 2, 3, 5, 7, 11, 13 ]

---

(17)

式をプロパティ名に使う

ES3 / ES5

var key = "foo";
var obj = {};
obj[key] = "bar";
console.log(obj); // { "foo" : "bar" }

---

(18)

式をプロパティ名に使う

ES6

var key = "foo";
var obj = {[key]: "bar"};

console.log(obj); // { "foo" : "bar" }

---

(19)

プロパティ名の略記

ES3 / ES5

var x = 2, y = 3, z = 5;
var obj = {x: x, y: y, z: z};

---

(20)

プロパティ名の略記

ES6

var x = 2, y = 3, z = 5;
var obj = {x, y, z};

• 変数名とプロパティ名が同じ場合に略記できる

---

(21)

メソッドの略記

ES3 / ES5

var obj = {
    f: function (x) {
        console.log(x * this.y);
    },
    y: 42
};

---

(22)

メソッドの略記

ES6

var obj = {
    f(x) {
        console.log(x * this.y);
    },
    y: 42
};

---

(23)

列挙 (for – of)

ES3 (BAD)

var xs = [2, 3, 5];
for (var i in xs) {
    console.log(xs[i]);
}

• javascript - Why is using "for...in" with array iteration such a bad idea? - Stack Overflow
  • var xs = []; xs[5] = 42; のようなパターンでアウト
  • Array.prototype を弄るわるいライブラリがいるとアウト

---

(24)

列挙 (for – of)

ES3 (GOOD)

var xs = [2, 3, 5];
for (var i = 0; i < xs.length; ++i) {
    console.log(xs[i]);
}

---

(25)

列挙 (for – of)

ES5

var xs = [2, 3, 5];
xs.forEach(function (x, i) {
    console.log(x);
});

• Array.prototype.forEach を使う
  • コールバック関数の第 2 引数には添字が入っている

---

(26)

列挙 (for – of)

ES6

var xs = [2, 3, 5];
for (var x of xs) {
    console.log(x);
}

• 配列だけでなくジェネレータ（後述）なども列挙できる
  • Symbol.iterator （後述）を利用すれば独自のオブジェクトも列挙できる

---

(27)

2進数 / 8進数リテラル

ES6

console.log(0b1010);  // 10
console.log(0o755);   // 493

• b / o は小文字でも大文字でも可

---

(28)

テンプレートリテラル

ES3 / ES5

var a = 7, b = 8;
console.log(a + " + " + b + " = " + (a + b));

---

(29)

テンプレートリテラル

ES6

var a = 7, b = 8;
console.log(`${a} + ${b} = ${a + b}`);

---

(30)

新しい正規表現のフラグ (y, u)

ES6

var re = /(\d+)\.?/y;
var ip = "127.0.0.1";
while (re.exec(ip)) console.log(re.lastIndex);  // 4 6 8 9

• sticky flag （lastIndex から順次検索）

console.log(/🍣🍺*🍖/.test("🍣🍺🍺🍺🍖"));  // false
console.log(/🍣🍺*🍖/u.test("🍣🍺🍺🍺🍖")); // true

• 参考：Unicode-aware regular expressions in ECMAScript 6 · Mathias Bynens

---

(31)

分割代入

ES3 / ES5

var xs = [2, 3, 5];
var x = xs[0], y = xs[1], z = xs[2];

var obj = {x: 2, y: 3, nested: {z: 5}};
var x = obj.x, y = obj.y, z = obj.nested.z;

var obj = {x: 2, y: 3, nested: {z: 5}};
var a = obj.x, b = obj.y, c = obj.nested.z;

---

(32)

分割代入

ES6

var xs = [2, 3, 5];
var [x, y, z] = xs;

var obj = {x: 2, y: 3, nested: {z: 5}};
var {x, y, nested: {z}} = obj;

var obj = {x: 2, y: 3, nested: {z: 5}};
var {x: a, y: b, nested: {z: c}} = obj;

• xs, obj が 1 回しか登場しないのが利点
  • 関数の戻り値を扱う場合一時変数に代入する必要がない
  • 変数名が長い場合にもアドバンテージ

---

(33)

束縛 (Bindings)

• ブロックスコープ変数 (let)
• 定数 (const)

---

(34)

ブロックスコープ変数 (let)

ES3 / ES5 (BAD)

var s = "foo";
{
    var s = "bar";
    console.log(s);  // bar
}
console.log(s);  // bar

• ES5 以前の JavaScript には関数スコープしか存在しない

---

(35)

ブロックスコープ変数 (let)

ES3 / ES5 (GOOD)

var s = "foo";
(function () {
    var s = "bar";
    console.log(s);  // bar
})();
console.log(s);  // foo

• 関数の即時実行でスコープを実現する

---

(36)

ブロックスコープ変数 (let)

ES6

var s = "foo";
{
    let s = "bar";
    console.log(s);  // bar
}
console.log(s);  // foo

• let で変数を宣言するとブロックスコープを持つ変数になる

---

(37)

let と for

ES3 / ES5 (BAD)

var fs = [];
for (var i = 0; i < 3; ++i) {
    var f = function () {
        console.log(i);
    };
    fs.push(f);
}
for (var i = 0; i < 3; ++i) {
    fs[i]();  // 3, 3, 3
}

• クロージャが同じ i を参照している

---

(38)

let と for

ES3 / ES5 (GOOD)

var fs = [];
for (var i = 0; i < 3; ++i) {
    var f = (function (i) {
        return function () { console.log(i); };
    })(i);
    fs.push(f);
}
for (var i = 0; i < 3; ++i) {
    fs[i]();  // 0, 1, 2
}

• 関数の即時実行でスコープを切る

---

(39)

let と for

ES6

var fs = [];
for (let i = 0; i < 3; ++i) {
    var f = function () {
        console.log(i);
    };
    fs.push(f);
}
for (var i = 0; i < 3; ++i) {
    fs[i]();  // 0, 1, 2
}

• for の初期化節で let を使う

---

(40)

定数 (const)

ES6

const answer = 42;
answer = 0;  // compile error

• 代入禁止

const s = "foo";
{
    const s = "bar";
    console.log(s);  // bar
}
console.log(s);  // foo

• const もブロックスコープを持つ

---

(41)

関数 (Functions)

• アロー関数 ((x, y) => { ... })
• クラス (class, extends, super)
• ジェネレータ (function *, yield)

---

(42)

アロー関数

ES3 / ES5

var myRandom = function (x, y) {
    var range = y - x;
    return x + (Math.random() * range);
};
var pow2 = function (x) { return x * x };

---

(43)

アロー関数

ES6

var myRandom = (x, y) => {
    var range = y - x;
    return x + (Math.random() * range);
};
var pow2 = x => x * x;

• 引数が 1 個の場合 (x) => { ... } を x => { ... } と略記可
• (foo) => { return bar; } を (foo) => bar と略記可
• アロー記法と function 記法では this の扱いについて違いがある

---

(44)

アロー関数（this の扱い）

ES3 / ES5 (BAD)

var obj = {
    f: function () {

        setTimeout(function () {
            console.log(this.x);
        }, 1000);
    },
    x: 42
};
obj.f();  // undefined

• this !== obj となってしまう

---

(45)

アロー関数（this の扱い）

ES3 (GOOD)

var obj = {
    f: function () {
        var that = this;
        setTimeout(function () {
            console.log(that.x);
        }, 1000);
    },
    x: 42
};
obj.f();  // 42

• this に別名を付ける

---

(46)

アロー関数（this の扱い）

ES5 (GOOD)

var obj = {
    f: function () {

        setTimeout((function () {
            console.log(this.x);
        }).bind(this), 1000);
    },
    x: 42
};
obj.f();  // 42

• Function.prototype.bind を使う

---

(47)

アロー関数（this の扱い）

ES6

var obj = {
    f: function () {

        setTimeout(() => {
            console.log(this.x);
        }, 1000);
    },
    x: 42
};
obj.f();  // 42

• アロー記法の場合関数外の this を関数内でも使える (this === obj)
• クラスを使う際に特に威力を発揮する

---

(48)

クラス (class)

ES3 / ES5

• JavaScript はプロトタイプベースのオブジェクト指向言語であり、ES5 以前にクラスは存在しない
  • class という単語自体は古くから予約語だったりする
• ES5 以前でもクラスや継承を実現するパターンは存在する
  • CoffeescriptとTypescriptから学ぶjsでのクラス・継承パターン | WEB EGG

---

(49)

クラス (class)

ES6

class Application {
    constructor(name) {
        this.name = name;
    }
    start() {
        document.addEventListener("DOMContentLoaded", (event) => {
            this.domDidLoad(event);
        });
    }
    domDidLoad(event) {
        console.log(event);
        console.log(this);
        console.log(`Application ${this.name} start...`);
    }
}

---

(50)

クラスの継承 (extends, super)

ES6

class MyApplication extends Application {
    constructor(name, canvasId, fps = 60) {
        super(name);
        this.canvasId = canvasId;
        this.fps = fps;
    }
    domDidLoad(event) {
        super.domDidLoad(event);
        this.canvas = document.getElementById(this.canvasId);
        this.context = this.canvas.getContext("2d");
        setTimeout(() => this.draw(this.context), 1000 / this.fps);
    }
    draw(ctx) {
        ctx.fillStyle = "#def";
        ctx.fillRect(0, 0, 640, 480);
    }
}

---

(51)

クラス（this の扱い）

ES6 (GOOD)

document.addEventListener("DOMContentLoaded", (event) => {
    this.domDidLoad(event);
});

setTimeout(() => this.draw(this.context), 1000 / this.fps);

• クラスのコードより抜粋
• アロー関数大活躍

---

(52)

クラス（this の扱い）

ES6 (BAD)

document.addEventListener("DOMContentLoaded", function (event) {
    this.domDidLoad(event);
});

setTimeout(function () { this.draw(this.context); }, 1000 / this.fps);

• function でこう書くことはできない

---

(53)

クラス（this の扱い）

ES6 (BAD)

document.addEventListener("DOMContentLoaded", this.domDidLoad);

• こう書くこともできない

---

(54)

クラス（this の扱い）

ES6 (GOOD) (2)

document.addEventListener("DOMContentLoaded", this.domDidLoad.bind(this));

setTimeout(this.draw.bind(this, this.context), 1000 / this.fps);

• Function.prototype.bind を使う場合

---

(55)

ジェネレータ

ES6

function * range(n) {
    for (var i = 0; i < n; ++i) yield i;
}

const gen = range(3);
console.log(gen.next());  // { value: 0, done: false }
console.log(gen.next());  // { value: 1, done: false }
console.log(gen.next());  // { value: 2, done: false }
console.log(gen.next());  // { value: undefined, done: true }

• function * と yield で中断できる関数を作ることができる
  • いわゆる coroutine

---

(56)

ジェネレータの列挙

ES6

function * range(n) {
    for (var i = 0; i < n; ++i) yield i;
}

for (var i of range(3)) {
    console.log(i);  // 0, 1, 2
}

• for – of でジェネレータの値を列挙できる

---

(57)

ジェネレータの展開

ES6

function * range(n) {
    for (var i = 0; i < n; ++i) yield i;
}

console.log([...range(2), ...range(3)]);  // [ 0, 1, 0, 1, 2 ]

• ... でジェネレータを展開できる

---

(58)

ビルトイン (Built-ins)

• 型付き配列 (Uint8Array, Float32Array, ..., DataView)
• Map, WeakMap, Set, WeakSet
• Proxy, Reflect
• Promise
• Symbol

---

(59)

型付き配列

ES6

var xs = new Float32Array(3);
console.log(xs);  // [ 0, 0, 0 ]
var ys = new Uint8Array([-1, 0, 255, 256]);
console.log(ys);  // [ 255, 0, 255, 0 ]
var zs = new Uint8ClampedArray([-1, 0, 255, 256]);
console.log(zs);  // [ 0, 0, 255, 255 ]

• XHR で取得したバイナリを扱う際に有用
• WebGL を使う際にも利用する
• new の際に配列長か Array か ArrayBuffer を与える

---

(60)

ArrayBuffer と型付き配列

ES6

var buf = new ArrayBuffer(8);
var f64 = new Float64Array(buf);
var i32 = new Int32Array(buf);
var ui8 = new Uint8Array(buf);
f64[0] = 0.1;
console.log(f64);  // [0.1]
console.log(i32);  // [-1717986918, 1069128089]
console.log(ui8);  // [154, 153, 153, 153, 153, 153, 185, 63]

• 型付き配列は view（窓）に過ぎず、実体は ArrayBuffer である
  • ArrayBuffer を共有すると内容も共有される

---

(61)

DataView

ES6

var buf = new ArrayBuffer(4);
var view = new DataView(buf);
view.setUint8(0, 0xA0);
console.log(view.getInt32(0));        // -1610612736
console.log(view.getInt32(0, true));  // 160

• C の構造体のような複合データを扱う際には DataView を用いるとよい
• get 系関数の第 2 引数、set 系関数の第 3 引数にはエンディアンを指定する
  • デフォルトはビッグエンディアン
  • リトルエンディアンなら true を指定

---

(62)

Map

ES6

var map = new Map();
var key1 = {};
var key2 = {};
var key3 = key1;
map.set(key1, "foo");
map.set(key2, "bar");
console.log(map.get(key2));  // bar
console.log(map.get(key3));  // foo
for (var key of map.keys()) console.log(key);  // {} {}

• いわゆる辞書型
• キーにオブジェクトを使うことができる

---

(63)

WeakMap

ES6

var map = new WeakMap();
var key1 = {};
var key2 = {};
var key3 = key1;
map.set(key1, "foo");
map.set(key2, "bar");
console.log(map.get(key2));  // bar
console.log(map.get(key3));  // foo
console.log(typeof map.keys === "undefined");  // true

• キーを弱参照で持つ Map
• キーを列挙することはできない

---

(64)

Set

ES6

var set = new Set([1, 1, 2, 3, 5, 8]);
set.add(2).add(3).add(5).add(7).add(11);
console.log(set);  // [ 1, 2, 3, 5, 8, 7, 11 ]
console.log(set.has(4));  // false
console.log(set.has(5));  // true

• いわゆる集合型
• 列挙は挿入順

---

(65)

WeakSet

ES6

var set = new WeakSet();
var key1 = {};
var key2 = {};
var key3 = key1;
set.add(key1);
console.log(set.has(key2));  // false
console.log(set.has(key3));  // true

• キー（値）を弱参照で持つ Set
• WeakMap と同じく列挙不可

---

(66)

Proxy

ES6

var obj = {};
var handler = {
    get(target, name) { return target[name] / 2; },
    set(target, name, val) { target[name] = val * 2; }
};
var proxy1 = new Proxy(obj, handler);
var proxy2 = new Proxy(proxy1, handler);
var proxy3 = new Proxy(proxy2, handler);
proxy3.foo = 42;
console.log(proxy3.foo);  // 42
console.log(proxy2.foo);  // 84
console.log(proxy1.foo);  // 168
console.log(obj);  // { "foo" : 336 }

• メタプログラミングに使えるらしい
• 参考：Meta programming with ECMAScript 6 proxies

---

(67)

Reflect

ES6

var obj = {};
var handler = {
    get(target, name) { return Reflect.get(target, name) / 2; },
    set(target, name, val) { Reflect.set(target, name, val * 2); }
};
var proxy1 = new Proxy(obj, handler);
var proxy2 = new Proxy(proxy1, handler);
var proxy3 = new Proxy(proxy2, handler);
proxy3.foo = 42;
console.log(proxy3.foo);  // 42
console.log(proxy2.foo);  // 42
console.log(proxy1.foo);  // 42
console.log(obj);  // { "foo" : 84 }

• 参考：ecmascript 6 - What does the Reflect object do in JavaScript? - Stack Overflow

---

(68)

Promise

ES6

• 非同期処理をうまく扱うための仕組み
• 参考：JavaScript Promiseの本
• then のメソッドチェーンで処理順を制御し、catch でエラー処理をする
• 非同期処理を行うライブラリを作る際には Promise オブジェクトを返す API を用意しておくとよい
• petkaantonov/bluebird などの polyfill が存在

---

(69)

Promise

ES6

new Promise((resolve, reject) => {
    setTimeout(() => resolve("A"), 1000);
}).then((str) => {
    console.log(str);          // A
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("B"), 1000);
    }).then((str) => {
        console.log(str);      // B
        return Promise.reject(new Error("C"));
    });
}).catch((err) => {
    console.log(err.message);  // C
    return "D";
}).then((str) => {
    console.log(str);          // D
});
console.log("Start!");

• Start! → A → B → C → D の順に表示される

---

(70)

Symbol

ES6

var sym1 = Symbol("foo");
var sym2 = Symbol("bar");
var sym3 = Symbol("bar");

console.log(sym1 == sym2);  // false
console.log(sym2 == sym3);  // false
console.log(sym3 == sym1);  // false

• 一意なキーの生成などに利用
• 参考：Symbolについて - JS.next

---

(71)

Symbol.iterator

ES6

var obj = { };
obj[Symbol.iterator] = function () {
    return {
        next: function () {
            return (this.i < 3) ?
                {done: false, value: this.i++} : {done: true};
        },
        i: 0
    }
};
for (var x of obj) console.log(x);  // 0 1 2

• 自前のオブジェクトを for – of で列挙できる
• 参考：ES6のイテレータについて調べた - ひよこ3分07秒のTechブログ

---

(72)

ビルトイン拡張 (Built-in extensions)

• Oject.assign
• Object.setPrototypeOf
• 関数名の取得
• String
• Array
• Number
• Math

---

(73)

Object.assign

ES6

var obj = {foo: "bar", x: 42};
Object.assign(obj, {foo: "baz"}, {hoge: "piyo"});
console.log(obj);  // { "foo" : "baz", "x" : 42 , "hoge" : "piyo" }

• オブジェクトのマージ

---

(74)

Object.setPrototypeOf

ES6

var proto = {hoge: "piyo"};
var obj = {foo: "bar"};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto);  // true
console.log(obj.foo);   // bar
console.log(obj.hoge);  // piyo
obj.hoge = "fuga";
console.log(obj.hoge);  // fuga

• オブジェクトのプロトタイプを設定する
• いわゆる __proto__ の代替として利用可

---

(75)

関数名の取得

ES6

function foo() { }
console.log(foo.name);  // foo
var bar = function () { };
console.log(bar.name);  // bar
console.log((function () { }).name === "")  // true

• name プロパティで関数名を取得できる

---

(76)

String

ES6

console.log("🍣".codePointAt(0));  // 127843
console.log(String.fromCodePoint(12354, 32, 127843)); // あ 🍣
console.log("A".repeat(3));  // AAA
console.log("heart".includes("ear"));       // true
console.log("heart".startsWith("hear"));    // true
console.log("heart".startsWith("ear", 1));  // true
console.log("heart".endsWith("art"));       // true

---

(77)

Array

ES6

var obj = {0: "foo", 1: "bar", length: 2};
console.log(Array.from(obj));  // ["foo", "bar"]
function * gen() { yield 2; yield 3; yield 5; }
console.log(Array.from(gen()));  // [2, 3, 5]
console.log([2, 3, 5, 7].find(x => x > 3));       // 5
console.log([2, 3, 5, 7].findIndex(x => x > 3));  // 2
console.log(new Array(3).fill(42));  // [42, 42, 42]

• from: 「配列のような」オブジェクトを配列に変換
• find: 条件に一致する最初の要素を得る
• findIndex: 条件に一致する最初の要素の添字を得る

---

(78)

Number

ES6

console.log(Number.isFinite(42));         // true
console.log(Number.isFinite(-Infinity));  // false
console.log(Number.isFinite(NaN));        // false
console.log(Number.isInteger(42.00000));  // true
console.log(Number.isInteger(42.00001));  // false
console.log(Number.isSafeInteger(1e+15)); // true
console.log(Number.isSafeInteger(1e+16)); // false
console.log(Number.EPSILON);              // 2.220446049250313e-16
console.log(Number.MIN_SAFE_INTEGER);            // -9007199254740991
console.log((Number.MIN_SAFE_INTEGER - 1) | 0);  // 0
console.log(Number.MAX_SAFE_INTEGER);            // 9007199254740991
console.log((Number.MAX_SAFE_INTEGER + 1) | 0);  // 0

---

(79)

Math

ES6

console.log(Math.sign(-42));          // -1
console.log(Math.cosh(Math.log(2)));  // 1.25
console.log(Math.trunc(-3.5));        // -3
console.log(Math.cbrt(27));           // 3
console.log(Math.hypot(3, 4));        // 5

• sign: 符号（-1, 0, +1）
• cosh, sinh, tanh: 双曲線関数
• trunc: 0 方向への丸め
• cbrt: 立方根
• hypot: 二乗和の平方根

---

(80)

サブクラス化 (Subclassing)

• Array, RegExp, Function, Promise, Boolean, Number, String, Map, Set を継承したクラスを定義できる

---

(81)

モジュール (Modules)

• import, export

---

(82)

import, export

CommonJS

// app.js
var utils = require("./utils");
utils.hello();              // Hello, world!
console.log(utils.answer);  // 42

// utils.js
function hello() { console.log("Hello, world!"); }
var answer = 42;
module.exports = { hello: hello, answer: answer };

---

(83)

import, export

ES6

// app.js
import utils from "./utils";
utils.hello();              // Hello, world!
console.log(utils.answer);  // 42

// utils.js
function hello() { console.log("Hello, world!"); }
var answer = 42;
export default { hello: hello, answer: answer };

• クラスなども export 可能
• 参考：Babelで理解するEcmaScript6の import / export - Qiita

---

(84)

import * as

ES6

// app.js
import * as utils from "./utils";
utils.hello();              // Hello, world!
console.log(utils.answer);  // 42

// utils.js
export function hello() { console.log("Hello, world!"); }
export var answer = 42;

---

(85)

import { ... }

ES6

// app.js
import { hello, answer } from "./utils";
hello();                    // Hello, world!
console.log(answer);        // 42

// utils.js
export function hello() { console.log("Hello, world!"); }
export var answer = 42;

---

(86)

END

We are hiring!
UNIPRO Inc.

---

ECMAScript 2015 Slideshows