Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
いまからはじめるECMAScript 6 / Begin ECMAScript6
Search
Shogo Sensui
June 13, 2015
Technology
0
880
いまからはじめるECMAScript 6 / Begin ECMAScript6
2015年6月13日に行われたHTML5オールスターズ勉強会の「いまからはじめるECMAScript 6」のセッションの資料です。
Shogo Sensui
June 13, 2015
Tweet
Share
More Decks by Shogo Sensui
See All by Shogo Sensui
三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PRTimes Engineering
1000ch
0
2.1k
EU のデジタル市場法と Apple / DMA and Apple
1000ch
0
98
Web Share API
1000ch
0
110
2023 年の Web 開発のベースライン / Web Development Baseline 2023
1000ch
0
38
開発生産性と組織 / Productivity and Organization
1000ch
0
1.1k
なぜ私達は働くのか / Why We Work?
1000ch
0
61
新しいメルカリ Web とそのパフォーマンス / The New Mercari Web and its performance
1000ch
0
63
Web Standards Interop 2022
1000ch
0
290
パフォーマンスを高める CSS / Performance Optimized CSS
1000ch
1
780
Other Decks in Technology
See All in Technology
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
280
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
130
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
750
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
190
デザインから逆算して難易度を見積もるための観点
fumiyasac0921
0
120
A Hidden Pitfall of K8s DNS with Spring Webflux
musaprg
0
350
データの品質が低いと何が困るのか
kzykmyzw
6
960
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
550
SCSAから学ぶセキュリティ管理
masakamayama
0
140
AndroidデバイスにFTPサーバを建立する
e10dokup
0
220
AIエージェントについてまとめてみた
pharma_x_tech
20
14k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
430
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
BBQ
matthewcrist
86
9.4k
How GitHub (no longer) Works
holman
313
140k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
930
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building Your Own Lightsaber
phodgson
104
6.2k
RailsConf 2023
tenderlove
29
990
Embracing the Ebb and Flow
colly
84
4.6k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
͍·͔Β͡ΊΔECMAScript 6 by Shogo Sensui 2015.06.13 HTML5Φʔϧελʔζษڧձ https://www.flickr.com/photos/jakeandlindsay/5524669257
s Shogo Sensui a.k.a 1000ch
Profile WebϑϩϯτΤϯυΤϯδχΞ iOSωΠςΟϒΤϯδχΞ HTML5શൠ + Node.js + iOS/Mac #perfmatters
None
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/
※20156݄13࣌ × ×
ECMAScript 6 compatibility table
ES6͕ԿʹૉΒͯ͘͠ αϙʔτ͕ਐ·ͳ͍͜ͱʹ ಋೖͰ͖ͳ͍ʁ ×
ES6 ES5 τϥϯεύΠϥΛ͏ ES6ͷίʔυΛίϯύΠϧͯ͠ɺαϙʔτ͍ͯ͠ͳ͍ ϒϥβͰ࣮ߦՄೳͳίʔυʹม͢Δ
Traceur Compiler
Babel
ݶఆ͞ΕͨڥͰ͏ αϙʔτ͕ൺֱతਐΜͰ͍ΔChromeFirefoxͷ ֦ுػೳͰ͋Εࢥ͏ଘ͑Δ
AltJSͰऔΓೖΕ͍ͯ͘ TypeScriptFlowͰES6ͷߏจαϙʔτ͕ਐΜͰ͍Δ
Node.js 0.12ʙ ES6ͷػೳ͕--harmonyϑϥά͖Ͱར༻Մೳ iojsͳΒϑϥάෆཁʹͳ͍ͬͯΔ
·ͱΊ
ϒϥβαϙʔτ͕ ेʹͳΔͷ·ͩ·ͩઌͷ…
ཧ༝Λ͚ͭͯΒͳ͍ؒʹ ࣍ͳΔ༷(ES7ɾES8)͕ग़ͯ͘Δ
͑Δػೳ͔ΒঃʑʹऔΓೖΕͯ ࠓͷ͏ͪʹ׳Ε͍ͯ͘
͓ΘΓ +ShogoSensui 1000ch 1000ch