ES2015について勉強して知ったことについて書いていく。
※便宜上、jQueryを使っているところがあります。
※書いている途中から眠くなったのでなんかおかしなことが書いてあるかも・・・
ES2015について
- ES2015とは「ECMAScript2015」の略
- ECMAScriptはJavascriptの標準化のために策定される言語仕様で、ECMAScriptという言語があるわけではない
- もともとES2015はES6という名称になる予定だった
- 今後は毎年仕様を更新するということらしい。。。
- ES2015は基本的にブラウザでそのまま使えない
- 誤解のないように書くとAPIによってはいすでにブラウザに対応されているものもある。詳しくはURL参照
- トランスパイラと呼ばれるツールを使って、ES2015で書かれたソースコードをビルドすれば、
ES5以前のソースコードに変換されるので、既存のブラウザでも使用できるようになる。
よく使う構文
かなり便利な機能が追加されたES2015。
その中でもかなり便利な機能をいくつか紹介。
クラス
待望のクラスが使えるようになった。
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なのでもちろん継承することも可能！！
class Klass {
...
}
class Child extends Klass {
constructor() {
super('サトシ', 10);
}
...
}
アロー関数
アロー関数が導入された。コールバック関数を次のような省略された形式で書ける。
$('#button').on('click', (event) => {
...
});
普通の無名関数よりもいいなと思ったのは、アロー関数を使うとthisが関数定義時の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と使い方似ている気がする
// hoge関数をエクスポート
function hoge(name) {
console.log(`Hello ${name}`);
}
export default hoge; // デフォルトモジュール
// hogeSub関数をエクスポート
function hogeSub(name) {
console.log(`Hello ${name}`);
}
export hogeSub;
// 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をつけて宣言した変数は書き換えができなくなる(定数となる)。
const a = 1000;
a += 1000; // <= 書き換えできないのでこれはエラー
letについて
letは...うまく説明できないのでMDNから引用。
let文はブロックスコープの局所変数を宣言します。任意で値を代入して初期化できます。
要するにletを使えばif文やfor文の中だけで有効な変数を宣言できるようなる。
これで関数内部で使用するすべての変数を先頭で宣言するような実装をしなくて済むようになった！！
for(let i = 0; i < 10; ++i) {
console.log(i); // 0〜9が出力される
}
console.log(i); // undefinedになる
テンプレートリテラル
文字列に変数を埋め込めるようになった。
var a = 'ゴジラ';
var b = 'メカゴジラ';
// テンプレートリテラルはバッククォートで文字列を囲む
// ${xxx} は文字列に埋め込むデータ
console.log(`${a} VS ${b}`);
$ ゴジラ VS メカゴジラ
所感
ES2015ではクラスをはじめ、これまでのJSよりはるかにプログラムを作成しやすい言語になったなーと感じた。継続案件で改修が難しい場合などを覗いて、今後はES2015で策定された機能を使って開発するべきだと思う。
これまでJavascriptでは「変数宣言では必ずvarをつけて定義ましょう」と言われていたが、letやconstの登場でもはやvarを使う価値はないように思う(Effective Modern Javascriptみたいな本が出てきたら「varをやめてlet/constを使おう」みたいな項目があると思う)。
この記事を書くにあたり、ES2015の対応状況を見てみたところ、classやアロー関数はモダンなブラウザではすでにサポートされたと知った。
ちょっと前までは「ES2015使うならトランスパイラ必須！！」みたいな感じだったけど、規模の小さい案件であればトランスパイラ使わなくてもいいと思う。
ただ、import/exportについては残念ながら実装されていないようだ。なので今後もトランスパイラさんにはお世話になるでしょう。