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
Introduction to ES2016 & ES2017
Search
Yasuharu.S
April 02, 2018
Programming
0
97
Introduction to ES2016 & ES2017
Yasuharu.S
April 02, 2018
Tweet
Share
More Decks by Yasuharu.S
See All by Yasuharu.S
2022-04-08-LT.pdf
ehimemikan
0
180
サイボウズの日常 Garoonテクニカルサポート編 / Cybozu Tech Meetup #9
ehimemikan
0
1.5k
エンジニアがエンジニアサイトを立ち上げた話 / Setting up an engineering website
ehimemikan
0
150
育児休業、どうでした? / How was the parental leave?
ehimemikan
0
95
kintoneエンジニアが紹介する品質向上のための取り組み / kintone engineer's take on quality improvement
ehimemikan
0
31
Other Decks in Programming
See All in Programming
最近追加した型の紹介とその振り返り
aki19035vc
0
170
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
유연한 Composable 설계
l2hyunwoo
0
380
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
CSC307 Lecture 13
javiergs
PRO
0
150
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
CSC307 Lecture 12
javiergs
PRO
0
220
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Featured
See All Featured
Code Review Best Practice
trishagee
58
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Unsuck your backbone
ammeep
666
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
The Cult of Friendly URLs
andyhume
75
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Speed Design
sergeychernyshev
9
270
A Philosophy of Restraint
colly
200
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Infographics Made Easy
chrislema
238
18k
Transcript
Introduction to ES2016 & ES2017 2018-03-31 CAMPHOR- @sakay_y (Cybozu, Inc.)
ES2016 & ES2017
!!!Attention!!!
Internet Explorer ͍ͷਓ
ͯ͢ະରԠ
ES2016
ES2016 • Array.prototype.includes • Exponentiation Operator
Array.prototype.includes
Array.prototype.includes • ྻʹཁૉؚ͕·ΕΔ͔Ͳ͏͔͕ఆͰ͖Δ const array = ['a', 'b', 'c']; array.includes('a');
// true array.includes('c'); // true array.includes('d'); // false
Array.prototype.includes • ॻ͖ํ͜͏มΘΔ var array = ['a', 'b', 'c']; //
before ES2015 if (array.indexOf('a') > -1) { console.log('a ༗ͬͨΑʂ'); } // after ES2016 if (array.includes('b')) { console.log('b ༗ͬͨΑʂ'); }
Array.prototype.includes • NaNͷѻ͍͚ͩɺؾΛ͚ͭΔ͜ͱʂ [NaN].indexOf(NaN) > -1 // false [NaN].includes(NaN) //
true
Array.prototype.includes • ͍͠ɺՄಡੑߴ͍ͷͰ͍ͬͯ͜͏
Exponentiation Operator
Exponentiation Operator • ྦྷͷԋࢉࢠ͕૿͑ͨΑʂ 2 ** 2 // 4 2
** 3 // 8 // before ES2015 Math.pow(2, 2) Math.pow(2, 3)
ES2017
ES2017 • String.prototype.padStart, String.prototype.padEnd • Object.values, Object.entries • Object.getOwnPropertyDescriptors •
Trailing commas in function parameter lists and calls • async function • Shared memory and atomics
String.prototype.padStart, String.prototype.padEnd
String.prototype.padStart, String.prototype.padEnd • paddingͰ͖Δ 'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo");
// "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" 'abc'.padStart(1); // "abc" 'abc'.padEnd(10); // "abc " 'abc'.padEnd(10, "foo"); // "abcfoofoof" ‘abc'.padEnd(6, "123465"); // "abc123" .%/XFCEPDTΑΓҾ༻
String.prototype.padStart, String.prototype.padEnd • ར༻ྫ // before ES2016 // 6ܻͷࣾһ൪߸ʹ͢Δ function
createEmployeeNumber(number) { const numberLength = String(number).length; if (numberLength > 6) { throw new Error("6ܻ·ͰͩΑ"); } const padString = "0".repeat(6 - numberLength); return padString + number; }
String.prototype.padStart, String.prototype.padEnd • ར༻ྫ // 6ܻͷࣾһ൪߸ʹ͢Δ function createEmployeeNumber(number) { if
(String(number).length > 6) { throw new Error("6ܻ·ͰͩΑ"); } return String(number).padStart(6, "0"); }
Object.values, Object.entries
Object.values • ObjectͷྻڍՄೳͳॴ༗ϓϩύςΟͷΛؚ ΉྻͰฦ͢ • ॱ൪ for ... in …
ϧʔϓͷ࣮ߦॱͱҰॹ const obj = {hoge: 'a', fuga: 'b', bar: 'c'} console.log(Object.values(obj)) // ["a", "b", "c"] const obj = {2: 'a', 5: 'b', 0:'c'} console.log(Object.values(obj)) // ['c', 'a', 'b']
Object.values • ObjectҎ֎Λͨ࣌͠ɺObjectʹܕม͞ Ε࣮ͯߦ͞ΕΔ Object.values([]) // [] Object.values('abc') // ["a",
"b", "c"] Object.values('cba') // ["c", "b", "a"] Object.values(['abc']) // ["abc"] Object.values(['a', 'b', 'c']) // ["a", "b", "c"]
Object.values const obj = {hoge: 'a', fuga: 'b', bar: 'c'}
// valueΛॻ͖ग़͢ Object.values(obj).forEach(value => { console.log(value); }); // before ES2016 Object.keys(obj).forEach(key => { console.log(obj[key]); });
Object.entries • Ҿʹ༩͑ͨΦϒδΣΫτ͕ॴ༗͢Δɺྻڍ ՄೳͳϓϩύςΟͷ [key, value] ͷྻΛฦ ͢ • ॱ൪
for ... in … ϧʔϓͷ࣮ߦॱͱҰॹ const obj = {hoge: 'a', fuga: 'b'}; console.log(Object.entries(obj)); // Array(2) [["hoge", "a"], ["fuga", "b"]]
Object.entries • Object -> Mapͷมʹศར const obj = {hoge: 'a',
fuga: 'b'}; const map = new Map(Object.entries(obj)); console.log(map); // Map(2) {"hoge" => "a", "fuga" => “b"} // before ES2016 const obj = {hoge: 'a', fuga: 'b'}; const map = new Map(); Object.keys(obj).forEach(key => { map.set(key, obj[key]); }); console.log(map); // Map(2) {"hoge" => "a", "fuga" => "b"}
Object.getOwnPropertyDescriptors
Object.getOwnPropertyDescr iptors • ΦϒδΣΫτͷͯ͢ͷϓϩύςΟσΟεΫϦ ϓλΛؚΉΦϒδΣΫτΛฦ͢ ଐੑ ҙຯ 8SJUBCMF Λॻ͖ࠐΈՄೳ͔ &OVNFSBCMF
ྻڍՄೳ͔ʢGPSJOͱ͔Ͱରʹ͢Δ͔ʣ $POpHVSBCMF %FTDSJQUPSΛมߋՄೳ͔ 7BMVF (FU (FUUFS 4FU 4FUUFS
Object.getOwnPropertyDescr iptors • ES2015ҎલͰ • Object.defineProperty Ͱઃఆ • Object.getOwnPropertyDescriptor Ͱऔಘ
• ES2017Ͱɺෳܗ͕Ͱ͖͚ͨͩ
Trailing commas in function parameter lists and calls
Trailing commas in function parameter lists and calls • ҾΛෳߦͰॻ͍ͨͱ͖ʹɺ͍ΘΏΔέπ
ΧϯϚΛڐ༰ function hoge( param1, param2, // <-- OK ) { return null; } hoge( "foo", "bar", // <-- OK )
async function
async function • asyncؔͱͦͷपลͷߏจ • async͕࣮ؔߦ͞ΕΔͱɺPromiseΦϒδΣ ΫτΛฦ͢
async function // 2ඵޙʹxΛฦ͢ function resolveAfter2Seconds(x) { return new Promise(resolve
=> { setTimeout(() => { resolve(x); }, 2000); }); } async function add1(x) { const a = await resolveAfter2Seconds(20); const b = await resolveAfter2Seconds(30); return x + a + b; } async function add2(x) { const p_a = resolveAfter2Seconds(20); const p_b = resolveAfter2Seconds(30); return x + await p_a + await p_b; }
async function add1(10).then(v => { console.log(v); // 4ඵޙʹ60Λදࣔ͢Δ }); add2(10).then(v
=> { console.log(v); // 2ඵޙʹ60Λදࣔ͢Δ });
async function • before ES2015 function add1(x) { return resolveAfter2Seconds(20).then(a
=> { return resolveAfter2Seconds(a + 30).then(b => { return b + x; }); }); } function add2(x) { return Promise.all([ resolveAfter2Seconds(20), resolveAfter2Seconds(30) ]).then(values => { return x + values[0] + values[1]; }); }
await ࣜʹ͍ͭͯ • awaitasync functionͷ࣮ߦΛҰ࣌ఀࢭͯ͠ɺpromiseͷղ ܾΛͭ • awaitͱ͕ͨ͠promiseͰͳ͍߹ɺΛղܾ͞Εͨ promiseʹมͯ͠ɺͦΕΛͭ •
awaitasyncؔͷதͳΒɺPromise.Allͱ͔ͬͯ͘ ΕΔɻ • awaitͷΤϥʔॲཧtry/catchͱawait/catch͕ར༻Ͱ͖Δɻ
await ͷΤϥʔॲཧ function resolveAfter2Seconds(x) { if (!Number.isInteger(x)) { return Promise.reject('error!');
} return new Promise(resolve => { setTimeout(() => { resolve(x); }, 2000); }); } async function add(x) { try { const a = await resolveAfter2Seconds(20); const b = await resolveAfter2Seconds(x); return x + a + b; } catch (e) { return e; } } add('x').catch(e => { console.log(e); }); // 2ඵޙʹ error!
await ͷΤϥʔॲཧ function handleError(e) { console.log(e); return Promise.resolve(0); } async
function add(x) { const a = await resolveAfter2Seconds(20).catch(handleError); const b = await resolveAfter2Seconds('x').catch(handleError); return x + a + b; } add(10) .then(v => { console.log(v); }) .catch(e => { console.log(e); }); // 2ඵޙʹ handleErrorͰ error! ͕දࣔ͞Εͯ // 30 ͕දࣔ͞ΕΔ
Shared memory and atomics
Shared memory and atomics • SharedArrayBuffer • Atomics • WorkerؒͰΛڞ༗͢Δ͜ͱ͕Ͱ͖Δํ๏ͷҰͭ
• ࠓ·ͰpostMessageͰΛΓͱΓ͍ͯͨ͠ • ϚϧνεϨουͰॲཧΛ͢Δ߹ʹɺmessage ͘ɺεϨουؒͰσʔλΛίϐʔ͢Δखஈͱͯ͠໘
// worker.js let sBuffer; let bufferView; self.addEventListener('message', (msg) => {
sBuffer = msg.data; // SharedArrayBufferΛड͚औΔɻ bufferView = new Uint8Array(sBuffer); // ૢ࡞ͷͨΊͷϏϡʔΛੜ͢Δɻ console.log(bufferView); }); // main.js const worker = new Worker('worker.js'); // SharedArrayBufferΛ࡞͢Δɻ // SharedArrayBufferݻఆͷྻͰɺίϯετϥΫλʹόΠτΛࢦఆ͢Δɻ // ࠓճ1όΠτͷSharedArrayBufferΛ࡞͢Δɻ const sBuffer = new SharedArrayBuffer(1); // ૢ࡞ͷͨΊͷϏϡʔΛੜ͢Δɻࠓճuint8ɻ const bufferView = new Uint8Array(sBuffer); bufferView[0] = 123; // Λॻ͖ࠐΉɻ // SharedArrayBufferΛϝοηʔδͱͯ͠ૹ৴͢Δɻ worker.postMessage(sBuffer); Ҿ༻ɿ4VCUFSSBOFBO'MPXFSCMPH4IBSFE"SSBZ#V⒎FSͱ"UPNJDT"1*Λ༻͍ͯ8PSLFSؒͰσʔλΛڞ༗͢Δ
Atomics • SharedArrayBufferΛεϨουηʔϑʹར༻͢ ΔͨΊͷΞτϛοΫԋࢉΛఏڙ͢ΔΦϒδΣ Ϋτ const sBuffer = new SharedArrayBuffer(10);
const bufferView = new Uint8Array(sBuffer); bufferView[0] = 1; bufferView[1] = 2; // Atomics APIΛར༻ͯ͠εϨουηʔϑͳૢ࡞Λߦ͏ɻ Atomics.add(bufferView, 0, 10); // 0൪ͷʹɺ10Λ͢ɻ console.log(Atomics.load(bufferView, 0)); // 11 Ҿ༻ɿ4VCUFSSBOFBO'MPXFSCMPH4IBSFE"SSBZ#V⒎FSͱ"UPNJDT"1*Λ༻͍ͯ8PSLFSؒͰσʔλΛڞ༗͢Δ
Shared memory and atomics • 20183݄31ݱࡏɺSharedArrayBuffer ͑ͳ͍ • Spectre ରԠ
Shared memory and atomics • SharedArrayBufferɺਫ਼ͷߴ͍λΠϚʔͱ ͯ͠αΠυνϟωϧ߈ܸʹར༻Ͱ͖ͯ͠·͏ • https://security.stackexchange.com/ questions/177033/how-can-
sharedarraybuffer-be-used-for-timing- attacks
Thanks!
Appendix
ઢɿObjectΑΓMap • ObjectͷΩʔStringsͱSymbols͚ͩ Mapҙͷ͕ΩʔʹͳΔ • Mapͷେ͖͞sizeͰ͙͢औΕΔ • ObjectϓϩτλΠϓΛ࣋ͭ • MapΩʔͷআՃͷύϑΥʔϚϯε͕ྑ͍
MDN web docs: Map
ઢɿྻڍՄೳͱॴ༗ͱʁ • MDN web docs: Enumerability and ownership of properties
• ίʔυͰද͢ͱɺ hasOwnProperty() === true && propertyIsEnumerable() === true
ྻڍՄೳ const obj = {'hoge': 'a'}; // Object.definePropertyͰՃ͞ΕͨϓϩύςΟ // enumerable͕σϑΥϧτͰfalse
Object.defineProperty(obj, 'fuga', {value: 'b'}); console.log(Object.values(obj)); // [‘a’] // ྻڍՄೳͳϓϩύςΟͷόϦϡʔͷΈ
const obj = {2: 'a', 5: 'b', 0:'c'}; const obj_chain
= Object.create(obj); for (var property in obj_chain) { console.log(obj_chain[property]); } // c // b // a for (var value in Object.values(obj_chain)) { console.log(value); } // undefined // ॴ༗ͯ͠ͳ͍ϓϩύςΟͷόϦϡʔग़ͳ͍ ॴ༗
ઢɿSpectre ʹ͍ͭͯ • ਤղͰΘ͔ΔSpectreͱMeltdown by Satoru Takeuchi • SpectreBusters͋Δ͍Linuxʹ͓͚Δ
Spectreରࡦ by Masami Hiramatsu