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は再宣言することができません。

let.js

'use strict'
let a;
let a;// Error // 再宣言NO

const

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

const.js

'use strict'
const a = 0;
a = 1;// Error // 再代入NO

let constで共通していること

スコープを持っている

scope.js

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

constで宣言された配列

constArray.js

const array = [1, 2];
array.push(3);// プッシュで追加は可能
array[0] = 3; // この代入は可能
array = [3, 4]; //再代入NO
array.length = 0; // length = 0で要素削除できる

functionの省略

funcShortHand.js

ES5
handleClick: function(){}
ES6
handleClick(){}

アロー関数

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

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する

テンプレートリテラル

template.js

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

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

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

objectshort.js

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

分割代入

split.js

const [a, b] = [1, 2]
console.log(a) => // -> 1

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

　リテラルとは

let name = "とも" // 文字列リテラル
let array = [1,2,3] //　配列リテラル
let object = {val: key} // オブジェクトリテラル

人間が入力する右側の部分をリテラルという

スプレッド構文(...で配列やオブジェクトリテラルが展開される)

spread.js

const array = [1,2,3]
let f = function(a, b, c){ console.log(a+b+c) }
f(...array) // -> 6

...を利用することで配列やオブジェクトが展開され、関数の引数に代入される
=>すごい便利

スプレッド構文を用いた配列の結合

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・・・最初に一致したものを返す

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・・・条件に一致した最初の要素のインデックスを１つ返す

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関数が実行される

promise.js

function myF() {
   return new Promise((resolve, reject) => {
       setTimeout(() => {
        resolve('success')
       }, 1000)
   }
}

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

bootMyF

myF().then(value => {
     console.log(value)//-> success //resolveの引数
})

次のような関数を作成し失敗させてみる

promise2.js

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

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

bootMyF2.js

myF2(100).catch(value => {
    console.log(value)//error
})

reject('error')が起動し、catchで受け取られた。

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

testFinally.js

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

//出力は　error と finallyとなる