（昔の）JavascriptからES6への最初の一歩

15496 ワード
ECMAScript es6 JavaScript JavaScript テキストリンク

頭の整理ついでに書き残し。

やること

ES6でこんなことできるようになったんだよ、をさらさらっと。

環境構築

環境が無くても最新のChromeであればJSFiddle等で動かして確認できるかと思います。

https://jsfiddle.net/

ブロックスコープ

見たままそのままですが、varの代わりにletを使って定義します。

if (true) {
    let hoge = 'hoge';
}
console.log(hoge); // error

ES6でもvarは使えますが基本的にletとこの後に出てくるconstを利用しましょう。

定数

Javascriptで悩みのタネのひとつだった定数宣言がES6でできるようになりました。ただし1点注意が必要で「再代入が禁止」されているだけで「変更は可能」という点です。

const hoge = 'hoge';
hoge = 'piyo'; // error

const hoge = [1, 2, 3];
hoge[1] = 999; // OK

絶妙にキモいですね。

テンプレート文字列

ヒアドキュメントというとわかりやすいかもしれないですね。

const hoge = [1, 2, 3];
console.log(`${hoge[0]}！${hoge[1]}！${hoge[2]}！ダァーッ！`); // 1！2！3！ダァーッ！

ちなみに改行もそのまま含めることができます。

分割代入

PHPとかでできるやつです。

let [l1, l2, l3] = [1, 2, 3, 4];
const [c1, c2, c3] = [5, 6];
console.log(`${l1}${l2}${l3}`); // 123
console.log(`${c1}${c2}${c3}`); // 56undefined

余剰分は切り捨てられて不足分はundefinedになります。

デフォルト引数

デフォルト引数が使えます。そう、ES6ならね。

function func(v = 'default') {
    console.log(v);
}
func('str'); // str
func(); // default

可変長引数

これまた便利です。argumentsオブジェクトを利用せずに自分で名前を付与して利用することができます。

function func(...hoge) {
    for (let v in hoge) {
        console.log(hoge[v]);
    }
}
func(1, 2, 3); // 123
func(1, 2, 3, 4, 5, 6, 7); //1234567

for - of

for - inはオブジェクトのプロパティ名（keyと言うとしっくりくるかも）を返すため、微妙に使い勝手がよろしくありませんでした。for - ofでは値を列挙してくれるので使い勝手が向上します。forEach的なやつですね。

function func(...hoge) {
    for (let v of hoge) {
        console.log(v);
    }
}
func(1, 2, 3); // 123

先に書いたfor - inと比べると理解しやすいと思います。

アロー関数

無名関数定義を簡潔に書けますよ、というやつです。

let func1 = function (v) {
    console.log(v);
};
let func2 = (v) => {
    console.log(v);
};
func1(1); // 1
func2(1); // 1

かんけつ〜（どんだけ〜的な感じで）。ただ簡潔に書けるだけじゃなくて引数が1つの時は()を省略できたり、1行でreturnする場合は{}がいらなかったりと削れるところはとことん削れます。

let func1 = function (i) {
    return i + 1;
};
let func2 = (i) => {
    return i + 2;
};
let func3 = i => {
    return i + 3;
};
let func4 = (i) => i + 4;
let func5 = i => i + 5;
console.log(func1(0)); // 1
console.log(func2(0)); // 2
console.log(func3(0)); // 3
console.log(func4(0)); // 4
console.log(func5(0)); // 5

クラス

ES6で一番重要とも言えるのがクラスの実装です。ES5の頃には四苦八苦していたクラスがついにサクッと簡単に使えるようになりました！早速コードを見てみましょう。

class sampleClass1 {
    constructor(v) {
        this._v = v;
    }
    get v() {
        return this._v;
    }
    set v(v) {
        this._v = v;
    }
}
let c1 = new sampleClass1('value');
console.log(c1.v); // value
c1.v = 'hoge';
console.log(c1.v); // hoge

非常に直感的でわかりやすいですね！
メンバは_を付けて定義して_を外したGetter/Setterを用意するのが慣例のようです。

最後に

大きなところはこんなもん、多分。

JAvaでの参照(強参照、ソフト参照、弱参照、虚参照)
poj 3414BFS