徒然ES2015メモ

ES2015について勉強して知ったことについて書いていく。
**※便宜上、jQueryを使っているところがあります。**
**※書いている途中から眠くなったのでなんかおかしなことが書いてあるかも・・・**

## ES2015について

* ES2015とは「ECMAScript2015」の略
* ECMAScriptはJavascriptの標準化のために策定される言語仕様で、ECMAScriptという言語があるわけではない
* もともとES2015はES6という名称になる予定だった
    * 今後は毎年仕様を更新するということらしい。。。
* ES2015は基本的にブラウザでそのまま使えない
    * 誤解のないように書くとAPIによってはいすでにブラウザに対応されているものもある。詳しくは[URL](http://kangax.github.io/compat-table/es6/)参照
* トランスパイラと呼ばれるツールを使って、ES2015で書かれたソースコードをビルドすれば、  
  ES5以前のソースコードに変換されるので、既存のブラウザでも使用できるようになる。


## よく使う構文

かなり便利な機能が追加されたES2015。
その中でもかなり便利な機能をいくつか紹介。


### クラス

待望のクラスが使えるようになった。

```js:es2015でのclass

class Klass {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getName() {
        return this.name;
    }

    getAge() {
        return this.age;
    }
}

var klass = new Klass('ukyoda', 18);
console.log(klass.getAge());

```

classなのでもちろん継承することも可能！！

```js:classの継承

class Klass {
...
}

class Child extends Klass {
    constructor() {
        super('サトシ', 10);
    }
    ...
}

```

### アロー関数

アロー関数が導入された。コールバック関数を次のような省略された形式で書ける。

```js:アロー関数サンプル

$('#button').on('click', (event) => {
...
});

```

普通の無名関数よりもいいなと思ったのは、アロー関数を使うとthisが関数定義時のthisを指すようになる。


```js:thisの取り扱い

// これまでは、下のthatのように、thisを別の変数に代入して使用する必要があった
var that = this;
$('#button').on('click', function(event) {
    that.counter++;
});

// アロー演算子だったら、thisをそのまま使えるようにできる
$('#button').on('click', (event) => {
    this.counter++;
});

```

### import/export

import、exportが導入され、外部のモジュールをインポートして使用することができる仕様が策定された。個人的にはPythonのimportと使い方似ている気がする

```js:import

// hoge関数をエクスポート
function hoge(name) {
    console.log(`Hello ${name}`);
}
export default hoge; // デフォルトモジュール

// hogeSub関数をエクスポート
function hogeSub(name) {
    console.log(`Hello ${name}`);
}
export hogeSub;
```

```js:使い方
// hoge.jsをインポート
// ./hoge.jsからhoge関数とhogeSub関数をロードする。
import hoge, {hogeSub} from './hoge';

// asを使えばモジュールの名称が変えられる。
import hoge as hoge_, {hogeSub as hogeSub_} from './hoge';


```

### letとconstによる変数の宣言

es2015より、変数の宣言方法としてletとconstが使用できるようになった。

**constについて**

`const`をつけて宣言した変数は書き換えができなくなる(定数となる)。

```js:こんなことはできない！！
const a = 1000;
a += 1000; // <= 書き換えできないのでこれはエラー
```

**letについて**

`let`は...うまく説明できないので[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let)から引用。

> `let` 文はブロックスコープの局所変数を宣言します。任意で値を代入して初期化できます。

要するに`let`を使えば`if`文や`for`文の中だけで有効な変数を宣言できるようなる。
これで関数内部で使用するすべての変数を先頭で宣言するような実装をしなくて済むようになった！！

```js:let

for(let i = 0; i < 10; ++i) {
    console.log(i); // 0〜9が出力される
}
console.log(i); // undefinedになる

```

## テンプレートリテラル

文字列に変数を埋め込めるようになった。

```js:テンプレートリテラル

var a = 'ゴジラ';
var b = 'メカゴジラ';
// テンプレートリテラルはバッククォートで文字列を囲む
// ${xxx} は文字列に埋め込むデータ
console.log(`${a} VS ${b}`); 

```

```js:結果
$ ゴジラ VS メカゴジラ
```

## 所感

ES2015ではクラスをはじめ、これまでのJSよりはるかにプログラムを作成しやすい言語になったなーと感じた。継続案件で改修が難しい場合などを覗いて、今後はES2015で策定された機能を使って開発するべきだと思う。

これまでJavascriptでは「変数宣言では必ず`var`をつけて定義ましょう」と言われていたが、`let`や`const`の登場でもはや`var`を使う価値はないように思う(Effective Modern Javascriptみたいな本が出てきたら「varをやめてlet/constを使おう」みたいな項目があると思う)。

この記事を書くにあたり、ES2015の対応状況を見てみたところ、classやアロー関数はモダンなブラウザではすでにサポートされたと知った。
ちょっと前までは「ES2015使うならトランスパイラ必須！！」みたいな感じだったけど、規模の小さい案件であればトランスパイラ使わなくてもいいと思う。

ただ、import/exportについては残念ながら実装されていないようだ。なので今後もトランスパイラさんにはお世話になるでしょう。

## 参考リンク

* [ECMAScript compatibility table](http://kangax.github.io/compat-table/es6/)
* [MDN JavaScriptリファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)