2017年のJavaScriptと フロントエンドの楽しみかた #jserinfo

Transcript

1. ೥ͷ+BWB4DSJQUͱ
   ϑϩϯτΤϯυͷָ͠Έ͔ͨ +4FSJOGP
   
   5",6."
   )BOBUBOJ
   BLB
   1PUBUPE
2. ͬ͘͟ΓϓϩϑΟʔϧ • Potato4d • ݱࡏ18ࡀͷߴߍ3೥ • य़͔Βब৬Ͱ౦ژ • JavaScriptɺಛʹVue.jsपΓ͕ओ • TwitterͷϋογϡλάͰ͏Δ͍͞ ਓ͕͍ͨΒࢲͰ͢
3. IUUQTHJUIVCDPNWVFKTKQWVFKTPSHQVMM
4. IUUQXXXTMJEFTIBSFOFU5BLVNB)BOBUBOJKRVFSZ
5. IUUQTTFSWJDFTDPVUFSDPKQ Ϣʔβʔ͕اۀͱస৬ऀΛͭͳ͙స৬ϓϥοτϑΥʔϜ PO
6. IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ
7. IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ
8. ࡢ೥ͷมԽΛݟͯΈΔ
9. ͍͍ͩͨ ϑϩϯτΤϯυ࿩
10. 2016೥(ओ؍) • ESपΓ • 2015 -> 2016: • async/awaitपΓ͕੝Γ্͕ͬͨ • ΈΜͳbabeͬͯΔͷͰ΋͏औΓࠐ·ΕΔ͔Ͳ͏͔͔͠ؾ ʹͯ͠ͳͦ͞͏ • ରԠͷ໘Ͱ͸Safari͕ES2015ԽͰ଍ฒΈ͕ἧͬͨ • API(Web ~) • Apple(Mobile Safari)ͷ஗Ε͕ܹ͍͠ͷͰͦΕ࣍ୈ͔
11. 2016೥(ओ؍) • ܕ • TS -> TS, FlowType: • FlowType͕ग़͖͚ͯͨͲ͋Μ·Γ࠾༻ࣄྫ஌Βͳ͍ • ݸਓతʹ͸ܕγεςϜ͕ཉ͍͠λΠϓͰ͸ͳ͍ • ʹ௥ͬͯͳ͍ͷͰ͋Μ·Γ஌Βͳ͍
12. 2016೥(ओ؍) • ύοέʔδ؅ཧ • npm -> yarn: • ӡ༻๏͸npmͱͳΜΒมΘΒͳ͍ͷͰಛʹԿ΋ͳ͍ • Ϗϧυπʔϧ • webpack: • ௨೥ͰมԽͳ͠(v2पΓͷ࿩͕ग़ͨ͘Β͍)
13. 2016೥(ओ؍) • ϑϨʔϜϫʔΫ • React, Angular, Vue: • Angular͕2ʹͳͬͨΓVue͕γΣΞ͕૿͑ͨΓͨ͠ • ઃܭύλʔϯपΓ • Flux, Redux -> Redux: • Flux࣮૷पΓ͕શ෦ReduxͰ౷Ұ͞Ε͚ͨͲ৽ग़͸ͳ͠ • ݸਓతʹ͸φγΛਪ͍ͨ͠
14. 2016೥(ओ؍) • ͦͷଞ • ʮΞϓϦฒͷମݧΛWebͰʯͷ੠͸ະͩେ͖͍΋ͷͷɺ࣮ ݱ͸ԕ͍༷ࢠ • ʮwasm͕͘Δʯ೿ൊ͕ऴ൫૿͑ͨҹ৅ • ݸਓతʹ͸ʮߴ౓͔ͭߴ଎ͳάϥϑΟοΫඳըʯͷϨΠ ϠʔͰར༻ͱͳΔͱݟ͍ͯΔ • ʮ๞͖ͨʯͱ͍͏࿩΋গͣͭ͠ฉ͘Α͏ʹ
15. 2016೥(ओ؍) • શମ • ࠷ۙྑ͘࿩୊ʹͳΔʮϑϩϯτΤϯυ͸ྲྀΕ͕ʰ͸΍͍ʱ ͷ͔ʰ͸΍͘ͳ͍ʱͷ͔ʯٞ࿦͸2016೥͕มԽʹ๡͔ͬ͠ ͨ͜ͱ͕ཁҼʹΈ͑Δ • ࣗ෼͕ϑϩϯτΤϯυΛӔதʹೖΒͣʹ֎͔Βগ͚ͩ͠৮ Γͳ͕Βݟͯͨ2015೥ͱग़ͯ͘Δݻ༗໊ࢺʹҧ͍͕ͳ͔ͬ ͨͷͰ΍Γ΍͍͢Ұ೥Ͱ͸͋ͬͨ • ࡢ೥ݻఆԽ͞Εٕͨज़ελοΫͷτʔΫ͕૿͑ͨͷ΋ಉ͡ ߟ͑ͷਓ͕୔ࢁ͍ͨ͜ͱʹΑΓͦ͏
16. 2016೥(ओ؍) • ҙࣝ • ʮSPAʯ͕౰ͨΓલʹͳͬͨ • ஈʑʮϑϩϯτΤϯυʯͰͳ͍JavaScriptͷੈքʹ͍ͭͯ ड़΂Δਓ΋૿͖͑ͯͨ • React΍Angular͋ͨΓ͸ͲͪΒ͔͕࢖͑Δਓ͕େ൒ͱͳ Γɺ௝͍͠΋ͷͰ͸ͳ͘ͳͬͨ • ES2015ͱ͍͏స׵ظͰ͓ͬͨ͜ʮਐԽʯ͕ɺॾʑͷ޷৚݅ ʹΑͬͯʮਁಁʯ͍ͯͬͨ͠Α͏ʹΈ͑Δ
17. 2016೥(ओ؍) • ҙࣝ • ʮSPAʯ͕౰ͨΓલʹͳͬͨ • ஈʑʮϑϩϯτΤϯυʯͰͳ͍JavaScriptͷੈքʹ͍ͭͯ ड़΂Δਓ΋૿͖͑ͯͨ • React΍Angular͋ͨΓ͸ͲͪΒ͔͕࢖͑Δਓ͕େ൒ͱͳ Γɺ௝͍͠΋ͷͰ͸ͳ͘ͳͬͨ • ES2015ͱ͍͏స׵ظͰ͓ͬͨ͜ʮਐԽʯ͕ɺॾʑͷ޷৚݅ ʹΑͬͯʮਁಁʯ͍ͯͬͨ͠Α͏ʹΈ͑Δ
18. 2016೥͸ ʮਁಁʯͷҰ೥ͩͬͨ
19. 2017೥Ҏ߱Λߟ͑Δ
20. ਐԽˠਁಁˠਐग़ ʁ
21. ਐԽˠਁಁˠਐग़
22. ਐग़
23. ϨΠϠʔؒΛӽڥ͢Δ 2017೥
24. ϑϩϯτΤϯυ͚ͩΛ ݟΔͷΛ΍ΊͯΈΔ
25. 2017೥ • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦ • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
26. 2017೥ • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦ • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
27. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript ϒϥ΢βͷ΋ͷͩͬͨJavaScript
28. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript Node + Express؀ڥͷαʔόʔαΠυJS Express IUUQFYQSFTTKTDPN
29. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript αʔόʔαΠυJS Express IUUQTTFSWFSMFTTDPN
30. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript αʔόʔαΠυJS Express IUUQTTFSWFSMFTTDPN
31. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript αʔόʔϨεͱ͍͏બ୒ࢶͷ௥Ճ Express IUUQTTFSWFSMFTTDPN
32. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
33. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework • AWSͷߏ੒Λ؅ཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ υΛߏ੒Ͱ͖ΔϑϨʔϜϫʔΫ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
34. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework • AWSͷߏ੒Λ؅ཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ υΛߏ੒Ͱ͖ΔϑϨʔϜϫʔΫ • Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰ੔ͬͨߏ੒ͷAPI GatewayͱLambda੡Web APIΛσϓϩΠͰ͖Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
35. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework • AWSͷߏ੒Λ؅ཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ υΛߏ੒Ͱ͖ΔϑϨʔϜϫʔΫ • Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰ੔ͬͨߏ੒ͷAPI GatewayͱLambda੡Web APIΛσϓϩΠͰ͖Δ • ͍ΘΏΔʮαʔόʔαΠυJSʯͰਓؾͩͬͨʮඇಉظ͔ͭ ϦΞϧλΠϜͷ௨৴ʯͱ͍ͬͨ༻్ʹ͸޲͔ͳ͍͕ɺͲ͏ ͯ͠΋ਏ͘ͳΔNodeͷαʔόʔ؅ཧͷඞཁ͕ͳ͘ɺ JavaScriptΛॻ͖͍ͨਓ͕ؾܰʹAPIΛ։ൃͰ͖Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
36. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless΁ͷظ଴ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
37. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless΁ͷظ଴ • ϑϩϯτΤϯυΤϯδχΞͷதʹ͸ɺʮαʔόʔ؅ཧͷඞ ཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ΋͍Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
38. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless΁ͷظ଴ • ϑϩϯτΤϯυΤϯδχΞͷதʹ͸ɺʮαʔόʔ؅ཧͷඞ ཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ΋͍Δ • ͦΕΛߟ͑Δͱɺʮαʔόʔ؅ཧͷඞཁͷͳ͍ʯ ʮJavaScriptόοΫΤϯυʯͱ͍͏؀ڥʹ͸େ͖ͳظ଴͕ ࣋ͯΔ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
39. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless΁ͷظ଴ • ϑϩϯτΤϯυΤϯδχΞͷதʹ͸ɺʮαʔόʔ؅ཧͷඞ ཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ΋͍Δ • ͦΕΛߟ͑Δͱɺʮαʔόʔ؅ཧͷඞཁͷͳ͍ʯ ʮJavaScriptόοΫΤϯυʯͱ͍͏؀ڥʹ͸େ͖ͳظ଴͕ ࣋ͯΔ • ͳʹΑΓɺ೔ʑਐԽ͢ΔΫϥ΢υ؀ڥʹ͓͍ͯʮશͯ JavaScriptͰهड़Ͱ͖Δʯͱ͍͏ϫΫϫΫײ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
40. 2017೥ • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦͷѻ͍ • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
41. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • PWA • Progressive Web Apps • WebʹɺΞϓϦͷΑ͏ͳϦονͳମݧΛఏڙ͢Δ • ΦϑϥΠϯWeb΍ɺWorkerपΓͳͲ • SPAຊମ͕ɺൺֱతٕज़తͳ؍఺Ͱͷར఺͕େ͖͍΋ͷͰ ͋Δͷʹର͠ɺPWAࢪࡦ͸UXʹؔΘΔ໘͕େ͖͍ • ͨͩSPAରԠ͢Δ͚ͩͰͳ͘ɺPWAରԠ͢Δ͜ͱͰɺͦͷ ༏ҐੑΛߋʹେ͖͍΋ͷʹͰ͖Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
42. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • Webࣗମʹ૿͑ΔAPI • Ұ࣌ظ͸HTML5 APIͷݺশ͕ଟ͔ͬͨ • WebʹϦον͞Λ௥Ճ͢Δ΋͏Ұͭͷཁૉ • ϝσΟΞσʔλͷϦΞϧλΠϜ௨৴΍BLEͳͲ͕શମͰར༻ ՄೳͱͳΔͱ෯͕޿͕Δ • લड़ͷPWAʹ΋ؚ·ΕΔPush NotificationsͳͲ͸Ϣʔβʔ ମݧΛڧ͘ߟ͑ͳ͘ͱ΋ཉ͍͠ཁૉ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*
43. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • PWAͱAPIͷ૊Έ߹Θͤͷݱ࣮ • ϕϯμରԠͷ஗͞ʹΑΔମݧͷ્֐ʢiOSͰϓογϡ௨஌͕ ஗Εͳ͍ͳͲʣ • Progressive EnhancementͰย෇͚Δʹ͸େ͖͗͢ΔϞόΠ ϧͷଘࡏ • ͱ͸͍͑σεΫτοϓ޲͚ͷ؀ڥͰ͸ΦϑϥΠϯपΓ͸׆͔ ͠ʹ͍͘ • σεΫτοϓ޲͚ͷϓογϡ௨஌͚ͩ͸ࣄྫ͕૿͖͑ͯͨҹ ৅ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
44. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • ϋΠϒϦουΞϓϦͷ࠶དྷͱ͍͏Մೳੑ • Cordovaͷํ͔ࣜΒมΘͬͯΏ͘τϨϯυ • ͜Ε·ͰͷΑ͏ͳʮWebviewͰHTML͕ಈ͔͘Βੌ͍ʯͷ ୤٫ • ʮReact NativeʯͳͲͷొ৔ʹΑΔωΠςΟϒϨΠϠ΁ͷ ਐग़ʢݱঢ়͸UIपΓ͕ωΠςΟϒͷ΋ͷΛࢀরʣ • σόΠεૢ࡞͕Մೳͱ͍͏͜ͱ΋͋Γɺ౰෼ͷʮPolyfillʯ తधཁͷՄೳੑ IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
45. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • ·ͱΊ • PWAͱAPIͷϕϯμ໰୊ͷղܾͱͯ͠ɺ·ͨϋΠϒϦου ΞϓϦͷ੎ྗ͕ڧ͘ͳΔՄೳੑ͸େ͖͋͘Δͱ༧૝ • ͜Ε·ͰϋΠϒϦουͷԼ஍͕͋Δఔ౓ଘࡏ͢Δ͜ͱ΋͋ Γɺہॴར༻Ҏ֎ͰPWAͰ΍ͬͯ͠·͏ͷ͸೉ͦ͠͏ • ࠓ͸ݸਓతʹ͸Vue.jsͰReact NativeͷΑ͏ͳ͜ͱ͕Ͱ͖Δ ʮWeexʯΛWatch͍͖͍ͯͨ͠ɻ • ͱ͍͏͔Vue.jsͷؾ࣋ͪʹͳͬͯॻ͖͍ͨ IUUQTXFFYQSPKFDUJP
46. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • ·ͱΊ • PWAͱAPIͷϕϯμ໰୊ͷղܾͱͯ͠ɺ·ͨϋΠϒϦου ΞϓϦͷ੎ྗ͕ڧ͘ͳΔՄೳੑ͸େ͖͋͘Δͱ༧૝ • ͜Ε·Ͱ͕࣮ࡍͦͷΑ͏ʹਐΜͰ͖ͨܦҢ΋͋ΓɺPWAʹ ͙͢ʹ੒Γ୅ΘΔ͜ͱ͸೉͍͠ • ࠓ͸ݸਓతʹ͸Vue.jsͰReact NativeͷΑ͏ͳ͜ͱ͕Ͱ͖Δ ʮWeexʯΛWatch͍͖͍ͯͨ͠ɻ IUUQTXFFYQSPKFDUJP
47. 2017೥ • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦͷѻ͍ • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
48. Webͷݴޠ Grumpy IUUQTDQQMPWFSCMPHTQPUKQHPPHMFHPQZUIPOHSVNQZIUNM
49. Webͷݴޠ Gopher.js
50. શମΛ௨ͯ͠ ײ͡Δ͜ͱ
51. ςΫϊϩδʔͷڥք
52. ςΫϊϩδʔͷڥք
53. ޷͖ͳٕज़Λ ޷͖ͳྖҬͰ࢖͑Δະདྷ
54. 2017೥
55. ϨΠϠʔͷӽڥΛ ָ͠Ή
56. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
57. એ఻
58. IUUQLGVHKQGSPOUDPOG
59. IUUQLGVHKQGSPOUDPOG WebGL 2.0࣌୅ͷນ։͚ - ΢ΣϒͷάϥϑΟοΫε͸Ͳ͏มΘΔͷ͔ ͍ΘΏΔ"ϑϩϯτΤϯυ"͕ͳ͍ੈքʹ͍ͭͯߟ͑Δ ೥Ͱ΋໘നͦ͏ͳηογϣϯୡ
    εϥΠυͷ౎߹্Ұ෦ͷΈܝࡌ flowtype ʹΑΔܕͷ͋Δੈքೖ໳ BOE
    NPSFʜ
60. IUUQLGVHKQGSPOUDPOG