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
120
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
220
サイボウズの日常 Garoonテクニカルサポート編 / Cybozu Tech Meetup #9
ehimemikan
0
1.7k
エンジニアがエンジニアサイトを立ち上げた話 / Setting up an engineering website
ehimemikan
0
200
育児休業、どうでした? / How was the parental leave?
ehimemikan
0
110
kintoneエンジニアが紹介する品質向上のための取り組み / kintone engineer's take on quality improvement
ehimemikan
0
45
Other Decks in Programming
See All in Programming
Create a website using Spatial Web
akkeylab
0
240
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
500
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
1.9k
Using AI Tools Around Software Development
inouehi
0
1.2k
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
200
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
480
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
0
110
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
180
単体テストの始め方/作り方
toms74209200
0
430
無関心の谷
kanayannet
0
160
漸進。
ssssota
0
1.8k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
How to Ace a Technical Interview
jacobian
276
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
A Tale of Four Properties
chriscoyier
159
23k
Music & Morning Musume
bryan
46
6.6k
Gamification - CAS2011
davidbonilla
81
5.3k
Facilitating Awesome Meetings
lara
54
6.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
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