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

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

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

やること

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 

可変長引数

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

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を用意するのが慣例のようです。

最後に

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