ECMAScript2015の構文覚え書き

カテゴリー：ECMAScript2015

記事作成日：2017.10.17

ECMAScript2015(ES6)(ES2015)の登場でJavaScriptはとても書きやすくなりました。難解な構文を意識することなくスイスイ書けるES2015は本当にコーディングが楽しい。しかし、ほんの20行程度のコードの場合はいちいちBabelを通すのは面倒なのでECMAScript5(ES5)で書くことも多いです。ES5とES2015との構文使い分けがちょっと混乱したので自分用のまとめです。自分用のまとめなので詳しい解説は省いていることと、全ては網羅していません。

## 厳格モード

ES2015
```javascript
'use strict';
```
暗黙的グローバル禁止など。関数内で宣言すれば関数内で有効

## 変数宣言

ES5
```javascript
var
```
ES2015
```javascript
let
const
```
スコープが違う

## Symbol

ES2015
```javascript
const CAT = Symbol();
const DOG = Symbol();
const CATWHITE = Symbol('cat white');	//文字列は単なる説明用
const DOGONE = Symbol(2);		//数値も単なる説明用
const DOGTWO = Symbol(1 + 1);	//数値も単なる説明用

console.log(CAT);		//Symbol()
console.log(DOG);		//Symbol()
console.log(CATWHITE);	//Symbol(cat white)
console.log(DOGONE);	//Symbol(2)
console.log(DOGTWO);	//Symbol(2)
console.log(DOGONE == DOGTWO);	//false Symbolは全てユニーク
console.log(CAT == DOG);	//false Symbolは全てユニーク
```
いずれとも競合しない一意の値を生成

## テンプレートリテラル
ES2015
```javascript
const a = 100;
const b = 200;
console.log("あa,bか");		//あa,bか
console.log('あa,bか');		//あa,bか
console.log(`あa,bか`);		//あa,bか
console.log("あ${a},${b}か");	//あ${a},${b}か
console.log('あ${a},${b}か');	//あ${a},${b}か
console.log(`あ${a},${b}か`);	//あ100,200か
console.log(`あ${a + b}か`);	//あ300か
```

## 分割代入
ES2015
```javascript
const obj = {'b':100,'c':200,'d':300};
const {a,b,c} = obj;
console.log(a);		//undefined
console.log(b);		//100
console.log(c);		//200
console.log(d);		//ReferenceError: d is not defined
```
```javascript
const obj = {'b':100,'c':200,'d':300};
let a,b,c;

// {a,b,c} = obj;	これは間違い SyntaxError: expected expression, got '='
({a,b,c} = obj);
console.log(a);		//undefined
console.log(b);		//100
console.log(c);		//200
```
```javascript
const ary = [100,200,300];
let [a,b] = ary;
console.log(a);		//100
console.log(b);		//200
```
```javascript
const ary = [100,200,300,400,500];
let [a,b,...c] = ary;
console.log(a);		//100
console.log(b);		//200
console.log(c);		//[300,400,500]
```
```javascript
let a = 100;
let b = 200;
[a,b] = [b,a];
console.log(a);		//200
console.log(b);		//100
```
```javascript
function fnc(...a) {	//可変長引数受け取り
	console.log(a);		//[100,200,300]
	console.log(a[0]);		//100
	console.log(a[1]);		//200
	console.log(a[2]);		//300
	console.log(a[3]);		//undefined
}
fnc(100,200,300);
```

## ループ

ES5
```javascript
for (var i = 0; i < 10; i++) {
}
```
```javascript
var i = 0;
while (i < 10) {
	i++;
}
```
```javascript
var i = 0;
do {
	i++;
} while (i < 10);
```
```javascript
var ary = [100,200,300];
for (var i = 0; i < ary.length; i++) {
	console.log(ary[i]);	//100, 200, 300
}
```
## 順次アクセス　for in / for of

ES5
```javascript
var obj = {'a':100,'b':200,'c':300};
for (var key in obj) {
	console.log(key);	//'a', 'b', 'c'
	console.log(obj[key]);	//100, 200, 300
}
```
ES2015
```javascript
const ary = [100,200,300];
for (let v of ary) {
	console.log(v);		//100, 200, 300
}
```

## 順次アクセス forEach

ES2015
```javascript
const a = [100,200,300];
a.forEach((v) => {
	console.log(v);		//100, 200, 300
});
```
```javascript
const a = [100,200,300];
a.forEach((v,index,ary) => {
	console.log(v);			//100, 200, 300
	console.log(index);		//0, 1, 2
	console.log(ary);		//[100,200,300], [100,200,300], [100,200,300]
});
```

## 関数
ES5
```javascript
function fnc(val) {
	console.log(val);
}
fnc(100);	//100
```
```javascript
var fnc = function(val) {
	console.log(val);
}
fnc(100);	//100
```
ES2015
```javascript
const fnc = (val) => {		//アロー関数
	console.log(val);
}
fnc(100);	//100
```
```javascript
const fnc = (val) => console.log(val);
fnc(100);	//100
```
```javascript
const fnc = (a,b) => a + b;
const c = fnc(100,200);
console.log(c);		//300
```
ES2015 関数の引数で分割代入を使用
```javascript
const fnc = ([a,b,c]) => {
	console.log(a);		//100
	console.log(b);		//200
	console.log(c);		//300
}
const ary = [100,200,300];
fnc(ary);
```
```javascript
const fnc = ({a,b,c}) => {
	console.log(a);		//100
	console.log(b);		//200
	console.log(c);		//300
}
const obj = {'a':100,'b':200,'c':300};
fnc(obj);
```
## 即時関数

ES5
```javascript
(function(a){
	console.log(a);	//100
})(100);
```
```javascript
var b = (function(a) {
	console.log(a);	//200
	return 300;
})(200);
console.log(b);		//300
```
ES2015
```javascript
((a) => {
	console.log(a);	//400
})(400);
```
```javascript
const c = ((a) => {
	console.log(a);	//500
	return 600;
})(500);
console.log(c);		//600
```
```javascript
const d = (() => {
	return 700;
})();
console.log(d);		//700
```
```javascript
const e = () => {	//即時関数ではない場合
	return 800;
};
console.log(e);		//function e()
console.log(e());		//800
```
```javascript
const f = (() => {	//即時関数ではない場合
	return 900;
});
console.log(f);		//function f()
console.log(f());		//900
```

## デフォルト引数
ES5
```javascript
function fnc(a,b) {
	console.log(a);		//100
	console.log(b);		//undefined
}
fnc(100);
```
```javascript
function fnc(a,b) {
	b = b || 200;
	console.log(a);		//100
	console.log(b);		//200
}
fnc(100);
```
```javascript
function fnc(a,b) {
	b = (typeof b === 'undefined') ? 200 : b;
	console.log(a);		//100
	console.log(b);		//200
}
fnc(100);
```
ES2015
```javascript
function fnc(a,b = 200) {
	console.log(a);		//100
	console.log(b);		//200
}
fnc(100);
```

## メソッドの省略記法
ES5
```javascript
var obj = {'a':100,'b':function(){return 200;}};
console.log(obj.a);	//100
console.log(obj.b());	//200
```
ES2015
```javascript
const obj = {'a':100,'b'(){return 200;}};
console.log(obj.a);	//100
console.log(obj.b());	//200
```

## Map

ES2015
```javascript
const a = new Map([
	[1,'aaa'],
	[2,'bbb'],
	[3,'ccc'],
]);

for (let [k,v] of a) {
	console.log(k);	//1, 2, 3
	console.log(v);	//'aaa', 'bbb', 'ccc'
}
for (let [k,v] of a.entries()) {
	console.log(k);	//1, 2, 3
	console.log(v);	//'aaa', 'bbb', 'ccc'
}
for (let k of a.keys()) {
	console.log(k);	//1, 2, 3
}
for (let v of a.values()) {
	console.log(v);	//'aaa', 'bbb', 'ccc'
}
console.log(a.has(2));	//true
console.log(a.has(5));	//false

a.delete(2);	//キーが2の要素を削除
for (let [k,v] of a) {
	console.log(k);	//1, 3
	console.log(v);	//'aaa', 'ccc'
}

a.set(5,'eee');		//キーが5の要素を追加
for (let [k,v] of a) {
	console.log(k);	//1, 3, 5
	console.log(v);	//'aaa', 'ccc', 'eee'
}

console.log(a.get(3));	//'ccc'

console.log(a.size);	//3
a.clear();
console.log(a.size);	//0
```

## Set

ES2015
```javascript
const a = new Set([2,'aaa',100]);
const b = new Set([2,'aaa',100,2,100,7]);	//重複の2と100は2個目以降無視される(エラーにならない)

for (let v of a) {
	console.log(v);		//2, 'aaa', 100
}
for (let v of b) {
	console.log(v);		//2, 'aaa', 100, 7
}

const c = [2,'aaa',100,2,100,7];	//従来の配列の場合は重複許可
for (let v of c) {
	console.log(v);		//2, 'aaa', 100, 2, 100, 7
}
```

## map

ES2015
```javascript
const fruits = [{n:'banana',p:100},{n:'apple',p:150},{n:'grape',p:200}];
const n = fruits.map(x => x.n);
console.log(n);		//['banana','apple','grape']
const p = fruits.map(x => x.p);
console.log(p);		//[100,150,200]
const tax = fruits.map(x => x.p * 0.08);
console.log(tax);	//[8,12,16]
const nuc = fruits.map(x => x.n.toUpperCase());
console.log(nuc);	//['BANANA','APPLE','GRAPE']
```
```javascript
const nAry = ['banana','apple','grape'];
const pAry = [100,150,200];
//const fruits = nAry.map((x,i) => {n:x,p:pAry[i]});	()が必要 SyntaxError
const fruits = nAry.map((x,i) => ({n:x,p:pAry[i]}));
console.log(fruits);	//[{n:'banana',p:100},{n:'apple',p:150},{n:'grape',p:200}]
```

## filter

ES2015
```javascript
const fruits = [{n:'banana',p:100},{n:'apple',p:150},{n:'grape',p:200}];
const a = fruits.filter(fruits => fruits.p > 120);
console.log(a);		//[{n:'apple',p:150},{n:'grape',p:200}]

const b = [11,22,33,44,55,66];
const c = b.filter(b => (b % 2 == 0));
console.log(c);		//[22,44,66]
```

## reduce

ES2015
```javascript
const ary = [100,200,300];

const sum1 = ary.reduce((a,x) => {	//aはアキュムレータ xは現在の配列要素
	a = a + x;
	return a;
},0);	//0は初期値
console.log(sum1);	//600

const sum2 = ary.reduce((a,x) => {
	a = a + x;
	return a;
});	//初期値が無い場合は配列の先頭要素が初期値として使用され、2番目の要素から呼ばれる
console.log(sum2);	//600

const sum3 = ary.reduce((a,x) =>	//ブロックで囲まない場合はreturn文不要
	a = a + x
);
console.log(sum3);	//600

const sum4 = ary.reduce((a,x) => a += x, 0);
console.log(sum4);	//600

const sum5 = ary.reduce((a,x) => a + x, 0);	//計算値がreturnになるのでaへの代入不要
console.log(sum5);	//600

const sum6 = ary.reduce((a,x) => a + x);	//一番短く書くとこうなる
console.log(sum6);	//600

var sum7 = ary.reduce(function(a,x) {	//ちなみにES5の書式も交えるとこうなる
	a += x;
	return a;
},0);
console.log(sum7);	//600
```

## class

ES2015
```javascript
class Fruit {
	constructor(n,p) {
		this.n = n;
		this.p = p;
	}
	namePrice() {
		return this.n + ' = ' + this.p + 'yen';
	}
	priceWithTax() {
		return this.p * 1.08;
	}
}
const fruit = new Fruit('banana',100);
console.log(fruit instanceof Fruit);	//true
const c = fruit.namePrice();
console.log(c);		//'banana = 100yen'
const d = fruit.priceWithTax();
console.log(d);		//108
```
```javascript
class Fruit {
	static addPen(str) {	//静的メソッド
		return str + 'pen';
	}
}
const a = Fruit.addPen('apple');	//インスタンス化無しで呼び出せる
console.log(a);		//'applepen'
```
```javascript
class Fruit {
	constructor(n,p) {
		this._n = n;
		this._p = p;
	}
	set n(n) {		//セッター
		this._n = n;
	}
	get n() {		//ゲッター
		return this._n;
	}
}
const fruit = new Fruit('apple',150);
console.log(fruit.n);	//apple
fruit.n = 'grape';
console.log(fruit.n);	//grape
```
```javascript
class Fruit {
	constructor(n,p) {
		this.n = n;
		this.p = p;
	}
	namePrice() {
		return `${this.n} = ${this.p}yen`;
	}
}
class FruitTax extends Fruit {	//派生
	constructor(n,p,t) {
		super(n,p);		//親クラスのコンストラクタ呼び出し
		this.t = t;
	}
	namePrice() {	//オーバーライド
		return `${super.namePrice()}(with out tax)`;
	}
	namePriceTax() {
		return `${super.namePrice()}(with tax ${this.p * (this.t + 1)}yen)`;
	}
}

const fruit = new FruitTax('banana',100,0.08);
const c = fruit.namePrice();
console.log(c);		//'banana = 100yen(with out tax)'
const d = fruit.namePriceTax();
console.log(d);		//'banana = 100yen(with tax 108yen)'
```

## Object.freeze

ES2015
```javascript
const obj = {a:100,b:200};
obj.c = 300;
console.log(obj);	//{a:100, b:200, c:300}
Object.freeze(obj);
console.log(Object.isFrozen(obj));	//true
obj.d = 400;		//'use strict'; が無い場合は無視されるだけ
console.log(obj);	//{a:100, b:200, c:300}
```
```javascript
'use strict';
const obj = {a:100,b:200};
obj.c = 300;
console.log(obj);	//{a:100, b:200, c:300}
Object.freeze(obj);
console.log(Object.isFrozen(obj));	//true
obj.d = 400;	//Uncaught TypeError: Cannot add property d, object is not extensible
/* 'use strict'; が有る場合はここでエラー */
```
freeze は read only になる

## Object.seal

ES2015
```javascript
const obj = {a:100,b:200};
obj.c = 300;
console.log(obj);	//{a:100, b:200, c:300}
Object.seal(obj);
console.log(Object.isSealed(obj));	//true
obj.d = 400;	//'use strict'; が無い場合は無視されるだけ
console.log(obj);	//{a:100, b:200, c:300}
```
```javascript
'use strict';
const obj = {a:100,b:200};
obj.c = 300;
console.log(obj);	//{a:100, b:200, c:300}
Object.seal(obj);
console.log(Object.isSealed(obj));	//true
obj.d = 400;	//Uncaught TypeError: Cannot add property d, object is not extensible
/* 'use strict'; が有る場合はここでエラー */
```
seal は read/write可能で、add/delete不可

## Object.preventExtensions

ES2015
```javascript
const obj = {a:100,b:200};
obj.c = 300;
console.log(obj);	//{a:100, b:200, c:300}
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj));	//false
obj.d = 400;	//'use strict'; が無い場合は無視されるだけ
console.log(obj);	//{a:100, b:200, c:300}
```
```javascript
'use strict';
const obj = {a:100,b:200};
obj.c = 300;
console.log(obj);	//{a:100, b:200, c:300}
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj));	//false
obj.d = 400;	//Uncaught TypeError: Cannot add property d, object is not extensible
```
preventExtensions は read/write/delete可能で、addのみ不可

## import export

import/exportはまだ使えない様です。(2017.10)

ES2015
```javascript
// module.js
export const taxRate = 0.08;
export class Fruit {
	constructor(n,p) {
		this.n = n;
		this.p = p;
	}
	namePrice() {
		return `${this.n} = ${this.p}yen`;
	}
}
```
```javascript
import {taxRate} from './module.js';
console.log(taxRate);
```
```javascript
import {taxRate,Fruit} from './module.js';
```

## **

ES2016
```javascript
const a = 3 ** 2;	//Math.pow(3,2)
console.log(a);	//9
```

## Array.prototype.includes

ES2016
```javascript
const ary = [100,200,NaN,300];
console.log(ary.includes(100));	//true
console.log(ary.indexOf(100));	//0
console.log(ary.includes(150));	//false
console.log(ary.indexOf(150));	//-1
console.log(ary.includes(NaN));	//true
console.log(ary.indexOf(NaN));	//-1　indexOFではNaNは見つからない
```

<br>
<br>
##### 参考文献

オライリージャパン オーム社 初めてのJavaScript第3版<br>
日経BP社 日経BPマーケティング 日経ソフトウエア

## あとがき

すべては書ききれないので、気づいた点はちょこちょこ追記していくことになります。

CONTENTS

ブラウザ

FirefoxでURL欄から検索させない。

ウェブサーバー

mod_rewrite、RewriteRule のデバッグ。正規表現にマッチした値を表示する

CSS

CSS counter 自動ナンバリングまとめ

CSS