春からはじめる新しいNode.js / start new Node.js in spring

関西Node学園 梅田キャンパス 1時限目 https://nodejs.connpass.com/event/82614/ でNode.js v10やEcmaScriptの新機能の話をしました。

Transcript

1. य़͔Β͸͡ΊΔ ৽͍͠Node.js ؔ੢NodeֶԂ #1 ฏ໺ ণ࢜ / @shisama
2. { "about": { "name": "Masashi Hirano", "works": "Weblio, Inc.", "twitter": "@shisama_", "github": "shisama" } }
3. Agenda • ݱࡏͷNode.jsΛ෮श • ৽͍͠Node.jsΛ༧श • ৽͍͠Node.jsΛ࣮श
4. ର৅ͱ͢Δਓ • Node.jsΛ࢖ͬͨ͜ͱ͋Δਓ • Node.js΍ͬͯΔ͚Ͳɺ࠷৽৘ใΛ஌Γ͍ͨਓ • ݹ͍όʔδϣϯͷNode.js࢖ͬͯΔਓ
5. ࠓ೔࿩͞ͳ͍͜ͱ • Node.jsͱ͸ • ϑϩϯτΤϯυ(jQuery,React,Angular,Vue…) • ػೳ΍࢓༷ͷ͢΂ͯʢ࣌ؒత੍໿ʣ
6. Goal • Node.jsͷ࠷৽৘ใΛ஌Δ • ݹ͍؀ڥΛΞοϓσʔτ͢Δ • ৽͍͠Node.jsͷػೳΛ࢖ͬͯΈΔ
7. ·ͣࠓճ࿩͢಺༰ʹؔ܎͢Δ ༻ޠΛͬ͘͟Γ෮श
8. V8 engine • Google͕։ൃ͢ΔJavaScriptΤϯδϯ • ChromeͱNode.jsͰ࢖ΘΕ͍ͯΔ • ࣮ߦ଎౓͕଎͍
9. npm • Node Package Manager • ϥΠϒϥϦ؅ཧ • λεΫ࣮ߦ
10. V8ɺnpmͷόʔδϣϯ৘ใ https://nodejs.org/en/download/releases/
11. EcmaScript • JavaScriptͷ࢓༷ • ҰൠతʹEcmaScript͸ECMA-262Λࢦ͢ • TC39ͱ͍͏ҕһձ͕࢓༷ࡦఆΛ͍ͯ͠Δ • Living Standard • ৗʹ࢓༷͕Ξοϓσʔτ͞ΕΔ
12. EcmaScript • 2ϲ݄ʹ1ճϛʔςΟϯά͕ߦΘΕ͍ͯΔ • ֤ػೳͷεςʔδߋ৽ͳͲ͕ٞ࿦͞ΕΔ • stage-4ʹͳͬͨ΋ͷ͕1೥ʹ1ճEcmaScript ͷ࢓༷ͱͯ͠ϦϦʔε͞ΕΔ(ES201X)
13. EcmaScript • ࢓༷ࡦఆ·Ͱʹstage0ʙstage4·Ͱͷஈ֊͕ଘࡏ͢Δ • 0 Strawman - ΞΠσΞ • 1 Proposal - ఏҊ • 2 Draft - υϥϑτ • 3 Candidate- ࢓༷ॻͱಉ͡ܗࣜ • 4 Finished - ࡦఆ׬ྃ
14. EcmaScript https://azu.github.io/slide-what-is-ecmascript/slide/ B[V͞Μͷʰ&$."4DSJQUͱ͸Կ͔ʁʱ͕
    Θ͔Γ΍͍͢ͷͰಡΜͰΈͯ΄͍͠
15. &DNB4DSJQUͷ࠷৽৘ใ͸5$ͷ ϦϙδτϦʹ͋Γ·͢ʂ
16. ݱࡏͷNode.jsΛ෮श
17. Release Schedule • github.com/nodejs/Releaseʹࡌ͍ͬͯΔ • ൒೥ʹҰճϝδϟʔϦϦʔε͕ߦΘΕΔ
18. https://github.com/nodejs/Release
19. https://github.com/nodejs/Release
20. Active • LTS (Long Term Support) • 18ϲ݄ؒαϙʔτ͕ߦΘΕΔ • ຖ೥10݄͔ΒLTS ActiveʹͳΔ • όʔδϣϯ൪߸͕ۮ਺
21. https://github.com/nodejs/Release
22. Current • ࠷৽ͷϦϦʔε൛ • ϝδϟʔόʔδϣϯ͕ح਺ˠ10݄ʹϦϦʔε • ϝδϟʔόʔδϣϯ͕ۮ਺ˠ4݄ʹϦϦʔε
23. https://github.com/nodejs/Release
24. Maintenance • LTS΍Currentظؒऴྃޙͷϝϯςφϯεظؒ • LTS͸12ϲ݄ؒαϙʔτ • όάɺ੬ऑੑɺυΩϡϝϯτͳͲ͕ϝϯς͞ ΕΔ
25. https://github.com/nodejs/Release ݱࡏαϙʔτதͷόʔδϣϯ͸ʁ
26. Node 4.x • V8Τϯδϯ͸4.5 • ES2015ͷػೳͷଟ͕͘࢖͑ΔΑ͏ʹ • 2018/04/30ʹϝϯςφϯεऴྃ༧ఆ • αϙʔτࢭ·ΔͷͰΞοϓσʔτඞਢ
27. Node 6.x • V8Τϯδϯ͸5.1 • Proxy΍σϑΥϧτҾ਺͕࢖͑ΔΑ͏ʹ • 2018/04/30͔ΒLTSͰ͸ͳ͘ͳΔ༧ఆ • ϝϯςφϯε͞ΕΔ͚Ͳདྷ೥4݄ʹ͸αϙʔτ ऴྃ༧ఆ
28. Node 8.x • ݱࡏͷLTS • V8Τϯδϯ͸6.1 • async / awaitΛαϙʔτ͢Δ࠷ॳͷLTS • util.promisify, inspectorͳͲ͕௥Ճ͞Εͨ
29. Node 8.x • npm@5 • package-lock.json • 8.5͔Β͸ϑϥά෇͖ͰES Modules࢖͑Δ • import / export syntax • AWS LambdaͰ΋࠷ۙΑ͏΍͘v8͕࢖͑ΔΑ͏ʹ
30. Node 8.x • 2019/04͔ΒLTSͰ͸ͳ͘ͳΔ • 2019/12ʹ͸ϝϯςφϯεऴྃ • ࠓ࢖͏ͳΒ͜ͷόʔδϣϯ͕ແ೉
31. Node 9.x • ݱࡏͷCurrent • V8Τϯδϯ͸6.2 • HTTP2͕ϑϥάͳ͠Ͱ࢖͑Δ • 2018/06/30Ͱϝϯςφϯεऴྃ༧ఆ
32. ͜͜·Ͱͷ͓͞Β͍ • 4.x࢖ͬͯΔਓ͸ࠓ݄தʹΞοϓσʔτ • 6.x࢖ͬͯΔਓ͸̍೥Ҏ಺ʹΞοϓσʔτ • 8.x࢖ͬͯΔਓ͸·ͩ̍೥Ҏ্େৎ෉ • 9.x࢖ͬͯΔਓ͸݄̒຤·ͰʹΞοϓσʔτ
33. ͜͜·Ͱͷ͓͞Β͍ • 4.x࢖ͬͯΔਓ͸ࠓ݄தʹΞοϓσʔτ • 6.x࢖ͬͯΔਓ͸̍೥Ҏ಺ʹΞοϓσʔτ • 8.x࢖ͬͯΔਓ͸·ͩ̍೥Ҏ্େৎ෉ • 9.x࢖ͬͯΔਓ͸݄̒຤·ͰʹΞοϓσʔτ ࠓ͕Ξοϓσʔτ͢Δͱ͖Ͱ͢Αʂʂ
34. ৽͍͠Node.jsΛ༧श
35. https://github.com/nodejs/Release
37. Node.js 10.0 • 2018/04/24ʹϦϦʔε༧ఆ • ࣍ͷLTS • V8Τϯδϯ͸6.6 • npm@6(ϦϦʔε࣌ʹೖΔ͔ະఆ)
38. V8 Engine • ݱࡏͷmasterʹೖͬͯΔͷ͸6.6 • 6.7ʹͯ͠΄͍͠ཁ๬΋͋Δ
39. WWFSTJPOIʹఆٛ͞Ε͍ͯΔ https://github.com/nodejs/node/blob/master/deps/ v8/include/v8-version.h ࠷৽ͷNode.jsͷV8͸ʁ
40. V8 engine • Node 9.x(V8 6.2) => Node 10.0(V8 6.6) • EcmaScript৽ػೳͷ௥Ճ(ޙड़) • ࣮ߦ଎౓ͷվળ • asyncͷύϑΥʔϚϯεվળ
41. https://github.com/nodejs/node/pull/19091 V8 6.7 7
    ͸ʹTUBCMFʹͳΔ͚Ͳɺ
    ͦΕͰ͸஗͗͢Δ
    /PEF͸݄ޙ൒ʹϦϦʔε͍ͨ͠
42. V8 6.7 • Chrome 67 • BigInt(64bit੔਺ܕ)ͳͲEcmaScript৽ػೳͷ ௥Ճ • Node v10Ͱ΋ϑϥά෇͖Ͱ࢖͑Δ΋ͷ΋͋ Δ
43. npm@6 https://github.com/npm/npm/releases/tag/v6.0.0-next.0 มߋ͸খ͞Ίɻ/PEF͕ϦϦʔε͞Ε Δ·Ͱখ͍͞มߋ͔͠͠ͳ͍༧ఆ
44. npm@6 https://github.com/npm/npm/releases/tag/v6.0.0-next.0 ࠓ೥ޙ൒ʹେ͖ͳมߋΛೖΕΔ ༧ఆɻOQN!ʹ஫໨ʂ
45. npm@6 • Node 10.0ʹ޲͚ͯখ͞ͳมߋ͸͋Δ • Node 4.xͱNode 7.xͷαϙʔτऴྃ • npm ci && npm tͳnpm cit͕௥Ճ • npm install͢Δͱ͖ʹdeprecateͷόʔδϣϯ ΛճආͳͲ
46. deprecateͷόʔδϣϯΛճආ $ npm install example@~1.1.0 // 1.1.2 // 1.1.3 (deprecated) // 1.2.0 (latest) ͕Yͷ࠷৽͕ͩɺEFQSFDBUFʹͳͬ ͍ͯΔͨΊΠϯετʔϧ͞Εͳ͍
47. EcmaScript৽ػೳ • ଟ͘ͷػೳ͕௥Ճ͞Εͨ • ES Modules͸·ͩϑϥά෇͚ͳ͍ͱ࢖͑ͳ͍
48. Node.js v10ʹ௥Ճ͞ΕΔ EcmaScript৽ػೳ • Dynamic import • Async Iteration • Promise.prototype.finally • RegExp New Features • Intl.NumberFormat.formatToParts • Function.prototype.toString() • Optional catch binding • String.prototype.trimStart • String.prototype.trimEnd
49. Dynamic Import (async() => { let count = 0; let id = setInterval(async() => { const i = Math.floor(Math.random() * 3) + 1; const module = await import(`./hello${i}.mjs`); module.hello(); count++; if (count === 10) { clearInterval(id); } }, 1000); })(); ಈతʹϞδϡʔϧΛJNQPSUՄ ೳʹ
50. Async Iteration async function* gen() { while (true) { const res = await axios.get(‘https:// hogehoge.com'); const data = await res.data; yield data; } } (async() => { for await (const data of gen()) { console.log(data); } })(); 1SPNJTFͳ഑ྻΛGPS
    BXBJU
    PGͰඇಉظϧʔϓ͕Մೳʹ
51. Promise.prototype.finally Promise.resolve(“then”) .then(val => { console.log(val); throw new Error(“catch") }).catch(err => { console.log(err.message) }).finally(() => { console.log(“finally") }); pOBMMZ ͕௥Ճ
52. RegExp New Features const result = '123$456 $789 $ 000'.match(/(?<=\ $)\d+/g); console.log(result); // ['456', '789'] ਖ਼نදݱͷޙಡΈ͕Մೳɻ
    ଞʹ΋ υοτ ͕վߦจࣈʹϚον͢ ΔΑ͏ʹͳΔTϑϥάͳͲ
53. Intl.NumberFormat.formatTo Parts const num = 1000; const formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }); const yen = formatter.formatToParts(num).map(({type, value}) => { switch (type) { case 'currency': return "<strong>" + value + "</ strong>"; default: return value; } }).reduce((string, part) => {return string + part}); console.log(yen); // => "<strong>¥</strong>1,000" ਺஋ͷΧελϜϑΥʔϚοτ ͕Մೳʹ
54. Function.prototype.toString function /* a comment */ foo () {} foo.toString(); // → 'function /* comment */ foo () {}' UP4USJOH ͷ࢓༷มߋ
55. Optional catch binding try { const a = 1; a = 2; } catch { console.error("catch"); } DBUDIͷҾ਺ͳ͠Ͱ΋Մೳʹ
56. String.prototype.trim{Start|End} const value = " has spaces "; console.log(`‘${value}'`); // => ‘ has spaces ‘ console.log(`‘${value.trimStart()}'`); // => ‘has spaces ‘ console.log(`trimEnd: '${value.trimEnd()}'`); // => ‘ has spaces‘ จࣈྻͷલޙͷεϖʔεΛআ ڈ
57. http://node.green/ OPEFHSFFOͱ͍͏αΠτʹ
    /PEFKTͷόʔδϣϯ͝ͱʹ
    &4ͷͲͷػೳ͕࢖͑Δ͔ࡌ͍ͬͯΔ
58. ͦͷଞؾʹͳΔ௥Ճػೳ • fs͕PromiseϕʔεͰಈ͔ͤΔΑ͏ʹͳͬͨ • const data = await fs.readFile(‘./ something’, ‘utf-8’); • util.types.isPromiseͱ͔isDateͰܕ൑ఆ ͳͲ
59. Wʹ͍ͭͯ΋ͬͱৄ͍͠࿩Λฉ ͖͍ͨਓ͸དྷि౦ژ΁ʂ
60. ৽͍͠Node.jsΛ࣮श
61. ࠷৽ͷNode.jsΛ࢖͏
62. https://github.com/nodejs/Release
63. master • ࠷৽ͷιʔείʔυ • ຖ೔େྔʹίϛοτ͞Ε͍ͯΔ • ࠓϏϧυ͢ΔͱNode 10.0.0-preʹͳΔ
64. Node.jsΛϏϧυ https://github.com/nodejs/node/blob/master/BUILDING.md #6*-%*/(NEΛݟΕ͹֤04޲͚ͷखॱ͕ॻ ͔Ε͍ͯΔɻ
    Ϗϧυ࣌ؒ΋ͦΜͳʹ͔͔Βͳ͍
65. Node.jsΛϏϧυ $ ./configure $ make -j4 Ϗϧυதɾɾɾ $ ./node -v > v10.0.0-pre ͜Ε͚ͩ
66. Ϗϧυͨ͠Node.jsΛ࢖͏ • ৽ػೳΛࢼͯ͠ΈΔ ➡ ࠓ೔঺հͨ͠ES৽ػೳ͸ಈ͘ʂʂ • Nodeຊମͷ࣮૷Λมߋͯ͠ಈ͔ͯ͠ΈΔ
67. ͞Βʹ৽͍͠ػೳΛࢼ͢ • Node.jsʹ͸࣮ݧతʹ࣮૷͞Ε͍ͯΔػೳ͕͋ Δ • ϑϥάΛ͚ͭΔ͜ͱͰ࢖͑Δ • ES Modules΋·࣮ͩݧతͳػೳ
68. ES Modules $ node —experimental-modules index.mjs ŠFYQFSJNFOUBMNPEVMFTϑϥάΛ࢖͏ɻ
    ֦ுࢠ͸NKT
69. harmony • --harmonyϑϥάΛ࢖͑͹࣮ݧతͳػೳ͕࢖͑ ΔΑ͏ʹͳΔ • Node.jsʹ࣮૷͞Ε͍ͯΔEcmaScriptͷػೳʹ Αͬͯϑϥά͸มΘΔ • EcmaScriptͷػೳ͸̏ͭʹ෼͚ΒΕΔ
70. EcmaScriptͷػೳ • shipping: ϦϦʔεࡁ • ϑϥάͳ͠Ͱ࣮ߦՄೳ • staged: ΄΅׬੒͕ͩɺ҆ఆ͍ͯ͠ΔͱΈͳ͞Εͳ͍ • --harmonyϑϥάͰ࣮ߦՄೳ • in progress: ։ൃத • --harmony-class-fieldsͷΑ͏ʹݸʑʹ༻ҙ͞Εͨ harmonyϑϥά
71. harmony ֬ೝํ๏ $ node —v8-options | grep harmony --es_staging (enable test-worthyɾɾɾ --harmony (enable all completedɾɾɾ --harmony_shipping (enable allɾɾɾ --harmony_array_prototype_values (ɾɾ --harmony_function_sent (enableɾɾɾ ͲΜͳIBSNPOZϑϥά͕͋Δ͔͸ŠW PQUJPOTΛ࣮ߦ͢Ε͹֬ೝͰ͖Δ
72. harmony ྫ $ node —harmony-bigint > typeof 123n ‘bigint’ > 123n + 1n 124n ŠIBSNPOZϑϥάΛ͚ͭΔ͜ͱͰ#JH*OU΋ ࢖͑Δ /PEF
    W
73. Node.jsʹ࣮૷͞Ε͍ͯͳ͍ػೳΛ࢖͏ • BabelͰτϥϯεύΠϧ • EcmaScriptશػೳΛΧόʔ͍ͯ͠ΔΘ͚Ͱ͸ͳ ͍ • Node.jsͱޓ׵ੑ͕ͳ͍SyntaxͰ΋ಈ͘ͷͰ஫ҙ • import {readFile} from ‘fs’; ͜ΕNode.jsͰ͸ ErrorʹͳΓ·͢
74. Ξ΢τϓοτ͢Δ • ৽͍ٕ͠ज़ʹ৮ΕͨΒ͔ͤͬ͘ͳͷͰ஌ݟΛ ڞ༗ͯ͠΄͍͠ʂ • ϒϩά • Qiita • ษڧձ
75. ؔ੢NodeֶԂ͸ ͍ͭͰ΋͋ͳͨͷొஃΛ ͓଴͍ͪͯ͠·͢ʂ
76. ·ͱΊ • Node.jsͷαϙʔτظؒΛҙࣝ͠Α͏ʂ • Node.js v10 ͸དྷिϦϦʔεʂ(༧ఆ) • ٕज़͸஌Δ͚ͩͰͳ͘ɺ࢖ͬͯͳΜ΅Ͱ͢ʂ • ొஃͯ͘͠ΕΔํ͓଴͍ͪͯ͠·͢ʂʂ
77. Special Thanks! ओ࠵ऀϝϯόʔ (@sbntaminif, @vanx2, @mdaisuke, @kamiyam,@leichtgewicht), ͘͞ΒΠϯλʔωοτ ༷, εϐʔΧʔͷํʑ(@mochiya98, @sota1235, @h_michael_z) and ࠓ೔དྷͯ͘Εͨօ༷!! 1ճ໨։࠵Ͱ͖ͯخ͍͠Ͱ͢ʂ͜Ε͔Β΋ؔ੢Node ֶԂΛ຤Ӭ͘ΑΖ͓͘͠ئ͍͍ͨ͠·͢
78. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠