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
エンジニア向け採用ピッチ資料
inusan
0
160
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
560
エラーって何種類あるの?
kajitack
5
310
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
280
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
570
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
470
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
ニーリーにおけるプロダクトエンジニア
nealle
0
580
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
A better future with KSS
kneath
239
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Rails Girls Zürich Keynote
gr2m
94
14k
Statistics for Hackers
jakevdp
799
220k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
KATA
mclloyd
29
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Automating Front-end Workflow
addyosmani
1370
200k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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