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

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

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

Avatar for potato4d(Takuma HANATANI)

potato4d(Takuma HANATANI)

January 15, 2017
Tweet

More Decks by potato4d(Takuma HANATANI)

Other Decks in Programming

Transcript

  1. 2016೥(ओ؍) • ESपΓ • 2015 -> 2016: • async/awaitपΓ͕੝Γ্͕ͬͨ •

    ΈΜͳbabeͬͯΔͷͰ΋͏औΓࠐ·ΕΔ͔Ͳ͏͔͔͠ؾ ʹͯ͠ͳͦ͞͏ • ରԠͷ໘Ͱ͸Safari͕ES2015ԽͰ଍ฒΈ͕ἧͬͨ • API(Web ~) • Apple(Mobile Safari)ͷ஗Ε͕ܹ͍͠ͷͰͦΕ࣍ୈ͔
  2. 2016೥(ओ؍) • ܕ • TS -> TS, FlowType: • FlowType͕ग़͖͚ͯͨͲ͋Μ·Γ࠾༻ࣄྫ஌Βͳ͍

    • ݸਓతʹ͸ܕγεςϜ͕ཉ͍͠λΠϓͰ͸ͳ͍ • ʹ௥ͬͯͳ͍ͷͰ͋Μ·Γ஌Βͳ͍
  3. 2016೥(ओ؍) • ύοέʔδ؅ཧ • npm -> yarn: • ӡ༻๏͸npmͱͳΜΒมΘΒͳ͍ͷͰಛʹԿ΋ͳ͍ •

    Ϗϧυπʔϧ • webpack: • ௨೥ͰมԽͳ͠(v2पΓͷ࿩͕ग़ͨ͘Β͍)
  4. 2016೥(ओ؍) • ϑϨʔϜϫʔΫ • React, Angular, Vue: • Angular͕2ʹͳͬͨΓVue͕γΣΞ͕૿͑ͨΓͨ͠ •

    ઃܭύλʔϯपΓ • Flux, Redux -> Redux: • Flux࣮૷पΓ͕શ෦ReduxͰ౷Ұ͞Ε͚ͨͲ৽ग़͸ͳ͠ • ݸਓతʹ͸φγΛਪ͍ͨ͠
  5. 2016೥(ओ؍) • ҙࣝ • ʮSPAʯ͕౰ͨΓલʹͳͬͨ • ஈʑʮϑϩϯτΤϯυʯͰͳ͍JavaScriptͷੈքʹ͍ͭͯ ड़΂Δਓ΋૿͖͑ͯͨ • React΍Angular͋ͨΓ͸ͲͪΒ͔͕࢖͑Δਓ͕େ൒ͱͳ

    Γɺ௝͍͠΋ͷͰ͸ͳ͘ͳͬͨ • ES2015ͱ͍͏స׵ظͰ͓ͬͨ͜ʮਐԽʯ͕ɺॾʑͷ޷৚݅ ʹΑͬͯʮਁಁʯ͍ͯͬͨ͠Α͏ʹΈ͑Δ
  6. 2016೥(ओ؍) • ҙࣝ • ʮSPAʯ͕౰ͨΓલʹͳͬͨ • ஈʑʮϑϩϯτΤϯυʯͰͳ͍JavaScriptͷੈքʹ͍ͭͯ ड़΂Δਓ΋૿͖͑ͯͨ • React΍Angular͋ͨΓ͸ͲͪΒ͔͕࢖͑Δਓ͕େ൒ͱͳ

    Γɺ௝͍͠΋ͷͰ͸ͳ͘ͳͬͨ • ES2015ͱ͍͏స׵ظͰ͓ͬͨ͜ʮਐԽʯ͕ɺॾʑͷ޷৚݅ ʹΑͬͯʮਁಁʯ͍ͯͬͨ͠Α͏ʹΈ͑Δ
  7. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework • AWSͷߏ੒Λ؅ཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ υΛߏ੒Ͱ͖ΔϑϨʔϜϫʔΫ • Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰ੔ͬͨߏ੒ͷAPI GatewayͱLambda੡Web

    APIΛσϓϩΠͰ͖Δ • ͍ΘΏΔʮαʔόʔαΠυJSʯͰਓؾͩͬͨʮඇಉظ͔ͭ ϦΞϧλΠϜͷ௨৴ʯͱ͍ͬͨ༻్ʹ͸޲͔ͳ͍͕ɺͲ͏ ͯ͠΋ਏ͘ͳΔNodeͷαʔόʔ؅ཧͷඞཁ͕ͳ͘ɺ JavaScriptΛॻ͖͍ͨਓ͕ؾܰʹAPIΛ։ൃͰ͖Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
  8. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • PWA • Progressive Web Apps • WebʹɺΞϓϦͷΑ͏ͳϦονͳମݧΛఏڙ͢Δ •

    ΦϑϥΠϯWeb΍ɺWorkerपΓͳͲ • SPAຊମ͕ɺൺֱతٕज़తͳ؍఺Ͱͷར఺͕େ͖͍΋ͷͰ ͋Δͷʹର͠ɺPWAࢪࡦ͸UXʹؔΘΔ໘͕େ͖͍ • ͨͩSPAରԠ͢Δ͚ͩͰͳ͘ɺPWAରԠ͢Δ͜ͱͰɺͦͷ ༏ҐੑΛߋʹେ͖͍΋ͷʹͰ͖Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
  9. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • Webࣗମʹ૿͑ΔAPI • Ұ࣌ظ͸HTML5 APIͷݺশ͕ଟ͔ͬͨ • WebʹϦον͞Λ௥Ճ͢Δ΋͏Ұͭͷཁૉ • ϝσΟΞσʔλͷϦΞϧλΠϜ௨৴΍BLEͳͲ͕શମͰར༻

    ՄೳͱͳΔͱ෯͕޿͕Δ • લड़ͷPWAʹ΋ؚ·ΕΔPush NotificationsͳͲ͸Ϣʔβʔ ମݧΛڧ͘ߟ͑ͳ͘ͱ΋ཉ͍͠ཁૉ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*
  10. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • PWAͱAPIͷ૊Έ߹Θͤͷݱ࣮ • ϕϯμରԠͷ஗͞ʹΑΔମݧͷ્֐ʢiOSͰϓογϡ௨஌͕ ஗Εͳ͍ͳͲʣ • Progressive EnhancementͰย෇͚Δʹ͸େ͖͗͢ΔϞόΠ ϧͷଘࡏ

    • ͱ͸͍͑σεΫτοϓ޲͚ͷ؀ڥͰ͸ΦϑϥΠϯपΓ͸׆͔ ͠ʹ͍͘ • σεΫτοϓ޲͚ͷϓογϡ௨஌͚ͩ͸ࣄྫ͕૿͖͑ͯͨҹ ৅ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
  11. PWAͱϋΠϒϦουΞϓϦͷѻ͍ • ϋΠϒϦουΞϓϦͷ࠶དྷͱ͍͏Մೳੑ • Cordovaͷํ͔ࣜΒมΘͬͯΏ͘τϨϯυ • ͜Ε·ͰͷΑ͏ͳʮWebviewͰHTML͕ಈ͔͘Βੌ͍ʯͷ ୤٫ • ʮReact

    NativeʯͳͲͷొ৔ʹΑΔωΠςΟϒϨΠϠ΁ͷ ਐग़ʢݱঢ়͸UIपΓ͕ωΠςΟϒͷ΋ͷΛࢀরʣ • σόΠεૢ࡞͕Մೳͱ͍͏͜ͱ΋͋Γɺ౰෼ͷʮPolyfillʯ తधཁͷՄೳੑ IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF