もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~

![maxresdefault.jpg](https://qiita-image-store.s3.amazonaws.com/0/10962/28fedbf0-e4ef-96e5-e31f-50926a245ace.jpeg)

JavaScriptにおける、ECMAScript6についてのまとめの前編です。またこの記事では、実践で使える情報のみまとめています。網羅的にすべてをまとめている情報ではありません。

基本構文の続き、アロー関数やPromiseはこちらの記事で。
[ECMAScript6のアロー関数とPromiseまとめ - JavaScript](http://qiita.com/takeharu/items/c23998d22903e6d3c1d9)

技術情報のみつぶやくアカウント作成しました。ECMAScript6などの最新情報も追っていきます。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
Feedly: [Feedlyをフォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)
RSS: http://qiita.com/takeharu/feed

# letによるブロックスコープ

JavaScriptの他言語との違いで、悩めるポイントとしてスコープの範囲があります。ECMAscript6から、let命令により関数スコープではなく、ブロックスコープが実現できます。

 - Before

```javascript
if (true) {
  var num = 1;
}

console.log(num); // 1
```

 - After

```javascript
if (true) {
  let num = 1;
}

console.log(num); // エラー
```

# constによる定数の宣言

今まで慣習で大文字で定数を表現していましたが、ECMAScript6からはconst命令が使用できます。

```javascript
const NUM = 1;
NUM = 2; // エラー
```

しかし、配列(オブジェクト)やオブジェクトは気をつける必要があります。プロパティは変更可能となります。

```javascript
// 直接変更は不可
const NUM_LIST = [1, 2, 3];
NUM_LIST = [5, 5, 5]; // エラー

// プロパティの変更は可能
const NUM_LIST = [1, 2, 3];
NUM_LIST[0] = 5;

console.log(NUM_LIST); // [5, 2, 3]
```

# テンプレート文字列

テンプレート文字列とは、「`」バッククォートでくくった文字列になります。

### 「\n」を使用しなくても改行可能

テンプレート文字列のひとつ目の特徴として、'\n'ではなく、そのまま改行に対応しています。

 - Before

```javascript

// 普通の文字列は「'」シングルクォート
var str = 'あ\nい\nう';

console.log(str);
/**
 * あ
 * い
 * う
 */

```

 - After

```javascript

// テンプレート文字列は「`」バッククォート
var str = `あ
い
う`;

console.log(str);
/**
 * あ
 * い
 * う
 */

```

### 変数の文字列への埋め込み

２つ目の特徴として、文字列のなかにそのまま変数を埋め込んで表現することが可能です。

 - Before

```javascript
var name = 'ハル';
var age = 21;

var str = '私の名前は' + name + 'です。' + age + '歳です';

console.log(str); // 私の名前はハルです。21歳です

```

 - After

```javascript
var name = 'ハル';
var age = 21;

var str = `私の名前は${name}です。${age}歳です`;

console.log(str); // 私の名前はハルです。21歳です
```

### タグ付きテンプレート

テンプレート文字列を関数の引数に渡すことで、テンプレート文字列による関数の出力が可能になります。関数への引数の渡し方は、通常の括弧の`()`ではなく、バッククォートの`` ` ```` ` ``となります。

```javascript
function tag(a, b, c, d) {

  // 一つ目の引数に通常の文字列が分割して代入されている
  console.log(a); // ['あ', 'い', '']

  // 二つ目以降の引数に順々に変数の値が代入されている
  console.log(b); // 1
  console.log(c); // 2
  console.log(d); // undefined
}

// 関数への渡し方は、通常のtag()ではない。
tag`あ${1}い${2}`;
```

# 分割代入

### 分割代入とは？

分割代入により、一度に複数の変数に、複数の値を代入できます。

 - Before

```javascript
var name = 'ハル';
var age  = 21;

console.log(name, age) // ハル 21
```

 - After

```javascript
var [name, age] = ['ハル', 21];

console.log(name, age) // ハル 21
```

### 分割代入による、値の入れ替え

今までは一度、tmpなどの一時変数を作成し、値の入れ替えを行うのが主流でした。しかし、分割代入により、一時変数が不必要となり、簡潔な記述で実現可能となりました。

 - Before

```javascript
var num1 = 10;
var num2 = 20;

console.log(num1, num2) // 10 20

// 値の入れ替え
var tmp = num1;
num1 = num2;
num2 = tmp;

console.log(num1, num2) // 20 10

```

 - After

```javascript
var num1 = 10;
var num2 = 20;

console.log(num1, num2); // 10 20

// 値の入れ替えは一行
[num1, num2] = [num2, num1];

console.log(num1, num2); // 20 10

```

### 関数で複数の値を一度に返す

一度に関数で複数の値を返すことができます。今まではオブジェクトや配列に代入して返していました。

```javascript
function getFruit() {
  return ['りんご', 'バナナ'];
}

var [fruit1, fruit2] = getFruit();

console.log(fruit1); // りんご
console.log(fruit2); // バナナ
```

### 「...」演算子により、複数の値を一つの配列にまとめる

「...」演算子を使用することにより、それ以降の値を一つの配列としてまとめることができます。

```javascript
var [name, age, ...fruit] = ['ハル', 21, 'りんご', 'みかん'];

console.log(name, age, fruit); // ハル 21 ['りんご', 'みかん']
```

また、「...」演算子を使用することにより、配列の展開もできます。

```javascript
var array = [1, 2, 3];

console.log(array);    // [1, 2, 3]
console.log(...array); // 1 2 3
```

これにより今まで配列で最大値を求める場合は、applyメソッドを使用する必要がありました。しかし、展開することにより、簡潔に記述可能となります。

 - Before

```javascript
var array = [1, 5, 3];

var max = Math.max.apply(null, array)

console.log(max); // 5
```

 - After

```javascript
var array = [1, 5, 3];

var max = Math.max(...array);

console.log(max); // 5
```

# ECMAScript6の関数

### 関数の引数で初期化

関数の呼び出し時に引数の指定をしなかった場合、初期値を代入することができます。

 - Before

```javascript
function show(name) {
  // nameがundefinedなら
  if (name === void 0) {
    name = 'ハル';
  }

  console.log(name);
}

show();      // ハル
show('はる'); // はる
```

 - After

```javascript
function show(name = 'ハル') {
  console.log(name);
}

show();      // ハル
show('はる'); // はる
```

### 即時関数の脱却。ブロックスコープを用いる。

JavaScriptの鉄板、即時関数からようやく開放されます。最初に覚えることの一つかもしれなかった即時関数です。{}で上記のブロックスコープが実現できます。

 - Before

```javascript
(function() {
  var num = 1;
}())

console.log(num); // エラー
```

 - After

```javascript
{
  let num = 1;
}

console.log(num); // エラー
```

### 「...」演算子により、複数の引数を一つの配列にまとめる

関数の引数に、「...」演算子を使用することができます。その際、配列としてそれ以降の値が一つにまとめられます。

```javascript
function showProfile(name, age, ...fruit) {
  console.log(name, age, fruit);
}

showProfile('ハル', 21, 'りんご', 'みかん'); // ハル 21 ['りんご', 'みかん']
```

これを使用することにより、今までの配列ライクなargumentsオブジェクトを使用する必要がなくなります。argumentsオブジェクトは、関数の引数を参照できるオブジェクトです。

 - Before

```javascript
function show() {
  // 配列に変換
  var args = Array.prototype.slice.call(arguments);

  console.log(args);
}

show(1, 2, 3); // [1, 2, 3]

```

 - After

```javascript
function show(...args) {
  console.log(args);
}

show(1, 2, 3); // [1, 2, 3]
```

### アロー関数

アロー関数では、従来の関数より完結に記述できます。

 - Before

```javascript
var show = function(text) {
  console.log(text);
};
```

 - After

```javascript
// アロー関数
var show = (text) => {
  console.log(text);
};

// 引数が一つの時には()を省略可能
var show = text => {
  console.log(text);
};

// また一文の場合、{}とreturnの省略も可能。
var show = (text) => text + ' さようなら';

var text = show('こんにちは');
console.log(text); // こんにちは さようなら
```

# 後編の記事

他にもアロー関数ではthisを固定できます。また、promiseなどの組み込みオブジェクトなどがあります。
基本構文の続き、アロー関数やPromiseはこちらの記事で。
[ECMAScript6のアロー関数とPromiseまとめ - JavaScript](http://qiita.com/takeharu/items/c23998d22903e6d3c1d9)

※ この記事では、実践で使える情報をピックアップしています。網羅的にすべてをまとめている情報ではありません。

# 外部アカウント

技術情報のみつぶやくアカウント作成しました。ECMAScript6などの最新情報も追っていきます。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
Feedly: [Feedlyをフォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)
RSS: http://qiita.com/takeharu/feed

# おすすめの記事

JavaScriptでは関数型言語の一部の機能？実践的なJavaScriptの関数型とは。
[JavaScriptで関数型プログラミングの入門](http://qiita.com/takeharu/items/cf98d352ff574c5ac536)

関数型プログラミングを強力に後押しするライブラリ、Underscore.jsとlodashとは。
[JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)](http://qiita.com/takeharu/items/7d4ead780710c627172e)

良質なスタイルガイドを真似したいなら、GoogleやjQueryを参考に。
[Javascriptのスタイルガイドまとめ(おすすめ4選)](http://qiita.com/takeharu/items/dee0972e5f39bfd4d7c8)

※ 画像の引用: https://www.youtube.com/watch?v=BnwFYJDes1c