React 入門道場 ~ES6できることのまとめ~

はじめに

以前、ES5,ES6の違いについて学習しました。しかしながら、ES6でできることに関して纏めていなかったので今回勉強したことをアウトプットしていきたいと思います。

ES6(ES2015)

• 変数宣言はvarからletに
• 定数宣言(const)
• 関数宣言でアロー関数が使用できるように
• Class構文が使える
• モジュール機能の導入
• 便利な配列メソッドの実装
  → forEach,map,filter,find,every,some,reduce
• Promise, async/await(非同期通信)

アロー関数

アロー関数とは　その名の通り、　=>(矢)を使って関数リテラル。

便利な配列メソッドの実装

forEachメソッド

ES5,ES6それぞれの違い書き方には下記の通りです。

エディター

// ES5
var foods = ['pizza', 'beef', 'bread'];

for(var i = 0; i < foods.length; i ++) {
    console.log(foods[i]);
}

// ES6
foods.forEach(function(food){
    console.log(food);
});

エディター

// ES5
for(var i = 0; i < foods.length; i ++) {
    console.log(foods[i]);

ES5のforループの構文って変なとこにセミコロンあるし、書き方・順番間違えても変な挙動してしまうんですよね〜

一方、ES６については可読性も向上した記載方法になります。

エディター

// ES6
foods.forEach(function(food){
    console.log(food);
});

foodsの配列に対してforEachメソッドを呼んでいます。この中に匿名関数を入れることができる。
配列に対して一つずつ実行される関数となる。結果、 foodの中身が表示される。

わかりやすく図表化したものがこちらになります。

コールバック関数とは、先ほどのコードのこの部分に該当します。

エディター

// ES6
function(food){
    console.log(food);
});

一連の流れとして、foodsの配列の中の'pizza', 'beef', 'bread'が一個ずつ渡させて処理が実行される流れとなります。

最後に

最近、Reactの学習ができていなかったので再度学習していきたいと思います。