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