Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

IUUQTHJUIVCDPNWVFKTKQWVFKTPSHQVMM

Slide 4

Slide 4 text

IUUQXXXTMJEFTIBSFOFU5BLVNB)BOBUBOJKRVFSZ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ

Slide 7

Slide 7 text

IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ

Slide 8

Slide 8 text

ࡢ೥ͷมԽΛݟͯΈΔ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

2017೥Ҏ߱Λߟ͑Δ

Slide 20

Slide 20 text

ਐԽˠਁಁˠਐग़ ʁ

Slide 21

Slide 21 text

ਐԽˠਁಁˠਐग़

Slide 22

Slide 22 text

ਐग़

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Webͷݴޠ Grumpy IUUQTDQQMPWFSCMPHTQPUKQHPPHMFHPQZUIPOHSVNQZIUNM

Slide 49

Slide 49 text

Webͷݴޠ Gopher.js

Slide 50

Slide 50 text

શମΛ௨ͯ͠ ײ͡Δ͜ͱ

Slide 51

Slide 51 text

ςΫϊϩδʔͷڥք

Slide 52

Slide 52 text

ςΫϊϩδʔͷڥք

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

2017೥

Slide 55

Slide 55 text

ϨΠϠʔͷӽڥΛ ָ͠Ή

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

એ఻

Slide 58

Slide 58 text

IUUQLGVHKQGSPOUDPOG

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

IUUQLGVHKQGSPOUDPOG