Help us understand the problem. What is going on with this article?

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away