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.3k
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
230
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.8k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.7k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.1k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.5k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.7k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.2k
Other Decks in Programming
See All in Programming
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Terraformテスト入門
msato
0
540
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
CSC307 Lecture 05
javiergs
PRO
0
210
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
英語
s_shimotori
1
220
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
生成AIをkintoneに連携してみた
hideg
0
230
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
139
22k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
BBQ
matthewcrist
82
9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Embracing the Ebb and Flow
colly
81
4.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Facilitating Awesome Meetings
lara
46
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
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