頭の整理ついでに書き残し。
やること
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を用意するのが慣例のようです。
最後に
大きなところはこんなもん、多分。