ͷ+BWB4DSJQUͱϑϩϯτΤϯυͷָ͠Έ͔ͨ+4FSJOGP5",6.")BOBUBOJBLB1PUBUPE
View Slide
ͬ͘͟ΓϓϩϑΟʔϧ• Potato4d• ݱࡏ18ࡀͷߴߍ3• य़͔Βब৬Ͱ౦ژ• JavaScriptɺಛʹVue.jsपΓ͕ओ• TwitterͷϋογϡλάͰ͏Δ͍͞ਓ͕͍ͨΒࢲͰ͢
IUUQTHJUIVCDPNWVFKTKQWVFKTPSHQVMM
IUUQXXXTMJEFTIBSFOFU5BLVNB)BOBUBOJKRVFSZ
IUUQTTFSWJDFTDPVUFSDPKQϢʔβʔ͕اۀͱస৬ऀΛͭͳ͙స৬ϓϥοτϑΥʔϜPO
IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ
ࡢͷมԽΛݟͯΈΔ
͍͍ͩͨϑϩϯτΤϯυ
2016(ओ؍)• ESपΓ• 2015 -> 2016:• async/awaitपΓ͕Γ্͕ͬͨ• ΈΜͳbabeͬͯΔͷͰ͏औΓࠐ·ΕΔ͔Ͳ͏͔͔͠ؾʹͯ͠ͳͦ͞͏• ରԠͷ໘ͰSafari͕ES2015ԽͰฒΈ͕ἧͬͨ• API(Web ~)• Apple(Mobile Safari)ͷΕ͕ܹ͍͠ͷͰͦΕ࣍ୈ͔
2016(ओ؍)• ܕ• TS -> TS, FlowType:• FlowType͕ग़͖͚ͯͨͲ͋Μ·Γ࠾༻ࣄྫΒͳ͍• ݸਓతʹܕγεςϜ͕ཉ͍͠λΠϓͰͳ͍• ʹͬͯͳ͍ͷͰ͋Μ·ΓΒͳ͍
2016(ओ؍)• ύοέʔδཧ• npm -> yarn:• ӡ༻๏npmͱͳΜΒมΘΒͳ͍ͷͰಛʹԿͳ͍• Ϗϧυπʔϧ• webpack:• ௨ͰมԽͳ͠(v2पΓͷ͕ग़ͨ͘Β͍)
2016(ओ؍)• ϑϨʔϜϫʔΫ• React, Angular, Vue:• Angular͕2ʹͳͬͨΓVue͕γΣΞ͕૿͑ͨΓͨ͠• ઃܭύλʔϯपΓ• Flux, Redux -> Redux:• Flux࣮पΓ͕શ෦ReduxͰ౷Ұ͞Ε͚ͨͲ৽ग़ͳ͠• ݸਓతʹφγΛਪ͍ͨ͠
2016(ओ؍)• ͦͷଞ• ʮΞϓϦฒͷମݧΛWebͰʯͷະͩେ͖͍ͷͷɺ࣮ݱԕ͍༷ࢠ• ʮwasm͕͘Δʯൊ͕ऴ൫૿͑ͨҹ• ݸਓతʹʮߴ͔ͭߴͳάϥϑΟοΫඳըʯͷϨΠϠʔͰར༻ͱͳΔͱݟ͍ͯΔ• ʮ͖ͨʯͱ͍͏গͣͭ͠ฉ͘Α͏ʹ
2016(ओ؍)• શମ• ࠷ۙྑ͘ʹͳΔʮϑϩϯτΤϯυྲྀΕ͕ʰ͍ʱͷ͔ʰ͘ͳ͍ʱͷ͔ʯٞ2016͕มԽʹ͔ͬͨ͜͠ͱ͕ཁҼʹΈ͑Δ• ͕ࣗϑϩϯτΤϯυΛӔதʹೖΒͣʹ֎͔Βগ͚ͩ͠৮Γͳ͕Βݟͯͨ2015ͱग़ͯ͘Δݻ༗໊ࢺʹҧ͍͕ͳ͔ͬͨͷͰΓ͍͢ҰͰ͋ͬͨ• ࡢݻఆԽ͞Εٕͨज़ελοΫͷτʔΫ͕૿͑ͨͷಉ͡ߟ͑ͷਓ͕ࢁ͍ͨ͜ͱʹΑΓͦ͏
2016(ओ؍)• ҙࣝ• ʮSPAʯ͕ͨΓલʹͳͬͨ• ஈʑʮϑϩϯτΤϯυʯͰͳ͍JavaScriptͷੈքʹ͍ͭͯड़Δਓ૿͖͑ͯͨ• ReactAngular͋ͨΓͲͪΒ͔͕͑Δਓ͕େͱͳΓɺ͍͠ͷͰͳ͘ͳͬͨ• ES2015ͱ͍͏సظͰ͓ͬͨ͜ʮਐԽʯ͕ɺॾʑͷ݅ʹΑͬͯʮਁಁʯ͍ͯͬͨ͠Α͏ʹΈ͑Δ
2016ʮਁಁʯͷҰͩͬͨ
2017Ҏ߱Λߟ͑Δ
ਐԽˠਁಁˠਐग़ʁ
ਐԽˠਁಁˠਐग़
ਐग़
ϨΠϠʔؒΛӽڥ͢Δ2017
ϑϩϯτΤϯυ͚ͩΛݟΔͷΛΊͯΈΔ
2017• ৽ͨʹ։͞Εͦ͏ͳϨΠϠ• όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦ• ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScriptϒϥβͷͷͩͬͨJavaScript
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScriptNode + ExpressڥͷαʔόʔαΠυJSExpressIUUQFYQSFTTKTDPN
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScriptαʔόʔαΠυJSExpressIUUQTTFSWFSMFTTDPN
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScriptαʔόʔϨεͱ͍͏બࢶͷՃExpressIUUQTTFSWFSMFTTDPN
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• Serverless FrameworkIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• Serverless Framework• AWSͷߏΛཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯυΛߏͰ͖ΔϑϨʔϜϫʔΫIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• Serverless Framework• AWSͷߏΛཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯυΛߏͰ͖ΔϑϨʔϜϫʔΫ• Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰͬͨߏͷAPIGatewayͱLambdaWeb APIΛσϓϩΠͰ͖ΔIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• Serverless Framework• AWSͷߏΛཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯυΛߏͰ͖ΔϑϨʔϜϫʔΫ• Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰͬͨߏͷAPIGatewayͱLambdaWeb APIΛσϓϩΠͰ͖Δ• ͍ΘΏΔʮαʔόʔαΠυJSʯͰਓؾͩͬͨʮඇಉظ͔ͭϦΞϧλΠϜͷ௨৴ʯͱ͍ͬͨ༻్ʹ͔ͳ͍͕ɺͲ͏ͯ͠ਏ͘ͳΔNodeͷαʔόʔཧͷඞཁ͕ͳ͘ɺJavaScriptΛॻ͖͍ͨਓ͕ؾܰʹAPIΛ։ൃͰ͖ΔIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• ServerlessͷظIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• Serverlessͷظ• ϑϩϯτΤϯυΤϯδχΞͷதʹɺʮαʔόʔཧͷඞཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ͍ΔIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• Serverlessͷظ• ϑϩϯτΤϯυΤϯδχΞͷதʹɺʮαʔόʔཧͷඞཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ͍Δ• ͦΕΛߟ͑Δͱɺʮαʔόʔཧͷඞཁͷͳ͍ʯʮJavaScriptόοΫΤϯυʯͱ͍͏ڥʹେ͖ͳظ͕࣋ͯΔIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• Serverlessͷظ• ϑϩϯτΤϯυΤϯδχΞͷதʹɺʮαʔόʔཧͷඞཁੑͷബ͞ʯΛϑϩϯτΤϯυͷັྗʹ͋͛Δਓ͍Δ• ͦΕΛߟ͑Δͱɺʮαʔόʔཧͷඞཁͷͳ͍ʯʮJavaScriptόοΫΤϯυʯͱ͍͏ڥʹେ͖ͳظ͕࣋ͯΔ• ͳʹΑΓɺʑਐԽ͢ΔΫϥυڥʹ͓͍ͯʮશͯJavaScriptͰهड़Ͱ͖Δʯͱ͍͏ϫΫϫΫײIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
2017• ৽ͨʹ։͞Εͦ͏ͳϨΠϠ• όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript• ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦͷѻ͍• ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
PWAͱϋΠϒϦουΞϓϦͷѻ͍• PWA• Progressive Web Apps• WebʹɺΞϓϦͷΑ͏ͳϦονͳମݧΛఏڙ͢Δ• ΦϑϥΠϯWebɺWorkerपΓͳͲ• SPAຊମ͕ɺൺֱతٕज़తͳ؍Ͱͷར͕େ͖͍ͷͰ͋Δͷʹର͠ɺPWAࢪࡦUXʹؔΘΔ໘͕େ͖͍• ͨͩSPAରԠ͢Δ͚ͩͰͳ͘ɺPWAରԠ͢Δ͜ͱͰɺͦͷ༏ҐੑΛߋʹେ͖͍ͷʹͰ͖ΔIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
PWAͱϋΠϒϦουΞϓϦͷѻ͍• Webࣗମʹ૿͑ΔAPI• Ұ࣌ظHTML5 APIͷݺশ͕ଟ͔ͬͨ• WebʹϦον͞ΛՃ͢Δ͏Ұͭͷཁૉ• ϝσΟΞσʔλͷϦΞϧλΠϜ௨৴BLEͳͲ͕શମͰར༻ՄೳͱͳΔͱ෯͕͕Δ• લड़ͷPWAʹؚ·ΕΔPush NotificationsͳͲϢʔβʔମݧΛڧ͘ߟ͑ͳ͘ͱཉ͍͠ཁૉIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*
PWAͱϋΠϒϦουΞϓϦͷѻ͍• PWAͱAPIͷΈ߹Θͤͷݱ࣮• ϕϯμରԠͷ͞ʹΑΔମݧͷ્ʢiOSͰϓογϡ௨͕Εͳ͍ͳͲʣ• Progressive EnhancementͰย͚Δʹେ͖͗͢ΔϞόΠϧͷଘࡏ• ͱ͍͑σεΫτοϓ͚ͷڥͰΦϑϥΠϯपΓ׆͔͠ʹ͍͘• σεΫτοϓ͚ͷϓογϡ௨͚ͩࣄྫ͕૿͖͑ͯͨҹIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
PWAͱϋΠϒϦουΞϓϦͷѻ͍• ϋΠϒϦουΞϓϦͷ࠶དྷͱ͍͏Մೳੑ• Cordovaͷํ͔ࣜΒมΘͬͯΏ͘τϨϯυ• ͜Ε·ͰͷΑ͏ͳʮWebviewͰHTML͕ಈ͔͘Βੌ͍ʯͷ٫• ʮReact NativeʯͳͲͷొʹΑΔωΠςΟϒϨΠϠͷਐग़ʢݱঢ়UIपΓ͕ωΠςΟϒͷͷΛࢀরʣ• σόΠεૢ࡞͕Մೳͱ͍͏͜ͱ͋ΓɺͷʮPolyfillʯతधཁͷՄೳੑIUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
PWAͱϋΠϒϦουΞϓϦͷѻ͍• ·ͱΊ• PWAͱAPIͷϕϯμͷղܾͱͯ͠ɺ·ͨϋΠϒϦουΞϓϦͷྗ͕ڧ͘ͳΔՄೳੑେ͖͋͘Δͱ༧• ͜Ε·ͰϋΠϒϦουͷԼ͕͋Δఔଘࡏ͢Δ͜ͱ͋Γɺہॴར༻Ҏ֎ͰPWAͰͬͯ͠·͏ͷͦ͠͏• ࠓݸਓతʹVue.jsͰReact NativeͷΑ͏ͳ͜ͱ͕Ͱ͖ΔʮWeexʯΛWatch͍͖͍ͯͨ͠ɻ• ͱ͍͏͔Vue.jsͷؾ࣋ͪʹͳͬͯॻ͖͍ͨIUUQTXFFYQSPKFDUJP
PWAͱϋΠϒϦουΞϓϦͷѻ͍• ·ͱΊ• PWAͱAPIͷϕϯμͷղܾͱͯ͠ɺ·ͨϋΠϒϦουΞϓϦͷྗ͕ڧ͘ͳΔՄೳੑେ͖͋͘Δͱ༧• ͜Ε·Ͱ͕࣮ࡍͦͷΑ͏ʹਐΜͰ͖ͨܦҢ͋ΓɺPWAʹ͙͢ʹΓΘΔ͜ͱ͍͠• ࠓݸਓతʹVue.jsͰReact NativeͷΑ͏ͳ͜ͱ͕Ͱ͖ΔʮWeexʯΛWatch͍͖͍ͯͨ͠ɻIUUQTXFFYQSPKFDUJP
WebͷݴޠGrumpyIUUQTDQQMPWFSCMPHTQPUKQHPPHMFHPQZUIPOHSVNQZIUNM
WebͷݴޠGopher.js
શମΛ௨ͯ͠ײ͡Δ͜ͱ
ςΫϊϩδʔͷڥք
͖ͳٕज़Λ͖ͳྖҬͰ͑Δະདྷ
2017
ϨΠϠʔͷӽڥΛָ͠Ή
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
એ
IUUQLGVHKQGSPOUDPOG
IUUQLGVHKQGSPOUDPOGWebGL 2.0࣌ͷນ։͚- ΣϒͷάϥϑΟοΫεͲ͏มΘΔͷ͔͍ΘΏΔ"ϑϩϯτΤϯυ"͕ͳ͍ੈքʹ͍ͭͯߟ͑ΔͰ໘നͦ͏ͳηογϣϯୡεϥΠυͷ߹্Ұ෦ͷΈܝࡌflowtype ʹΑΔܕͷ͋ΔੈքೖBOENPSFʜ
potato4d
track3jyo
speed1313
usualoma
kentaroutakeda
ryunen344
mrstsgk
meihei3
keitaro1020
yuya4
okashoi
gpsnmeajp
koluku
aarron
mthomps
shpigford
productmarketing
chrisshort
davidbonilla
eileencodes
jakevdp
lara
skipperchong
sachag
mza