150421 es6とかな話

es6とかな話

khirayama

MFでフロントエンドやってます！

平山 光太郎

JSの次期標準仕様。

みんなが欲しがってた機能がいっぱい詰まってる。

es6（ECMAScript6）とは

JSの次期標準仕様。

みんなが欲しがってた機能がいっぱい詰まってる。

es6（ECMAScript6）とは

今月になって最終ドラフトが上がった....！

早ければ6月に標準化

Array.findArray.mapObject.keysObject.assign

JSの次期標準仕様。

みんなが欲しがってた機能がいっぱい詰まってる。

es6（ECMAScript6）とは

ClassModuleFunction ArgumentsArrow Function

let / constTemplate LiteralsPromise

Object.assign

Objectのcloneやmergeしたりが簡単に

Class

嬉しい。

もちろんextendsも

Module

export / importにも対応して、依存

管理ができるように

Arrow Function

thisを束縛して、今までやってたこと↓のが（だいたい）不要に。

var _this = this;

hogehoge.bind(this)

Template Literals

複数行の記述、変数の仕様、関数の実行を文字列に埋

め込めるように

でも、どうせ使えないんでしょ？

Babel（旧6to5）

es6のコードをes5にトランスパイル。

altJSみたいなもの。

Babel（旧6to5）

Babel（旧6to5）

React 入ってる

実際に使ってみた感想

Object.assign

Objectのcloneやmergeしたりが簡単に

Object.assign

Objectのcloneやmergeしたりが簡単に

マジ便利！

Class

嬉しい。

もちろんextendsも

Class

嬉しい。

もちろんextendsも

マジ便利！

Module

export / importにも対応して、依存

管理ができるように

Module

export / importにも対応して、依存

管理ができるように

ぱねぇ！

Arrow Function

thisを束縛して、今までやってたこと↓のが（だいたい）不要に。

var _this = this;

hogehoge.bind(this)

Arrow Function

thisを束縛して、今までやってたこと↓のが（だいたい）不要に。

var _this = this;

hogehoge.bind(this)いい！

Template Literals

複数行の記述、変数の仕様、関数の実行を文字列に埋

め込めるように

Template Literals

複数行の記述、変数の仕様、関数の実行を文字列に埋

め込めるように

マジぱねぇす

Template Literals

複数行の記述、変数の仕様、関数の実行を文字列に埋

め込めるように

※ただし評価された時にキャッシュされるぽいので関数化とかしないと使い回しづらい

Railsでもだいたい使えるよ！