いまからはじめるECMAScript 6by Shogo Sensui

2015.06.13 HTML5オールスターズ勉強会

https://www.flickr.com/photos/jakeandlindsay/5524669257

sShogo Sensui

a.k.a 1000ch

Profile

Webフロントエンドエンジニア

iOSネイティブエンジニア

HTML5全般 + Node.js + iOS/Mac

#perfmatters

s

フロントエンド エンジニア 養成読本

WEB+DB PRESS Webフロントエンド

最前線

@cssradar @hiloki @t32k @1000ch @ahomu

Frontend Weekly

• 国内外のフロントエンド情報をキュレーション

• 週に一度水曜日に配信

@cssradar @hiloki @t32k @1000ch @ahomu

Frontend Weekly

• 国内外のフロントエンド情報をキュレーション

• 週に一度水曜日に配信https://frontendweekly.tokyo

Agenda

JavaScript と ECMAScript

ECMAScript 6 の主な新機能

ECMAScript 6 との付き合い方

まとめ

JavaScript と ECMAScript

1995年、JavaScript爆誕

Javaが流行ってるから

JavaScriptという名前にしよう

Brendan Eich氏

なんだと？こっちはJScriptだ！

これがJavaScriptだ！

待て待て、標準化しよう…

ECMAScript

JavaScript

JScript ActionScript

標準化された言語仕様（ECMAScript）と

それを実装する各言語（JavaScriptなど）

ECMAScriptの立ち位置

色々な意見がJavaScriptに 影響してきた

etc…

ECMAScript 2015?

ECMAScript 6 の主な新機能

https://www.flickr.com/photos/12355559@N03/18012486244

let const

{ var foo = 10; let bar = 100; const baz = 1000; console.log(foo, bar, baz); // => 10, 100, 1000 }

console.log(foo, bar, baz); // => 10, undefined, undefined

ES6

Arrow Functions

$('button').on('click', function (e) { console.log(this); // => button });

$('button').on('click', (e) => { console.log(this); // => window });

$('button').on('click', e => console.log(this));

!

!ES5

ES6

ES6

import export

// export.js export function foo() { console.log('foo'); }

export function bar() { console.log('bar'); }

// import.js import { foo, bar } from './export.js';

foo(); // => foo bar(); // => bar

ES6

Rest Parameters

let x = 10, y = 20, z = 30; function max(array) { return Math.max.apply(null, array); } max([x, y, z]); // => 30

function max(...array) { return Math.max.apply(null, array); } max(x, y, z); // => 30

!

ES6

ES6

Default Parameters

function add(arg1, arg2) { if (arg1 === undefined) { arg1 = 0; } if (arg2 === undefined) { arg2 = 0; } return arg1 + arg2; }

function add(arg1 = 0, arg2 = 0) { return arg1 + arg2; }

!

ES5

ES6

let hundred = 100; let multiple = function (x, y) { return x * y; }

console.log(`hundred is ${number}`); // => hundred is 100

console.log(`hundred * 10 is ${multiple(number, 10)}`); // => hundred * 10 is 1000

Template Strings

ES6

function Human (message) { this.message = message; }

Human.prototype.hello = function () { console.log(this.message); }

class Human { constructor(message) { this.message = message; } hello() { console.log(this.message); } }

Class!

ES6

ES5

function* toThree() { yield 1; yield 2; return 3; }

console.log(toThree()); // => 1

console.log(toThree()); // => 2

console.log(toThree()); // => 3

Generator Functions

ES6

Proxy

var person = { firstName: 'Taro', lastName: 'Tanaka' };

var interceptor = { set: function (target, name, value, receiver) { console.log(name + ' is changed.'); target[name] = value; } get: function (target, name, receiver) { return name + ' is ' target[name]; } };

person = new Proxy(person, interceptor);

ES6

Symbol var sym1 = Symbol(); var sym2 = Symbol("foo"); var sym3 = Symbol("foo");

Symbol("foo") === Symbol("foo"); // => false

ES6

Promise

new Promise(function (resolve, reject) { resolve(10); }).then(function (value) { return value * 10; }).then(function (value) { console.log(value); // 100 });

ES6

Set WeakSet

var set1 = new Set([1, 2, 2, 3, 3, 3, 4, 4, 4, 4]); // => [1, 2, 3, 4]

var set2 = new Set(set1); var set3 = new Set(set1.entries()); var set4 = new Set(set1.keys());

ES6

Map WeakMap

var arrayKey = []; var map = new Map(); map.set(1, 'This is a value'); map.set(arrayKey, 'This is also value');

map.get(1); // This is a value

map.get(arrayKey); // This is also value

ES6

ECMAScript 6 との付き合い方

https://www.flickr.com/photos/63771280@N08/18643164795/

※2015年6月13日時点

××

ECMAScript 6 compatibility table

ES6が如何に素晴らしくても サポートが進まないことには

導入できない？×

ES6 ES5"

トランスパイラを使う

ES6のコードをコンパイルして、サポートしていない ブラウザでも実行可能なコードに変換する

Traceur Compiler

Babel

限定された環境で使う

サポートが比較的進んでいるChromeやFirefoxの 拡張機能であれば思う存分使える

AltJSで取り入れていく

TypeScriptやFlowではES6の構文サポートが進んでいる

Node.js 0.12～

ES6の機能が--harmonyフラグ付きで利用可能

iojsならフラグも不要になっている

まとめ

ブラウザサポートが十分になるのは、まだまだ先の話・・・

https://www.flickr.com/photos/enebisu/18006622463

理由をつけてやらない間に

次なる仕様(ES7・ES8)が出てくる

使える機能から徐々に取り入れて 今のうちに慣れていく

おわり

+ +ShogoSensui

$

%

1000ch

1000ch