Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2017年のJavaScriptと フロントエンドの楽しみかた #jserinfo
Search
potato4d(Takuma HANATANI)
January 15, 2017
Programming
4
1.4k
2017年のJavaScriptと フロントエンドの楽しみかた #jserinfo
potato4d(Takuma HANATANI)
January 15, 2017
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
390
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
C++20 射影変換
faithandbrave
0
530
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
350
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
XP, Testing and ninja testing
m_seki
3
200
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
220
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
Why Our Code Smells
bkeepers
PRO
337
57k
4 Signs Your Business is Dying
shpigford
184
22k
Optimizing for Happiness
mojombo
379
70k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
How to Ace a Technical Interview
jacobian
277
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Producing Creativity
orderedlist
PRO
346
40k
Rails Girls Zürich Keynote
gr2m
94
14k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
ͷ+BWB4DSJQUͱ ϑϩϯτΤϯυͷָ͠Έ͔ͨ +4FSJOGP5",6.")BOBUBOJBLB1PUBUPE
ͬ͘͟ΓϓϩϑΟʔϧ • Potato4d • ݱࡏ18ࡀͷߴߍ3 • य़͔Βब৬Ͱ౦ژ • JavaScriptɺಛʹVue.jsपΓ͕ओ •
TwitterͷϋογϡλάͰ͏Δ͍͞ ਓ͕͍ͨΒࢲͰ͢
IUUQTHJUIVCDPNWVFKTKQWVFKTPSHQVMM
IUUQXXXTMJEFTIBSFOFU5BLVNB)BOBUBOJKRVFSZ
IUUQTTFSWJDFTDPVUFSDPKQ Ϣʔβʔ͕اۀͱస৬ऀΛͭͳ͙స৬ϓϥοτϑΥʔϜ PO
IUUQFNPLVBSJUBJIBUFOBCMPHKQFOUSZ
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(ओ؍) • ҙࣝ • ʮSPAʯ͕ͨΓલʹͳͬͨ • ஈʑʮϑϩϯτΤϯυʯͰͳ͍JavaScriptͷੈքʹ͍ͭͯ ड़Δਓ૿͖͑ͯͨ • ReactAngular͋ͨΓͲͪΒ͔͕͑Δਓ͕େͱͳ
Γɺ͍͠ͷͰͳ͘ͳͬͨ • ES2015ͱ͍͏సظͰ͓ͬͨ͜ʮਐԽʯ͕ɺॾʑͷ݅ ʹΑͬͯʮਁಁʯ͍ͯͬͨ͠Α͏ʹΈ͑Δ
2016 ʮਁಁʯͷҰͩͬͨ
2017Ҏ߱Λߟ͑Δ
ਐԽˠਁಁˠਐग़ ʁ
ਐԽˠਁಁˠਐग़
ਐग़
ϨΠϠʔؒΛӽڥ͢Δ 2017
ϑϩϯτΤϯυ͚ͩΛ ݟΔͷΛΊͯΈΔ
2017 • ৽ͨʹ։͞Εͦ͏ͳϨΠϠ • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦ • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
2017 • ৽ͨʹ։͞Εͦ͏ͳϨΠϠ • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦ • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript ϒϥβͷͷͩͬͨJavaScript
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript Node + ExpressڥͷαʔόʔαΠυJS Express IUUQFYQSFTTKTDPN
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript αʔόʔαΠυJS Express IUUQTTFSWFSMFTTDPN
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript αʔόʔαΠυJS Express IUUQTTFSWFSMFTTDPN
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript αʔόʔϨεͱ͍͏બࢶͷՃ Express IUUQTTFSWFSMFTTDPN
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework • AWSͷߏΛཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ υΛߏͰ͖ΔϑϨʔϜϫʔΫ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework • AWSͷߏΛཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ υΛߏͰ͖ΔϑϨʔϜϫʔΫ • Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰͬͨߏͷAPI GatewayͱLambdaWeb
APIΛσϓϩΠͰ͖Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEDPEFMBCTZPVSGJSTUQXBQQ
όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • Serverless Framework • AWSͷߏΛཧͯ͠ɺ؆୯ʹαʔόʔϨεͳόοΫΤϯ υΛߏͰ͖ΔϑϨʔϜϫʔΫ • Initͯ͠؆୯ͳDSLΛهड़͢Δ͚ͩͰͬͨߏͷAPI Gatewayͱ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
2017 • ৽ͨʹ։͞Εͦ͏ͳϨΠϠ • όοΫΤϯυͷݴޠͱͯ͠ͷJavaScript • ϑϩϯτʹ͓͚ΔPWAͱϋΠϒϦουΞϓϦͷѻ͍ • ͜Ε͔ΒWebͰར༻͞ΕΔݴޠ
Webͷݴޠ Grumpy IUUQTDQQMPWFSCMPHTQPUKQHPPHMFHPQZUIPOHSVNQZIUNM
Webͷݴޠ Gopher.js
શମΛ௨ͯ͠ ײ͡Δ͜ͱ
ςΫϊϩδʔͷڥք
ςΫϊϩδʔͷڥք
͖ͳٕज़Λ ͖ͳྖҬͰ͑Δະདྷ
2017
ϨΠϠʔͷӽڥΛ ָ͠Ή
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠
એ
IUUQLGVHKQGSPOUDPOG
IUUQLGVHKQGSPOUDPOG WebGL 2.0࣌ͷນ։͚ - ΣϒͷάϥϑΟοΫεͲ͏มΘΔͷ͔ ͍ΘΏΔ"ϑϩϯτΤϯυ"͕ͳ͍ੈքʹ͍ͭͯߟ͑Δ Ͱ໘നͦ͏ͳηογϣϯୡ εϥΠυͷ߹্Ұ෦ͷΈܝࡌ flowtype ʹΑΔܕͷ͋Δੈքೖ
BOENPSFʜ
IUUQLGVHKQGSPOUDPOG