ES6(ES2015)の簡単なまとめ

概要

Udemyの動画でES6の講座を受けました。

【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド
https://www.udemy.com/javascriptes6

講座ではES6のそれぞれの新機能について、
どのような場面で活用できるかがサンプルコードや図を使用して解説されていました。

この記事では、私が学んだことを一言ずつでメモ程度に記載します。
また、詳細を確認できるようにMDNへのリンクも記載します。

forEach, map, filter, find, reduce

配列や連想配列に対し、コールバック関数で要素を一つ一つ処理する。

forEach：要素を一つずつ処理
map：要素を加工して、新しい配列を作る
filter：条件に一致する要素を抽出した新しい配列を作る
find：条件に一致する要素を抽出する。最初の一つを抽出すると終了する
reduce：結果となる値を持ち回りつつ要素を処理する。合計を計算する処理などに使う。

Array.prototype.forEach() - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Array.prototype.map() - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Array.prototype.filter() - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Array.prototype.find() - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
Array.prototype.reduce() - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

every, some

forEachなどと同じようにコールバック関数を書く。
戻り値は true, またはfalse になる。

every：すべての要素がtrueを返せばtrue
some：一つでもtrueを返す要素があればtrue

Array.prototype.every() - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every
Array.prototype.some() - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some

const, let

ES6ではvarを使用せず、定数をconst、変数をletで宣言する。
最初は常にconstで宣言し、必要に応じでletに修正するとletを最低限にできる。

const - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const
let - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let

テンプレートリテラル

バッククオートで文字列を記述する場合に、
${}　でくくることで変数を文字列の中に記述することができる。

テンプレート文字列 - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

アロー関数

functionの代わりにアロー関数 => を使うことができる。
アロー関数を使う場合いくつかの箇所で省略した記述ができる。

・引数が一つの場合、引数のカッコを省略できる。
・関数内の行が一つの場合、中カッコ {} を省略できる。
・関数内の行が一つの場合、returnを省略できる。

また、functionとアロー関数では、
コールバック関数内にthisを記述した場合の、thisの参照先が異なる。
アロー関数の場合、thisの参照先は関数の外側にあるオブジェクトになる。
（functionの場合については勉強不足でよく分かりません…）

アロー関数 - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

オブジェクトリテラル

オブジェクトの記述を簡略にできる。

キーと値の名称が同じ場合、名称のみの記述にできる。

{
  keyname: keyname
}
// ↓
{
  keyname
}

functionの、functionとセミコロンを省略できる。

{
  keyname: function() { return 1; }
}
// ↓
{
  keyname() { return 1; }
}

オブジェクト初期化子 - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer

デフォルト引数

関数の引数にデフォルト値を指定できる。

デフォルト引数 - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters

rest

数が不定の引数を (...パラメータ名) で書ける。

Rest parameters - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters

スプレッド演算子

配列、rest引数、オブジェクトなど、まとまったものを展開する。
配列同士を結合する場合などで簡略化した記述ができる。

スプレッド構文 - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

分割代入

配列またはオブジェクトから欲しい要素・プロパティを抜き出す。
配列をループする、オブジェクトのプロパティを一つ一つ参照するような、
定型的なコードを減らす事ができる。

分割代入 - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

class

JavaScriptで継承を行うにはプロトタイプチェーンという仕組みを利用する。
ES5までは継承のためにプロトタイプを操作するコードをいくつか書かなければならなかったが、
ES6になりclassを使って直感的に記述できるようになった。

継承とプロトタイプチェーン - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

ジェネレーター

for〜ofでイテレーションするためのイテレーターを作成する。

function* と宣言するとジェネレーター関数になる。
ジェンレーター関数内で yield を実行するたびに、一つのイテレーションとして値を返す。
yeild* を使って別のジェネレーターから委譲を受けることができる。

function_ - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function*

Symbol.iterator

オブジェクトにジェネレーターを設定できる。

Symbol.iterator - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator

promise

非同期処理を実行し、その処理の完了を待ってから正常終了した場合(resolve)とエラーの場合(reject)でそれぞれのコールバック関数を呼び出すことができる。
Ajax処理と相性が良い。

Promise - JavaScript _ MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

fetch

URLからのデータの取得など、時間のかかる処理を実行し promise を返す。
URLの場合HTTPレスポンスステータスコードが変えればエラー扱い(rejectのコールバック)にはならない。
HTTPレスポンスステータスコードが正常かを確認するにはレスポンスのokプロパティを確認する必要がある。

GlobalFetch.fetch() - Web API _ MDN
https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch