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
410
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
7k
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.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
CSC305 Lecture 02
javiergs
PRO
1
260
dynamic!
moro
9
6.5k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
実践AIチャットボットUI実装入門
syumai
7
2.5k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
590
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Rails Girls Zürich Keynote
gr2m
95
14k
Fireside Chat
paigeccino
40
3.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
For a Future-Friendly Web
brad_frost
180
9.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
What's in a price? How to price your products and services
michaelherold
246
12k
Typedesign – Prime Four
hannesfritz
42
2.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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