メドレー開発部TechLunch ECMAScript四方山話

メドレー開発部TechLunchで発表した内容を掲載しました。

メドレーで開発部では、隔週で社内勉強会が開かれています。
今回は、「ECMAScript四方山話」というタイトルで発表し、社内でも利用がされてきているECMAScript2015以降の仕様について歴史やどう制定されているかのお話をしました。

発表者：平木 聡

Transcript

1. ECMAScript࢛ํࢁ࿩
2. Agenda » ECMAScriptͱ͸? » ECMAScriptͱJavaScriptͷؔ܎ » ECMAScriptͷ࢓༷ͷ௥͍ํ » ECMAScript2016 - 18ͷศརػೳ
3. ECMASctiptͱ͸
4. ECMAScriptͱ͸ “ECMAScriptʢΤΫϚεΫϦϓτʣ͸ɺJavaScript ͷඪ४Ͱ͋Γɺ Ecma Internationalͷ΋ͱͰඪ४Խखଓ͖ͳͲ͕ߦΘΕ͍ͯΔɻ 2015೥6݄ʹ6th edition͕ϦϦʔε͞Ε͍ͯΔɻ” — ECMAScript - Wikipedia
5. ͬ͘͟ΓJavaScrtiptੲ࿩ » 1995೥ʹNetscapeࣾͷNetscape Navigatorͱ͍͏ϒϥ΢βͰ ࢖͑ΔΑ͏ʹͳͬͨͷ͕࠷ॳ » ౰࣌ϒϥ΢βͰಈ͘ShcemeΛ࡞Βͤͯ΍͔ͬΒ!ͬͯὃ͞Εͯϒ ϨϯμϯɾΤΠΫ͕࡞ͬͨ » ࠷ॳ͸LiveScriptͱ͍͏໊લ͚ͩͬͨͲɺJavaྲྀߦ͔ͬͯͨΒ Java෇͚Α͏ͥ!ͬͯͳͬͨͷ͸ΘΓͱ༗໊ » 1996೥ʹInternet Explore3Ͱ΋౥ࡌ͞Ε͔ͯΒٸ଎ʹීٴ͢Δ
6. ͬ͘͟ΓJavaScriptͱECMAScript » ͕ɺ֤ࣾ͋·Γʹ΋ΦϨΦϨJavaScriptΛࣗ෼ͷͱ͜Ζͷϒϥ΢β ʹ࣮૷͍ͯ͘͠ » ϒϥ΢βઓ૪ͱݴΘΕͯͨ͘Β͍ʹγΣΞऔΔͷʹ֤ࣾඞࢮͩͬͨ » ݁Ռಉ͡JavaScriptͷίʔυͰ΋ҧ͏ϒϥ΢βͰ͸ΤϥʔʹͳΔͱ ͔શવ༨༟Ͱ͋ͬͨ » 1996೥ʹECMAΠϯλʔφγϣφϧͰJavaScriptͷ౷Ұ࢓༷ͭ͘Ζ ͏ͱ͍͏ಈ͖ʹͳΔ
7. ECMAScriptࡦఆޙ… » l997೥ʹͰ͖͕͋ͬͨͷ͕ɺECMA-262ͱ͍͏JavaScriptͷ࢓༷ » ϒϥ΢βઓ૪͕ܹԽͯ͠Δͳ͔ɺ࢓༷͕Ͱ͖͔ͨΒ͙ͬͯ͢ʹ֤ϒϥ ΢β͕௥ਵͨ͠Θ͚Ͱ΋ͳ͍…
8. ౰࣌ͷNetscape CommunicationsͷϓϨεϦϦʔε
9. ECMAScriptͱJavaScriptͷؔ܎
10. ECMAScriptͱJavaScriptͷؔ܎ ࢓༷ͱ࣮૷ͷؔ܎Ͱ͢ɻҎ্
11. JavaScript͕ҰےೄͰ͍͔ͳ͍ͱ͜Ζ ීٴͯ͠Δ࣮૷ܥ͕1ͭ͡Όͳ͍
12. ϒϥ΢β͝ͱʹ࣮૷ܥ͕͋Δ » Microsoft Edge » Chakra(JavaScript) / Edge » Mozilla Firefox » SpiderMonkey / Gecko » Google Chrome » V8 / Blink » Apple Safari » JavaScript Core / Webkit
13. ࣮૷ܥ͕ҧ͏͜ͱʹΑΔ݁Ռ ͏Μ஌ͬͯͨ
14. צҧ͍͞Ε·͕͢ ϒϥ΢βͰΑ͘ॻ͘͜͏͍͏ίʔυ͸ const hoge = document.querySelector('.hoge'); hoge.addEventListener((evt) => { evt.preventDefault(); evt.target.className = 'hoge huga'; }); // or const state = { foo: "bar" }; history.pushState(state, "page 2", "bar.html");
15. DOM APIͰ͢ ECMAScript ≒ JavaScriptͱ͸ ؔ܎ͳ͍Ͱ͢ W3C΍WHATWGͰ࢓༷͕ܾ·ͬͯ·͢ JavaScriptΤϯδϯͰ͸ͳ͘ɺϒϥ ΢βΤϯδϯͷ͓࢓ࣄ
16. ECMAScriptͷ࢓༷ͷ௥͍ํ
17. ͦͷલʹͬ͘͟ΓͱECMAScriptͷԹނ஌৽ ECMAScript - Wikipedia
18. ECMAScript5·Ͱͷ͋Β͢͡ 1.ECMAScript࠷ॳʹ੍ఆ͞ΕΔ 2.ISOରԠͨ͠΋ͷ 3.͜͜ΒลͰେମɺࠓͷ΋ͷʹ͍ۙܗͷ࢓༷ʹͳΔ 4.ࠇྺ࢙ɻActionScript3ͳͲͷجૅʹ͸ͳͬͯΔ 5.3͔Β10೥ͿΓʹग़ͨݱࡏͷجૅʹͳͬͯΔΤσΟγϣϯ
19. ECMAScript6ʹ͍ͭͯ » ECMAScript6 ≒ ECMAScript2015ʹͳΓ·͢ » ECMAScript5͔Β͞Βʹ6೥ͨͬͯ͠·ͬͨͷͰ൓লͱͯ͠όʔδϣ χϯάํ๏Λม͑ͨ » Ҏલͱҧ֤ͬͯϒϥ΢βͷόʔδϣϯΞοϓ΋සൟʹͳͬͯ͜Μͳ ʹ͔͔࣌ؒΔͱ࣮૷ͱ཭Εͯ͠·͏ݒ೦ » ͳͷͰ6ͷࡦఆ్த͔Β2015ʹݺশΛվΊ·ͨ͠ » ࣮࣭6ͳΜͰ໊͕͢শͱͯ͠͸2015͕ਖ਼͍͠(͸ͣ)
20. ECMAScript2015͔Βͷྲྀ Ε
21. ECMASCript2015ͷ࢓ ༷͸ ݩʑES WikiͰެ։ ͞Ε͍ͯͨ
22. 2015೥11݄ɺMozillaओ࠵ͷ ViewSource Conference಺ͷ Discussion: JavaScript Todayͱ͍͏ηογϣϯ಺Ͱ ΞοϓσʔτͷաఔΛΦʔϓ ϯʹ͢Δͱ͍͏ൃද͕͞ΕΔ
23. ͦ͜Ͱɺ͜ͷϦϙδτϦ͕࢖ ΘΕͯ࢓༷ࡦఆ͕͞ΕΔΑ͏ ʹͳΔ ϦϙδτϦࣗମ͸2014೥4݄ʹ͸ଘࡏ͍ͯͨ͠
24. ECMASCript2016͔Β͞Βʹ ࢓༷ࡦఆ͕ΦʔϓϯʹͳΓ·ͨ͠
25. ࠷৽ͷ࢓༷͸ͪ͜ΒͰ֬ೝ http://tc39.github.io/ecma262/
26. ٞ࿦͸ओʹ͜ͷES discussͱGitHub IssueͰߦ ΘΕͯΔ ΄͔ʹ΋Bugzillaͱ͔tc39/propsalsͷ΄͏Ͱ΋ٞ࿦
27. ࢓༷ͷεςʔλεͷઆ໌͸ͪ͜Β https://tc39.github.io/process-document/
28. ࢓༷ͷεςʔλεͷࡶͳઆ໌ ~ॳظ~ » Stage0 » ΞΠσΟΞɻ࢓༷ͱͯ͠औΓ্͛ΔՄೳੑ͸͋Δ » Stage1 » ఏҊɻຊ౰ʹೖΕΔՁ஋͕͋Δͷ͔ͳͲݕ౼ » Stage2 » υϥϑτɻ࢓༷Λ٧ΊͨΓγϯλοΫεΛܾΊͨΓ
29. ࢓༷ͷεςʔλεͷࡶͳઆ໌ ~ޙظ~ » Stage3 » ࢓༷ॻͱಉ͡ܗࣜʹ੔͑ΒΕͨ΋ͷɻϢʔβʔͷϑΟʔυόοΫͳ ͲऔΓೖΕΔ » Stage4 » ࡦఆ׬ྃɻ࢓༷͸׬੒ͯ͠Δ্ʹɺผʑͷ2ͭͷVMͰಈ͔ͤΔஈ ֊ɻ The TC39 Process
30. ECMAScript2016-18ͷػೳ
31. ECMAScript2016-18ͷػೳ ಠஅͰ঺հ͢Δ࢓༷ Stageʹؔ܎ͳ͘ग़ͯ͠ΔͷͱɺAsync/Awaitͱ͔͋·Γʹ΋༗໊Ͳ͜ Ζ͸ೖͬͯͳ͍͔΋
32. Array.prototype.includes()
33. Array.prototype.includes() ES2016Ͱ࢓༷ʹೖͬͨϝιουɻ഑ྻʹಛఆͷཁૉ͕ೖͬͯΔ͔ Λ൑ผ͢Δͱ͖ʹArray.prototype.indexOf()͕࢖ΘΕΔ͜ ͱ͕ଟ͔͚ͬͨͲɺNaN͸൑ఆͯ͘͠Εͳ͍ΑͶ͍ͬͯ͏ཧ༝Ͱ ೖͬͨɻ
34. Array.prototype.includes() ͜Μͳײ͡ɻ [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true [NaN].indexOf(NaN) // -1
35. Exponentiation Operator
36. Exponentiation Operator ΂͖৐ΛදΘ͢ԋࢉࢠɻES2016ʹೖͬͯΔɻ let cubed = 2 ** 3; // cubed = 8 // same as: 2 * 2 * 2 let a = 2; a **= 2; // a = 4; // same as: a = a * a;
37. Trailing commas in function parameter lists and calls
38. Trailing commas in function parameter lists and calls ཁ͸ԾҾ਺ͷ࠷ޙʹέπΧϯϚೖΕͯ΋ಈ͘Α͏ʹ͠Α͏ͥ!ͱ͍͏΋ ͷɻ஍ຯʹศར͔΋͠Εͳ͍ɻES2016ʹೖͬͯΔɻ
39. Trailing commas in function parameter lists and calls function hoge( foo, bar, baz, ) {/*...*/} hoge( 'foo', 'bar', 'baz', ) {/*...*/}
40. String.prototype.padStart(padEnd)
41. String.prototype.padStart(padEnd) ΘΓͱ଴๬ͩͬͨਓ΋͓͓͍͔΋͠Εͳ͍ɻจࣈຒΊͷϝιουɻ ES2017ʹೖͬͨɻ ͳΜͰ଴๬͔ͩͬͨ͸ԼهͰ෼͔Δ͔΋ɻ I’ve Just Liberated My Modules – Medium
42. String.prototype.padStart(padEnd) ͜Μͳײ͡ɻ let str = 'abc'; str.padStart(10); // str = " abc" str.padEnd(10) // str = "abc " str.padStart(10, '0123456789'); // str = "0123456abc" str.padEnd(10, '0123456789'); // str = "abc0123456" str.padStart(20, '0123456789'); // str = "01234567890123456abc" str.padEnd(20, '0123456789'); // str = "abc01234567890123456"
43. ECMAScript Function Bind Syntax
44. ECMAScript Function Bind Syntax thisͷόΠϯυΊΜͲ͔ͤ͑͘Β::Ͱग़དྷΔΑ͏ʹ͠Α͏͍ͥͬͯ͏࢓ ༷ɻStage0ɻ 1೥લ͔Βมͬͯͳ͍ͷͰೖΒΜ͔΋Θ͔ΒΜͶɻ
45. ECMAScript Function Bind Syntax ैདྷ͸͜Μͳॻ͖ํͩͬͨ΋ͷ͕… var hasOwnProp = Object.prototype.hasOwnProperty; var obj = { x: 100 }; hasOwnProp.call(obj, "x");
46. ECMAScript Function Bind Syntax ͜͏Ͱ͖Ε͹ྑ͍Μ͡Όͳ͍?ͱ͍͏΋ͷΒ͍͠ var hasOwnProp = Object.prototype.hasOwnProperty; var obj = { x: 100 }; obj::hasOwnProperty(key);
47. ECMAScript Function Bind Syntax jQueryΈ͍ͨʹ΋Ͱ͖Δ! import { map, takeWhile, forEach } from "iterlib"; getPlayers() ::map(x => x.character()) ::takeWhile(x => x.strength > 100) ::forEach(x => console.log(x));
48. Nested import declarations
49. Nested import declarations ւ֎Ͱ͸ΘΓͱ࢖ΘΕͯΔMeteorͷதͷਓͷఏҊɻάϩʔόϧͷ importͱ͸ผʹͦΕͧΕείʔϓ࣋ͨͤͯͦͷத͚ͩͰimport Ͱ͖ΔΑ͏ʹ͍ͨ͠!ͱ͍͏΋ͷɻStage0ɻ ॏେͳݒ೦ͱͯ͠ɺͦ΋ͦ΋ݩʑͷimportͷ࢓༷͕Stage3͔Βશવਐ ·ͳ͍͜ͱɻ
50. Nested import declarations ͜Μͳײ͡ʹͳΔɻ // άϩʔόϧ import { a, b } from "./ab"; // ͜ͷείʔϓ಺Ͱ͸'./xy.js'ͷػೳΛimport { import { x, y } from "./xy"; }
51. Nested import declarations ؔ਺είʔϓͰ͸͜Μͳײ͡ʹͳΔɻ console.log("x", getX()); // getX()಺͚ͩͰ'./xy.js'Λimportͯ͠࢖͏ function getX() { import { x } from "./xy"; return x; } // طଘͷ`x`ʹӨڹͳ͍Α͏ʹΫϩʔδϟͰฦ͢͜ͱ΋Մೳɻ function getXFn() { import { x } from "./xy"; return () => x; } const getX2 = getXFn(); setTimeout(() => { console.log("current x:", getX2()); }, delay);
52. ΄͔ͷఏҊͳΜ͔΋ݟ͍ͯ͘ͱ໘ന͍ tc39/proposals: Tracking ECMAScript Proposals
53. ਖ਼ࣜͰ͸ͳ͍͚Ͳৄ͍͠৘ใݯ » ᶄality – JavaScript and more » Mathias Bynens » Introduction · ECMAScriptͱ͸Կ͔ʁ » ECMAScriptͷ࢓༷ࡦఆʹؔ͢ΔΧϯχϯάϖʔύʔ | Web Scratch
54. ऴΘΓ Thank you !