Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

January 15, 2017
Tweet

Transcript

  1. ೥ͷ+BWB4DSJQUͱ ϑϩϯτΤϯυͷָ͠Έ͔ͨ +4FSJOGP5",6.")BOBUBOJBLB1PUBUPE

  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 ʹΑΔܕͷ͋Δੈքೖ໳

    BOENPSFʜ
  60. IUUQLGVHKQGSPOUDPOG