1 この記事では、ES2015のいくつかの記述方法についてまとめたいと思います。

こんにちは！ともです(@_tomo_engineer)！

最近Vue.jsを勉強していて僕の知らないJavaScript(ES6, ES7)が出てき始めました。

そこで少しずつモダンなJavaScriptを勉強し始めます。ES6始めましたって人に向けて書きたいと思います。

この記事では、ES2015のいくつかの記述方法についてまとめたいと思います。

ES2015とは

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

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

ES2015 = ES6って所が混乱しますよね。

ES6はモダンなブラウザでは対応していてES7になると対応はまだのようです。

ですので現場は分かりませんがES6がメジャーとなる日は近いのではないでしょうか？それとも、もう既に実用的なのかな？

以降では

変数の宣言
アロー関数
スプレッド構文
find, findIndexメソッド
Promiseオブジェクト

について見て行きます。

変数の宣言

ES2015(ES6)ではvarは基本使用しない。
letやconstを使用します。

let

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

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

const

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

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

let constで共通していること

スコープを持っている事が共通しています。

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

constで宣言された配列

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

functionの省略

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

アロー関数

新しい関数の書き方です。

無名関数の定義には便利です。

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

テンプレートリテラル

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

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

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

分割代入

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} // オブジェクトリテラル

スプレッド構文

『…』で配列やオブジェクトリテラルが展開されます。

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

…を利用することで配列やオブジェクトが展開され、関数の引数に代入されるます。

最高に便利ですね。

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

スプレッド構文により配列やオブジェクトリテラルを展開し結合する事ができます。

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

配列やオブジェクトの中で最初に一致したものを探してくれるメソッドです。

const array = [ 
            { id: 1, name: 'りんご' },
             { id: 2, name: 'バナナ' } 
]  
let result = array.find(el => el.id === 2) 
console.log(result)// { id: 2, name: 'バナナ' }

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

このような無名関数でアロー関数を利用すると端的に書く事ができます。

findIndex

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

const array = [ { id: 1, name: 'りんご' },// index0
                      { id: 2, name: 'バナナ' }// index1 
]
  let result = array.findIndex(el => el.id === 2)
console.log(result)// -> 1

Vue.jsのdataにオブジェクトの配列で格納し、特定のデータを削除したい場合などはインデックスとspliceメソッドでデータを削除したりします。

とてもお気に入りのメソッドです。

Promise

非同期処理の完了や失敗を伝えてくれます。

次のように非同期処理を行う部分をPromiseオブジェクトで囲みreturnします。

非同期処理が成功した場合resolve関数が実行され、非同期処理が失敗した場合reject関数が実行されます。

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

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

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

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

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

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

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

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

myF2(100) 
    .then( value => { 
            console.log(value) 
     }) 
     .catch( value => { 
             console.log(value) 
     }) 
     .finally( () => { 
             console.log('finally') 
     }) //Output：error, finally

まとめ

ES6の文法をいくつか習得しました。

おさらい

変数の宣言はletとconst
関数はアロー関数を無名関数に使うと便利
スプレッド構文『…array』は配列を関数への代入や配列の結合に便利
find, findIndexで配列やオブジェクトを探索できる
Promiseで非同期処理の失敗や成功を受け取れる

もっとES6を使いこなせるように頑張ろう！