ES6

ES2015(ES6)とは?【JavaScript】

ProgateがES2015(ES6)に対応しました!せっかくの機会なのでES2015について書いていこうと思います。

https://twitter.com/prog_8/status/1004302748706172929

ECMAScriptとは

ES6やES2015のESと言うのはECMAScriptの略であり、ECMAScriptとはEcma Internationalによって定められるJavaScriptの標準規格です。

1997年に初版のES1が策定され、今回のES6はES2015と言う名前からもわかるように2015年に策定されました。

ES6, ES2015と二つの呼び名があるのは、ES6からエディション名ではなく発行年が付加されるのが推奨されているためで、6th以降はES2016,ES2017と言うようになっています。

 

ES2015

ES2015では、多くの新しい機能や文法が追加され、一気にJavaScriptが使いやすくなりました。

ES2015での記法はReactなどでも多く使われるため、フロントエンド開発に携わるなら必須の知識といっても良いと思います。

ただ、最新の主要なブラウザではほとんど対応しているのですが、ES6のサポートがないブラウザもまだ残っているので、その場合はトランスパイルしてES5の環境でも動作するようにする必要があります。

主要な変更を簡単にまとめていきます。

概要だけ簡単に言っているため、詳細を知りたい場合は他の詳しく説明しているサイトを参考にしていただきたいです。

クラス

ES5まではクラスはただの関数だったため、ES6での変更で他の言語のようにオブジェクト指向のように扱うことができるようになりました。

イテレータ

イテレータとは、配列のような集合的なデータ構造に対して、順番に繰り返し処理を行うものです。

これにより、配列などのデータ構造の扱いを楽に行うことができます。

アロー関数

アロー関数は、関数を式のように簡潔に表現したものです。

thisを束縛しなかったりと副作用的(悪い意味ではない)なものも多いのですが、Reactなどで多用すると思うのでぜひ使えるようになりたい機能です

【=>って何?】アロー関数 (arrow function)【JavaScript】

スプレッド構文

スプレッド構文は配列などのiterableオブジェクトを展開する機能です。

Reactのpropsなどで使うととても便利です。

【(3点リーダ)…propsって何?】スプレッド構文(Spread syntax)【JavaScript】

ジェネレーター

ジェネレーターとは、Pythonなどにある、データを生成(ジェネレート)して他の手続きに渡すような機能で、関数内で一時停止や再開を行うことができます。

【function* yield】ジェネレーターとは?【JavaScript】

Promise

Promiseは、非同期処理を扱いやすくしたもので、これまでネスト地獄になっていた処理を綺麗に記述することが可能となります。

現在ではPromiseの概念の理解はほぼ必須だと思うので、ぜひ理解して起きたい機能です。

非同期処理に関しては、のちに出てくるasync/awaitと言う機能がとても便利なのでこちらも合わせて理解しましょう!

非同期処理を簡単に書けるasync/awaitとは?【JavaScript】

 

 

せっかくProgateで実装されたので、これを機会にJavaScriptをぜひ!!

初めての人にオススメしたいReactの勉強法【初心者向け】