2017/8 ES2015 便利な構文ベスト5

佐々木誠
大阪
ECMASCript2015(ES2015)を使って1年ぐらいでしょうか。
よく使うおすすめ構文を紹介します。
(ES2015とは、当初はES6と呼ばれていたJavaScriptの2015年策定の言語仕様のことです)

ベスト1: const

再代入禁止のconst宣言。意図せず再代入してバグることもないし、変数の役割が明確になりコードがきれいになるので、var・letよりも断然利用しています。

// old
var menu = getTemplate();
menu = getTemplateMenu();

// ES2015
const menu = getTemplate();
menu = getTemplateMenu(); // エラーになり動きません

ベスト2: アロー関数

無名関数の省略記法です。function...とタイプしなくていいので基本使ってます。

// old
postMenu(data, function(msg){
	console.log('success: ' + msg);
});

// ES2015
postMenu(data, (msg)=>{
	console.log('success: ' + msg);
});

ベスト3: Template literal

いわゆるヒアドキュメントで、クォーテーションの代わりにバッククオートでくくれば、複数行にまたいで文字列を扱えます。あと、変数や関数も入れられるので動的に扱えて強力です。

// old
var dom = '<div class="menu">'
		+ text
	+ '</div>';'

// ES2015
const dom = `
	<div>
		${text}
	</div>
`;

ベスト4: 分割代入

オブジェクトから必要な要素だけ抜き出して利用することができます。完結に書けて、コードがきれいになります。

// old
var bounds = layer.getBounds();
var width = bounds.width;
var height = bounds.height;

// ES2015
const {width, height} = layer.getBounds();

ベスト5: let

varは関数スコープ内ならどこでも有効で、スコープが広すぎましたね。letはブロックスコープ内で有効なので、他言語と同じ感覚。

// old
if(enable){
	var menu = 'bread';
}
console.log(menu); // 動いちゃう

// ES2015
if(enable){
	let menu = 'bread';
}
console.log(menu); // ダメ(未定義)

こんな記事も読まれています