ES2015について学びメモ

# なぜやろうと思ったか
Vue.jsをやっていて自分の知ってるJSでは太刀打ちできなくなってきたから

#ES2015とは
ES2015(ES6)とは新しめのJavaScriptです。
モダンなブラウザであれば利用できます。

http://kangax.github.io/compat-table/es6/
ブラウザの対応状況をみるとメジャーなものはほぼ100%です。(IEは知らん)

ES2015 = ES6ってのがややこしいですが
僕の知ってるJS = ES5
これから勉強するJS = ES6(ES2015)
ってこと。

# 変数の宣言
ES2015(ES6)ではvarは基本使用しない。
letやconstを使用します。

# let
letは再宣言することができません。

```js:let.js
'use strict'
let a;
let a;// Error // 再宣言NO
```

# const
constは再宣言・再代入ができない

```js:const.js
'use strict'
const a = 0;
a = 1;// Error // 再代入NO
```

# let constで共通していること
スコープを持っている

```js:scope.js
{
  let a = 0;
}
console.log(a);// aなんて知らない
```

# constで宣言された配列
```js:constArray.js
const array = [1, 2];
array.push(3);// プッシュで追加は可能
array[0] = 3; // この代入は可能
array = [3, 4]; //再代入NO
array.length = 0; // length = 0で要素削除できる
```
# functionの省略

```js:funcShortHand.js
ES5
handleClick: function(){}
ES6
handleClick(){}
```

# アロー関数
新しい関数の書き方。
アロー関数ではスコープが維持され、thisで参照するとwindowsとかがthisで参照される
Vueインスタンスにthisでアクセスする場合は利用できない。
無名関数の定義には便利。

```js:arrow.js
let array = [1,2,3,4,5]
/* ES5 */
array.map(function(el){ return el * 2})

/* ES6 */
array.map(el => { return el * 2})

/* マスタッシュの省略でreturnがつく */
array.map(el => el * 2)

/* 要素が多い場合 */
array.map((el, index) => (el * 2))
// ()にすることでreturnの省略
// el(要素),index(ID)を取得

/* オブジェクトをreturn */
array.map(el => ({value: el*2}))
// ()によりreturn不要
// {value: el*2}をreturnする
```

## テンプレートリテラル

 ```js:template.js
// ES5の場合
'\
<div class="hoge">\
   <strong>' + this.name + '</strong>\
</div>'

// ES6の場合バッククオートが利用できる
// templateを書くときに重宝する
const template = `
<div class="template">
   <strong>${this.name}</strong>
</div>`
```

## オブジェクトのショートハンド

```js:objectshort.js
// ES5の場合
const newObject = {a:a, b:b}
// ES6の場合
const newObject = {a, b}
// 変数名とプロパティ名が同一の場合は省略できる
```

## 分割代入
```js:split.js
const [a, b] = [1, 2]
console.log(a) => // -> 1

const { name } = {id: 1, name 'りんご'}
//nameだけを代入できる
//v-for="{id, name} in list"とかで利用している
```

##　リテラルとは
```js:
let name = "とも" // 文字列リテラル
let array = [1,2,3] //　配列リテラル
let object = {val: key} // オブジェクトリテラル
```
人間が入力する右側の部分をリテラルという

## スプレッド構文(...で配列やオブジェクトリテラルが展開される)
```js:spread.js
const array = [1,2,3]
let f = function(a, b, c){ console.log(a+b+c) }
f(...array) // -> 6
```
...を利用することで配列やオブジェクトが展開され、関数の引数に代入される
=>すごい便利

## スプレッド構文を用いた配列の結合
```js:merge.js
   let array = [1,2,3]
   let newArray = [...array,4] // [1,2,3,4]
   // concatでもできる
   let newArray2 = array.concat([4,5,6]) // [1,2,3,4,5,6]
```

## 配列メソッド

### find・・・最初に一致したものを返す
```js:find.js
const array = [
   { id: 1, name: 'りんご' },
   { id: 2, name: 'バナナ' }
]

let result = array.find(el => el.id === 2)
console.log(result)// { id: 2, name: 'バナナ' }
```

見つからなければundefinedを返す

### findIndex・・・条件に一致した最初の要素のインデックスを１つ返す

```js:findIndex.js
const array = [
   { id: 1, name: 'りんご' },// index0
   { id: 2, name: 'バナナ' }// index1
]

let result = array.findIndex(el => el.id === 2)
console.log(result)// -> 1
```

### Promise・・・非同期処理の完了や失敗を伝えてくれる

次のように非同期処理を行う部分をPromiseオブジェクトで囲みreturnする
非同期処理が成功した場合resolve関数が実行される
非同期処理が失敗した場合reject関数が実行される

```js:promise.js
function myF() {
   return new Promise((resolve, reject) => {
       setTimeout(() => {
        resolve('success')
       }, 1000)
   }
}
```

成功した場合はthenメソッドが起動する

```js:bootMyF
myF().then(value => {
     console.log(value)//-> success //resolveの引数
})
```
次のような関数を作成し失敗させてみる

```js:promise2.js
function myF2(num){
   return new Promise((resolve, reject) => {
      if(num < 10){
         resolve('success')
      }else{
         reject('error')
      }
   })
}
```

失敗した場合はcatchメソッドが起動する

```js:bootMyF2.js
myF2(100).catch(value => {
    console.log(value)//error
})
```
reject('error')が起動し、catchで受け取られた。

成功でも失敗でも処理する内容はfinallyを使用する

```js:testFinally.js
myF2(100)
   .then(value => {
      console.log(value)
   })
   .catch(value => {
      console.log(value)
   })
   .finally( () => {
      console.log('finally')
   })

//出力は　error と finallyとなる
```