ES2015を使ってみる

ES2015(ES6)で追加された機能の中から、よく使いそうなものをいくつか試してみます。

ブラウザの対応状況

各ブラウザのES2015の対応状況はこちら
ブラウザによって対応状況が異なるため、実際の案件などで使用する場合、トランスパイラでES2015のコードを変換するなどの対応が必要になります。
今回は試しに使ってみるだけなので、Google Chromeでのみ動作を確認するようにします。
　

const/let

const/letは変数の宣言に使用します。
それぞれの特徴として、両方とも変数の再宣言はできませんが、constは値の代入が不可、letは値の代入が可能となっています。
基本的にはconstを使い、必要に応じてletを使う形がいいようです。

constで変数の再宣言を行ってみます。

JavaScript

const name = 'サーバルちゃん';
console.log(name); // 出力されない
const name = 'アライさん'; // 再宣言できない(エラー)
console.log(name); // 出力されない

constの再宣言のデモページ

constで値の代入を行ってみます。

JavaScript

const name = 'サーバルちゃん';
console.log(name); // サーバルちゃん
name = 'アライさん'; // 代入できない(エラー)
console.log(name); // 出力されない

constの値代入のデモページ

letで変数の再宣言を行ってみます。

JavaScript

let name = 'サーバルちゃん';
console.log(name); // 出力されない
let name = 'アライさん'; // 再宣言できない(エラー)
console.log(name); // 出力されない

letの再宣言のデモページ

letで値の代入を行ってみます。

JavaScript

let name = 'サーバルちゃん';
console.log(name); // サーバルちゃん
name = 'アライさん'; // 代入できる
console.log(name); // アライさん

letの値代入のデモページ

varでの変数宣言とは違い、ブラケット{}によるブロックスコープが有効です。

JavaScript

var name1 = 'かばんちゃん';
console.log(name1); // かばんちゃん
const name2 = 'サーバルちゃん';
console.log(name2); // サーバルちゃん
{
	var name1 = 'フェネック';
	console.log(name1); // フェネック
	const name2 = 'アライさん'; // {}でのブロックスコープが有効
	console.log(name2); // アライさん
}
console.log(name1); // フェネック (値が上書きされている)
console.log(name2); // サーバルちゃん (値が上書きされていない)

ブラケットによるブロックスコープのデモページ

for文内でのsetTimeout()も正しく動作します。

JavaScript

for (var i = 0; i < 3; i++) {
	setTimeout(function() {
		console.log(i); // 3,3,3
	}, 500);
}
for (let i = 0; i < 3; i++) {
	setTimeout(function() {
		console.log(i); // 0,1,2
	}, 1000);
}

for文内でのsetTimeout()のデモページ
　

アロー関数

関数の宣言を => を使った形に省略することができます。
単一式の場合や引数が1つの場合はさらに省略することもできます。

JavaScript

// 今までの関数
var greet1 = function(name) {
	return name + 'こんにちは';
};
console.log(greet1('かばんちゃん')); // かばんちゃんこんにちは

// ES2015
const greet2 = (name) => {
	return name + 'こんにちは';
};
console.log(greet2('サーバルちゃん')); // サーバルちゃんこんにちは

// {}とreturnを省略 (単一式だけの場合)
const greet3 = (name) => name + 'こんにちは';
console.log(greet3('アライさん')); // アライさんこんにちは

// ()を省略 (引数が一つの場合)
const greet4 = name => name + 'こんにちは';
console.log(greet4('フェネックさん')); // フェネックさんこんにちは

アロー関数のデモページ
　

関数の引数

関数の引数に初期値を設定することができます。

JavaScript

function greet(name = 'かばんちゃん') {
	return name + 'こんにちは';
}
console.log(greet('サーバルちゃん')) // サーバルちゃんこんにちは
console.log(greet()) // かばんちゃんこんにちは

引数の初期値のデモページ

可変長の引数も設定することができます。

JavaScript

function ppp(ace, leader, ...member) {
	console.log(ace); // プリンセス
	console.log(leader); // コウテイ
	console.log(member); // ["ジェーン", "イワビー", "フルルー"]
};
ppp('プリンセス', 'コウテイ', 'ジェーン', 'イワビー', 'フルルー');

可変長の引数のデモページ
　

Class構文

ES2016からClass構文が正式に実装されました。

JavaScript

class Friends {
	constructor(name) {
		this.name = name;
	}
	greet() {
		return this.name + ' こんにちは';
	}
}
const frends = new Friends('かばんちゃん');
console.log(frends.greet()); // かばんちゃんこんにちは

Class構文のデモページ
constructorはインスタンスが生成されたときに実行されるメソッドです。

staticメソッドはインスタンスを生成せずに呼び出すことができます。

JavaScript

class Friends {
	constructor(name) {
		this.name = name;
	}
	greet() {
		return this.name + ' こんにちは';
	}
	static speak(name) {
		return name + ' すごーい！';
	}
}
console.log(Friends.speak('かばんちゃん')); // かばんちゃん すごーい！

staticのデモページ

extendsキーワードを使うことでクラスの継承もできます。

JavaScript

class Friends {
	constructor(name) {
		this.name = name;
	}
	greet() {
		return this.name + ' こんにちは';
	}
	speak() {
		return this.name + ' すごーい！';
	}
}
class Raccoons extends Friends {
	speak(){
		return this.name + ' なのだ！';
	}
}
const frends = new Raccoons('アライさん');
console.log(frends.greet()); // アライさん こんにちは
console.log(frends.speak()); // アライさん なのだ！

extendsのデモページ
　

オブジェクト

オブジェクトのプロパティのキー名と変数名が同じ場合、入力を省略できます。

JavaScript

const name = 'かばんちゃん';
const type = 'ヒト';
const obj = {name, type};
console.log(obj);

オブジェクトの入力省略のデモページ
　

テンプレート文字列

「`」で文字列を囲うことで、${変数名} を使った変数展開ができます。

JavaScript

const name = 'サーバルちゃん';
const greet = `${name} こんにちは`;
console.log(greet); // サーバルちゃん こんにちは

変数展開のデモページ
　

【参考サイト】

• 【最低限知っておきたい】ES2015/ES6の基本構文とブラウザ対応状況 ｜ SiTest (サイテスト) ブログ
• ES2015(ECMAScript2015)の文法を覚える – ブログ書くより読むほうがすき
• ES2015(ES6) 入門 – Qiita