いまからはじめるecmascript 6
TRANSCRIPT
いまからはじめるECMAScript 6by Shogo Sensui
2015.06.13 HTML5オールスターズ勉強会
https://www.flickr.com/photos/jakeandlindsay/5524669257
@cssradar @hiloki @t32k @1000ch @ahomu
Frontend Weekly
• 国内外のフロントエンド情報をキュレーション
• 週に一度水曜日に配信https://frontendweekly.tokyo
ECMAScript
JavaScript
JScript ActionScript
標準化された言語仕様(ECMAScript)と
それを実装する各言語(JavaScriptなど)
ECMAScriptの立ち位置
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/
ブラウザサポートが十分になるのは、まだまだ先の話・・・
https://www.flickr.com/photos/enebisu/18006622463