ES6ってなに？

JavaScriptのもとに

なってるもの

ActionScriptとかもECMAScript

ECMAScript 6th

のこと

ES6になって
新しい書き方増えるよ

楽にかけるよ編

• デフォルト引数
• メソッド
• オブジェクトリテラル
• 文字列内で変数を展開

// これが
var func1 = function (x, y) {
    x = x || 100;
    y = y || 10;
};


// こうなる
var func2 = function (x=100, y=10) {
};

デフォルト引数

たてぼう

かかなくていい

var object = {
    // 今まで
    func1: function () {
        console.log("func1");
    },
    // これから
    func2 () {
        console.log("func2");
    },
};

メソッド

function

書かなくていい

var func = function () {
    var x = 100;
    var y = 10;
    
    return {x, y}; // いつもだったら{x: x, y: y}
};

オブジェクトリテラル

コロン

かかなくていい

var value = 530000;

// いままで
var text1 = "私の戦闘力は"+value+"です";

// これから
var text2 = `私の戦闘力は${value}です `;

// 改行いれてもok(ただし\n扱い)
var text3 = `私の
戦闘力は${value}です `;

文字列内で変数を展開

+

かかなくていい

覚えると楽できる編

• 2進数とか直接書く
• Objectのkeyで演算子使う
• アローファンクション
• アローファンクション注意点
• 可変長引数と展開
• 分割代入(デストラクチャリング)
• デストラクチャリング応用例

2進数とか直接書く

console.log(0b0011); // 3

bit 直接書ける

Objectのkeyに演算子つかえる

var interval = 5;
var object = {
    [5]: 0,
    [5+interval]: 1,
    [5+interval*2]: 2,
};

オブジェクトリテラルで
演算子使える

アローファンクション

var square1 = function (x) {
    return (x * x);
};

var square2 = (x) => { // function省略
    return (x * x);
};

var square3 = x => { // 引数括弧の省略
    return (x * x);
};

var square4 = x => (x * x); // return の省略まで

function書かなくていい

アローファンクション注意点

var test = {
    func1: function () {
        return (function () { return this; })();
    },
    func2: function () {
        return (function () { return this; }.bind(this))();
    },
    func3: function () {
        return (() => this)(); // これ関数です 無名関数実行してます
    },
};

console.log(test === test.func1());   // -> false
console.log(test === test.func2());   // -> true
console.log(test === test.func3());   // -> true!?

thisのあつかい変わるよ

可変長引数と展開

var print1 = function () {
    console.dir(arguments);
};
print1(1,2,3,4);

// 可変長の引数を明示的に受け取れる
var print2 = function (...args) {
    console.dir(args);
};
print2(1,2,3,4);

// ちなみに展開にも使える
var array = [1,2,3];
array.push(...[4,5,6]); // [1,2,3,4,5,6]

リスト化、展開が
簡単にできるよ

分割代入(デストラクチャリング)

var [a, b, c] = [1,2,3];

// 以下と同等
var a = 1;
var b = 2;
var c = 3;

分割して代入できる

デストラクチャリング応用例

var a = 1;
var b = 2;

// 値のスワップが一行で書ける
var [a, b] = [b, a];

// オブジェクトにも応用
var vector = {
    x: 100,
    y: 200,
};
var {x: newX, y: newY} = vector;

// 同名だったら短縮して書ける
var {x, y} = vector;

おまけ

• let

let

for (let i=0; i<3; ++i) {}
// console.log(i); -> error

if (1) {
    let temp = 100;
}
// console.log(temp); -> error

変数のスコープがかわる

let

if (1) {
    let temp = 100;
    let temp = 100; // -> type error
}

(() => {
    let temp = 100;
    let temp = 100; // -> type error
})();

多重定義も禁止