Vanilla JSの今

Meguro.es # 25 @ Fringe81

Transcript

1. Vanilla JSͷࠓ Meguro.es # 25 @ Fringe81
2. ͨΉΒ͛Μ / ాଜݩ Twitter @gentamura84 / GitHub @gentamura ʙ2019೥12݄ גࣜձࣾπΫϧό ϑϩϯτΤϯυΤϯδχΞ 2020೥1݄ʙ ϑϦʔϥϯεΤϯδχΞ ECMAScript วྺ ͜Ε·Ͱ ActionScript3 / Knockout.js / Backbone.js / jQuery ࠷ۙ React / Next.js / TypeScript Firebase / GatsbyJS / NetlifyCMS
3. ಥવͰ͕͢
4. Vanilla JSΛ஌ͬͯΔਓʁ
5. ͦ͏ɺ͜ΕͰ͢Ͷ
6. http://vanilla-js.com/
7. Vanilla JS === ૉͷJavaScript
8. Ͱ΋
11. React Vue.js Angular
12. ૉͷJavaScriptΛ ৼΓฦΔඞཁ͋Γ·͢ʁ
13. ͔ͨ͠ʹ
14. Ͱ΋ݱ࣮͸
15. app/views/layouts/foo.erb
16. app/views/layouts/foo.erb ʘ<script></script>ʗ ŠŠŬŘſż!!
17. wp-content/themes/foo/footer.php
18. wp-content/themes/foo/footer.php ʘ<script></script>ʗ ŠŠŬŘſż!!
19. Ϟμϯͳ؀ڥ͹͔ΓͰ͸ͳ͍
20. ͱ͍͏͜ͱͰ
21. ES2015-2020ʢ༧ఆʣΛ ৼΓฦΓ͍ͨ
22. ͱͦͷલʹ
23. ES2015ͷ ESͬͯͳΜ͚ͩͬʁ
24. ECMAScript === ES ECMAScript͸Ecma Internationalͱ͍͏ஂମͰࡦ ఆ͞Ε͍ͯΔ࢓༷Ͱ͢ ͜ͷ࢓༷Ͱ֤ϒϥ΢βͷ2ݸҎ্Ͱར༻Ͱ͖ΔΑ ͏ʹJavaScript͕࣮૷͞Ε͍ͯ·͢
25. ECMAScript 1, 2, 3, 5, 5.1ͷॱʹϦϦʔε͞Εɺ 5.1͔Β࣍ͷϦϦʔεʹ4೥͔͔ͬͨɻ ͋·ΓʹϦϦʔεεύϯ͕௕͘ͳͬͨͨΊɺຖ ೥ϦϦʔε͢Δ͜ͱʹͳͬͨɻ
26. ϦϦʔε࣌ظΛΘ͔Γ΍͘͢͢ΔͨΊɺϦϦʔεͨ͠೥ Λόʔδϣϯͱ͢Δ͜ͱʹ͠·ͨ͠ɻ 5.1ͷ࣍όʔδϣϯ͸ES2015ͱͳΓ·ͨ͠ɻ ͳͷͰɺES6Ͱ͸ͳ͘ES2015͕ਖ਼ࣜදهͰ͢ ECMAScript
27. ݱߦͷ࠷৽͸ ES2019 https://www.ecma-international.org/ecma-262/ աڈόʔδϣϯ͸ http://www.ecma-international.org/publications/ standards/Ecma-262-arch.htm ECMAScript
28. ৄ͘͠͸ https://jsprimer.net/basic/ecmascript/ ͕Θ͔Γ΍͍͢Ͱ͢ ECMAScript
29. ͱ͍͏͜ͱͰ
30. - ES2015 - ES2016 - ES2017 - ES2018 - ES2019 - ES2020
31. - ES2015 - ES2016 - ES2017 - ES2018 - ES2019 - ES2020 ॱʹ͍͖·͢ʔ
32. - ES2015 - ES2016 - ES2017 - ES2018 - ES2019 - ES2020 ʢ΋͏5೥͔…
33. ES2015
34. ES2015 4೥ͷࡀ݄Λ͔͚ͨߕ൹͕͋ͬͯɺଟ͘ͷػೳ௥Ճ͕͋Γ·͠ ͨɻ http://www.ecma-international.org/ecma-262/6.0/index.html
35. ES2015 - class - import / export - Arrow function, Default parameters, Rest parameters - let / const - for .. of - Generator - Promise, Map, Set, Proxy ͳͲͳͲɺͨ͘͞Μ͋Γ·ͨ͠ http://kangax.github.io/compat-table/es6/
36. ES2015 - class (class એݴ) class Polygon { constructor(height, width) { this.area = height * width; } } console.log(new Polygon(4,3).area); index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/class
37. ES2015 - class (class ࣜ) const Rectangle = class { constructor(height, width) { this.height = height; this.width = width; } area() { return this.height * this.width; } } console.log(new Rectangle(5,8).area()); // expected output: 40 index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/class
38. ES2015 - import / export module https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export <script src="./index.js"type="module"></script> <!— ·ͨ͸ —> <script type="module"> import hello from ‘./hello.js'; hello(); </script> index.html import hello from './hello.js'; hello(); index.js const hello = () => { console.log('hello world'); }; export default hello; hello.js
39. ES2015 - Generator function* generator(i) { yield i; yield i + 10; } const gen = generator(10); console.log(gen.next()); // expected output: Object { value: 10, done: false } console.log(gen.next()); // expected output: Object { value: 20, done: false } console.log(gen.next()); // expected output: Object { value: undefined, done: true } index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator
40. ES2015 Generatorͷৄࡉʹ͍ͭͯ͸ http://jxck.hatenablog.com/entry/2014-01-12/ generator-screencaset ͷಈը͕Θ͔Γ΍͔ͬͨ͢Ͱ͢ɻ
41. ES2016
42. ES2016 ຖ೥ϦϦʔε͠Α͏ʂ ͱܾΊ͔ͯΒɺ͸͡ΊͯͷϦϦʔε https://www.ecma-international.org/ecma-262/7.0/ index.html
43. ES2016 - Array.prototype.includes() - ΂͖৐ԋࢉࢠ (**) ͷ2ͭͰͨ͠ɻ લճͱͷམ͕͍ࠩ͢͝ɻ http://kangax.github.io/compat-table/es2016plus/
44. ES2016 - Array.prototype.includes() const pets = ['cat', 'dog', 'bat']; console.log(pets.includes(‘cat')); console.log(pets.indexOf(‘cat') > -1); // old style // expected output: true console.log(pets.includes(‘at')); console.log(pets.indexOf(‘at') > -1); // old style // expected output: false index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/ includes
45. ES2016 - ΂͖৐ԋࢉࢠ (**) 2 ** 3 // 8 3 ** 2 // 9 3 ** 2.5 // 15.588457268119896 10 ** -1 // 0.1 NaN ** 2 // NaN 2 ** 3 ** 2 // 512 2 ** (3 ** 2) // 512 (2 ** 3) ** 2 // 64 ※ LaTeX΍Excel͸ ^ ͕΂͖৐ʹͳΓ·͕͢ɺJavaScriptͰ͸ϏοτԋࢉࢠʹͳΔͷͰ஫ҙ index.js https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/ Arithmetic_Operators
46. ES2017
47. ES2017 async function => PromiseͷγϯλοΫεγϡΨʔ ؔ਺ͷ຤ඌͷΧϯϚ => Λڐ༰ Object static methods Object.values() => ஋ͷ഑ྻΛฦ͢ Object.entries() => [key, value] Ͱ֨ೲͨ͠഑ྻΛฦ͢ Object.getOwnPropertyDescriptors() => objectͷDescriptorΛฦ͢ Shared memory and atomics http://kangax.github.io/compat-table/es2016plus/ https://www.ecma-international.org/ecma-262/8.0/index.html
48. ES2017 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Statements/async_function https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Trailing_commas https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/values https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/entries https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/getOwnPropertyDescriptors https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/Object/getOwnPropertyDescriptors
49. ES2018
50. ES2018 Rest/Spread Properties => Object Ϧςϥϧ (ؔ਺Ҿ਺, Array͸ES2015) Promise.prototype.finally() => Resolve, RejectʹؔΘΒ࣮ͣߦ Asynchronous iteration => ඇಉظgeneratorΛϧʔϓͤ͞Δ http://kangax.github.io/compat-table/es2016plus/ https://www.ecma-international.org/ecma-262/9.0/index.html
51. ES2018 - Asynchronous iteration async function getData () { updateStatus('0/2') const data1 = await (await fetch(url1)).json() updateStatus('1/2') const data2 = await (await fetch(url2)).json() updateStatus('2/2') return {data1, data2} } Before https://qiita.com/cognitom/items/e67c7df29a238decf49f async function* getData () { yield {status: '0/2'} const data1 = await (await fetch(url1)).json() yield {status: '1/2', data1} const data2 = await (await fetch(url2)).json() yield {status: '2/2', data2} } After
52. ES2019
53. ES2019 Array.prototype.{flat, flatMap} Object.fromEntries() String.prototype.{trimStart, trimEnd} http://kangax.github.io/compat-table/es2016plus/ https://www.ecma-international.org/ecma-262/10.0/index.html
54. ES2019 https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array/flat https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array/flatMap https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Object/fromEntries https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/String/TrimLeft https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/String/TrimRight
55. ES2020
56. ES2020 Stage4ͷࡦఆ׬ྃͱͳͬͨ࢓༷͕ɺྫ೥6݄ʹ৽όʔ δϣϯͱͯ͠ϦϦʔε͞ΕΔ https://github.com/tc39/proposals/blob/master/ finished-proposals.md ͷʮExpected Publication Year / 2020ʯͷ෦෼
57. ES2020 String.prototype.matchAll() Promise.allSettled() BigInt globalThis for-in mechanics Optional chaining Nullish coalescing operator ͳͲͳͲ http://kangax.github.io/compat-table/es2016plus/
58. ৽ن௥Ճͷ࢓༷Ұཡ https://github.com/tc39/proposals/blob/ master/finished-proposals.md
59. ͜ͷػೳ͸͍࣮ͭ૷͞Εͨʁ MDN͔ΒٯҾ͖͕ Θ͔Γ΍ͦ͢͏
60. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠