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

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

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

Potato4d(Hanatani Takuma)

January 15, 2017
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

Transcript

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

    View Slide

  2. ͬ͘͟ΓϓϩϑΟʔϧ
    • Potato4d
    • ݱࡏ18ࡀͷߴߍ3೥
    • य़͔Βब৬Ͱ౦ژ
    • JavaScriptɺಛʹVue.jsपΓ͕ओ
    • TwitterͷϋογϡλάͰ͏Δ͍͞
    ਓ͕͍ͨΒࢲͰ͢

    View Slide

  3. IUUQTHJUIVCDPNWVFKTKQWVFKTPSHQVMM

    View Slide

  4. IUUQXXXTMJEFTIBSFOFU5BLVNB)BOBUBOJKRVFSZ

    View Slide

  5. IUUQTTFSWJDFTDPVUFSDPKQ
    Ϣʔβʔ͕اۀͱస৬ऀΛͭͳ͙స৬ϓϥοτϑΥʔϜ
    PO

    View Slide

  6. IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ

    View Slide

  7. IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ

    View Slide

  8. ࡢ೥ͷมԽΛݟͯΈΔ

    View Slide

  9. ͍͍ͩͨ
    ϑϩϯτΤϯυ࿩

    View Slide

  10. 2016೥(ओ؍)
    • ESपΓ
    • 2015 -> 2016:
    • async/awaitपΓ͕੝Γ্͕ͬͨ
    • ΈΜͳbabeͬͯΔͷͰ΋͏औΓࠐ·ΕΔ͔Ͳ͏͔͔͠ؾ
    ʹͯ͠ͳͦ͞͏
    • ରԠͷ໘Ͱ͸Safari͕ES2015ԽͰ଍ฒΈ͕ἧͬͨ
    • API(Web ~)
    • Apple(Mobile Safari)ͷ஗Ε͕ܹ͍͠ͷͰͦΕ࣍ୈ͔

    View Slide

  11. 2016೥(ओ؍)
    • ܕ
    • TS -> TS, FlowType:
    • FlowType͕ग़͖͚ͯͨͲ͋Μ·Γ࠾༻ࣄྫ஌Βͳ͍
    • ݸਓతʹ͸ܕγεςϜ͕ཉ͍͠λΠϓͰ͸ͳ͍
    • ʹ௥ͬͯͳ͍ͷͰ͋Μ·Γ஌Βͳ͍

    View Slide

  12. 2016೥(ओ؍)
    • ύοέʔδ؅ཧ
    • npm -> yarn:
    • ӡ༻๏͸npmͱͳΜΒมΘΒͳ͍ͷͰಛʹԿ΋ͳ͍
    • Ϗϧυπʔϧ
    • webpack:
    • ௨೥ͰมԽͳ͠(v2पΓͷ࿩͕ग़ͨ͘Β͍)

    View Slide

  13. 2016೥(ओ؍)
    • ϑϨʔϜϫʔΫ
    • React, Angular, Vue:
    • Angular͕2ʹͳͬͨΓVue͕γΣΞ͕૿͑ͨΓͨ͠
    • ઃܭύλʔϯपΓ
    • Flux, Redux -> Redux:
    • Flux࣮૷पΓ͕શ෦ReduxͰ౷Ұ͞Ε͚ͨͲ৽ग़͸ͳ͠
    • ݸਓతʹ͸φγΛਪ͍ͨ͠

    View Slide

  14. 2016೥(ओ؍)
    • ͦͷଞ
    • ʮΞϓϦฒͷମݧΛWebͰʯͷ੠͸ະͩେ͖͍΋ͷͷɺ࣮
    ݱ͸ԕ͍༷ࢠ
    • ʮwasm͕͘Δʯ೿ൊ͕ऴ൫૿͑ͨҹ৅
    • ݸਓతʹ͸ʮߴ౓͔ͭߴ଎ͳάϥϑΟοΫඳըʯͷϨΠ
    ϠʔͰར༻ͱͳΔͱݟ͍ͯΔ
    • ʮ๞͖ͨʯͱ͍͏࿩΋গͣͭ͠ฉ͘Α͏ʹ

    View Slide

  15. 2016೥(ओ؍)
    • શମ
    • ࠷ۙྑ͘࿩୊ʹͳΔʮϑϩϯτΤϯυ͸ྲྀΕ͕ʰ͸΍͍ʱ
    ͷ͔ʰ͸΍͘ͳ͍ʱͷ͔ʯٞ࿦͸2016೥͕มԽʹ๡͔ͬ͠
    ͨ͜ͱ͕ཁҼʹΈ͑Δ
    • ࣗ෼͕ϑϩϯτΤϯυΛӔதʹೖΒͣʹ֎͔Βগ͚ͩ͠৮
    Γͳ͕Βݟͯͨ2015೥ͱग़ͯ͘Δݻ༗໊ࢺʹҧ͍͕ͳ͔ͬ
    ͨͷͰ΍Γ΍͍͢Ұ೥Ͱ͸͋ͬͨ
    • ࡢ೥ݻఆԽ͞Εٕͨज़ελοΫͷτʔΫ͕૿͑ͨͷ΋ಉ͡
    ߟ͑ͷਓ͕୔ࢁ͍ͨ͜ͱʹΑΓͦ͏

    View Slide

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

    View Slide

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

    View Slide

  18. 2016೥͸
    ʮਁಁʯͷҰ೥ͩͬͨ

    View Slide

  19. 2017೥Ҏ߱Λߟ͑Δ

    View Slide

  20. ਐԽˠਁಁˠਐग़
    ʁ

    View Slide

  21. ਐԽˠਁಁˠਐग़

    View Slide

  22. ਐग़

    View Slide

  23. ϨΠϠʔؒΛӽڥ͢Δ
    2017೥

    View Slide

  24. ϑϩϯτΤϯυ͚ͩΛ
    ݟΔͷΛ΍ΊͯΈΔ

    View Slide

  25. 2017೥
    • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ
    • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦ
    • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ

    View Slide

  26. 2017೥
    • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ
    • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦ
    • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ

    View Slide

  27. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    ϒϥ΢βͷ΋ͷͩͬͨJavaScript

    View Slide

  28. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    Node + Express؀ڥͷαʔόʔαΠυJS
    Express
    IUUQFYQSFTTKTDPN

    View Slide

  29. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    αʔόʔαΠυJS
    Express
    IUUQTTFSWFSMFTTDPN

    View Slide

  30. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    αʔόʔαΠυJS
    Express
    IUUQTTFSWFSMFTTDPN

    View Slide

  31. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    αʔόʔϨεͱ͍͏બ୒ࢶͷ௥Ճ
    Express
    IUUQTTFSWFSMFTTDPN

    View Slide

  32. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless Framework
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  33. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless Framework
    • AWSͷߏ੒Λ؅ཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ
    υΛߏ੒Ͱ͖ΔϑϨʔϜϫʔΫ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  34. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless Framework
    • AWSͷߏ੒Λ؅ཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ
    υΛߏ੒Ͱ͖ΔϑϨʔϜϫʔΫ
    • Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰ੔ͬͨߏ੒ͷAPI
    GatewayͱLambda੡Web APIΛσϓϩΠͰ͖Δ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  35. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless Framework
    • AWSͷߏ੒Λ؅ཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ
    υΛߏ੒Ͱ͖ΔϑϨʔϜϫʔΫ
    • Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰ੔ͬͨߏ੒ͷAPI
    GatewayͱLambda੡Web APIΛσϓϩΠͰ͖Δ
    • ͍ΘΏΔʮαʔόʔαΠυJSʯͰਓؾͩͬͨʮඇಉظ͔ͭ
    ϦΞϧλΠϜͷ௨৴ʯͱ͍ͬͨ༻్ʹ͸޲͔ͳ͍͕ɺͲ͏
    ͯ͠΋ਏ͘ͳΔNodeͷαʔόʔ؅ཧͷඞཁ͕ͳ͘ɺ
    JavaScriptΛॻ͖͍ͨਓ͕ؾܰʹAPIΛ։ൃͰ͖Δ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  36. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless΁ͷظ଴
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  37. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless΁ͷظ଴
    • ϑϩϯτΤϯυΤϯδχΞͷதʹ͸ɺʮαʔόʔ؅ཧͷඞ
    ཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ΋͍Δ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  38. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless΁ͷظ଴
    • ϑϩϯτΤϯυΤϯδχΞͷதʹ͸ɺʮαʔόʔ؅ཧͷඞ
    ཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ΋͍Δ
    • ͦΕΛߟ͑Δͱɺʮαʔόʔ؅ཧͷඞཁͷͳ͍ʯ
    ʮJavaScriptόοΫΤϯυʯͱ͍͏؀ڥʹ͸େ͖ͳظ଴͕
    ࣋ͯΔ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  39. όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • Serverless΁ͷظ଴
    • ϑϩϯτΤϯυΤϯδχΞͷதʹ͸ɺʮαʔόʔ؅ཧͷඞ
    ཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ΋͍Δ
    • ͦΕΛߟ͑Δͱɺʮαʔόʔ؅ཧͷඞཁͷͳ͍ʯ
    ʮJavaScriptόοΫΤϯυʯͱ͍͏؀ڥʹ͸େ͖ͳظ଴͕
    ࣋ͯΔ
    • ͳʹΑΓɺ೔ʑਐԽ͢ΔΫϥ΢υ؀ڥʹ͓͍ͯʮશͯ
    JavaScriptͰهड़Ͱ͖Δʯͱ͍͏ϫΫϫΫײ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  40. 2017೥
    • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ
    • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦͷѻ͍
    • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ

    View Slide

  41. PWAͱϋΠϒϦουΞϓϦͷѻ͍
    • PWA
    • Progressive Web Apps
    • WebʹɺΞϓϦͷΑ͏ͳϦονͳମݧΛఏڙ͢Δ
    • ΦϑϥΠϯWeb΍ɺWorkerपΓͳͲ
    • SPAຊମ͕ɺൺֱతٕज़తͳ؍఺Ͱͷར఺͕େ͖͍΋ͷͰ
    ͋Δͷʹର͠ɺPWAࢪࡦ͸UXʹؔΘΔ໘͕େ͖͍
    • ͨͩSPAରԠ͢Δ͚ͩͰͳ͘ɺPWAରԠ͢Δ͜ͱͰɺͦͷ
    ༏ҐੑΛߋʹେ͖͍΋ͷʹͰ͖Δ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  42. PWAͱϋΠϒϦουΞϓϦͷѻ͍
    • Webࣗମʹ૿͑ΔAPI
    • Ұ࣌ظ͸HTML5 APIͷݺশ͕ଟ͔ͬͨ
    • WebʹϦον͞Λ௥Ճ͢Δ΋͏Ұͭͷཁૉ
    • ϝσΟΞσʔλͷϦΞϧλΠϜ௨৴΍BLEͳͲ͕શମͰར༻
    ՄೳͱͳΔͱ෯͕޿͕Δ
    • લड़ͷPWAʹ΋ؚ·ΕΔPush NotificationsͳͲ͸Ϣʔβʔ
    ମݧΛڧ͘ߟ͑ͳ͘ͱ΋ཉ͍͠ཁૉ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*

    View Slide

  43. PWAͱϋΠϒϦουΞϓϦͷѻ͍
    • PWAͱAPIͷ૊Έ߹Θͤͷݱ࣮
    • ϕϯμରԠͷ஗͞ʹΑΔମݧͷ્֐ʢiOSͰϓογϡ௨஌͕
    ஗Εͳ͍ͳͲʣ
    • Progressive EnhancementͰย෇͚Δʹ͸େ͖͗͢ΔϞόΠ
    ϧͷଘࡏ
    • ͱ͸͍͑σεΫτοϓ޲͚ͷ؀ڥͰ͸ΦϑϥΠϯपΓ͸׆͔
    ͠ʹ͍͘
    • σεΫτοϓ޲͚ͷϓογϡ௨஌͚ͩ͸ࣄྫ͕૿͖͑ͯͨҹ

    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ

    View Slide

  44. PWAͱϋΠϒϦουΞϓϦͷѻ͍
    • ϋΠϒϦουΞϓϦͷ࠶དྷͱ͍͏Մೳੑ
    • Cordovaͷํ͔ࣜΒมΘͬͯΏ͘τϨϯυ
    • ͜Ε·ͰͷΑ͏ͳʮWebviewͰHTML͕ಈ͔͘Βੌ͍ʯͷ
    ୤٫
    • ʮReact NativeʯͳͲͷొ৔ʹΑΔωΠςΟϒϨΠϠ΁ͷ
    ਐग़ʢݱঢ়͸UIपΓ͕ωΠςΟϒͷ΋ͷΛࢀরʣ
    • σόΠεૢ࡞͕Մೳͱ͍͏͜ͱ΋͋Γɺ౰෼ͷʮPolyfillʯ
    తधཁͷՄೳੑ
    IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF

    View Slide

  45. PWAͱϋΠϒϦουΞϓϦͷѻ͍
    • ·ͱΊ
    • PWAͱAPIͷϕϯμ໰୊ͷղܾͱͯ͠ɺ·ͨϋΠϒϦου
    ΞϓϦͷ੎ྗ͕ڧ͘ͳΔՄೳੑ͸େ͖͋͘Δͱ༧૝
    • ͜Ε·ͰϋΠϒϦουͷԼ஍͕͋Δఔ౓ଘࡏ͢Δ͜ͱ΋͋
    Γɺہॴར༻Ҏ֎ͰPWAͰ΍ͬͯ͠·͏ͷ͸೉ͦ͠͏
    • ࠓ͸ݸਓతʹ͸Vue.jsͰReact NativeͷΑ͏ͳ͜ͱ͕Ͱ͖Δ
    ʮWeexʯΛWatch͍͖͍ͯͨ͠ɻ
    • ͱ͍͏͔Vue.jsͷؾ࣋ͪʹͳͬͯॻ͖͍ͨ
    IUUQTXFFYQSPKFDUJP

    View Slide

  46. PWAͱϋΠϒϦουΞϓϦͷѻ͍
    • ·ͱΊ
    • PWAͱAPIͷϕϯμ໰୊ͷղܾͱͯ͠ɺ·ͨϋΠϒϦου
    ΞϓϦͷ੎ྗ͕ڧ͘ͳΔՄೳੑ͸େ͖͋͘Δͱ༧૝
    • ͜Ε·Ͱ͕࣮ࡍͦͷΑ͏ʹਐΜͰ͖ͨܦҢ΋͋ΓɺPWAʹ
    ͙͢ʹ੒Γ୅ΘΔ͜ͱ͸೉͍͠
    • ࠓ͸ݸਓతʹ͸Vue.jsͰReact NativeͷΑ͏ͳ͜ͱ͕Ͱ͖Δ
    ʮWeexʯΛWatch͍͖͍ͯͨ͠ɻ
    IUUQTXFFYQSPKFDUJP

    View Slide

  47. 2017೥
    • ৽ͨʹ։୓͞Εͦ͏ͳϨΠϠ
    • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript
    • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦͷѻ͍
    • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ

    View Slide

  48. Webͷݴޠ
    Grumpy
    IUUQTDQQMPWFSCMPHTQPUKQHPPHMFHPQZUIPOHSVNQZIUNM

    View Slide

  49. Webͷݴޠ
    Gopher.js

    View Slide

  50. શମΛ௨ͯ͠
    ײ͡Δ͜ͱ

    View Slide

  51. ςΫϊϩδʔͷڥք

    View Slide

  52. ςΫϊϩδʔͷڥք

    View Slide

  53. ޷͖ͳٕज़Λ
    ޷͖ͳྖҬͰ࢖͑Δະདྷ

    View Slide

  54. 2017೥

    View Slide

  55. ϨΠϠʔͷӽڥΛ
    ָ͠Ή

    View Slide

  56. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide

  57. એ఻

    View Slide

  58. IUUQLGVHKQGSPOUDPOG

    View Slide

  59. IUUQLGVHKQGSPOUDPOG
    WebGL 2.0࣌୅ͷນ։͚
    - ΢ΣϒͷάϥϑΟοΫε͸Ͳ͏มΘΔͷ͔
    ͍ΘΏΔ"ϑϩϯτΤϯυ"͕ͳ͍ੈքʹ͍ͭͯߟ͑Δ
    ೥Ͱ΋໘നͦ͏ͳηογϣϯୡ
    εϥΠυͷ౎߹্Ұ෦ͷΈܝࡌ

    flowtype ʹΑΔܕͷ͋Δੈքೖ໳
    BOENPSFʜ

    View Slide

  60. IUUQLGVHKQGSPOUDPOG

    View Slide