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
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider へ...
Search
potato4d(Takuma HANATANI)
June 12, 2020
Programming
25
6.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
#remote_vue で話しました。
potato4d(Takuma HANATANI)
June 12, 2020
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
300
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.8k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.3k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.5k
Other Decks in Programming
See All in Programming
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.3k
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
640
CSC509 Lecture 04
javiergs
PRO
0
170
Going Staff - Keynote edition
pragtob
0
370
CSC305 Lecture 09
javiergs
PRO
0
120
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
200
The future of development – Are our jobs getting harder or easier?
hollycummins
1
220
Server Driven Compose With Firebase
skydoves
0
190
gopls を改造したら開発生産性が高まった
satorunooshie
7
140
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
240
GrafanaのHTTP API を眺めてみよう
rinchoku
0
520
Competitionsだけじゃない! Kaggle Notebooks Grandmasterのすすめ
corochann
2
940
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Designing Experiences People Love
moore
138
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing the Hi-DPI Web
ddemaree
280
34k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
BBQ
matthewcrist
85
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Transcript
5BLVNB)"/"5"/* !QPUBUPE SFNPUF@WVF ऴΘΓΏ͘7VFY࣌ͷঢ়ଶઃܭͷΞϯαʔ 7VFͷ1SPWJEFSͷظ
QPUBUPE 5BLVNB)"/"5"/* w -*/&גࣜձࣾγχΞϑϩϯτΤϯυΤϯδχΞ߹ಉձࣾ&MFWFO#BDLද w 7VFKTຊޠυΩϡϝϯτϝϯςφ ͠Β͘׆ಈͰ͖ͯͳ͍ w ⚙/VYUKTΦϑΟγϟϧϓϥάΠϯ!OVYUKTEBZKTཧऀ
w 6*5*/4*%&1PEDBTUFS w 7VFKTΛॻ͘ͱ͖΄ͱΜͲ/VYUKT 549Ͱॻ͍ͯ·͢ w ࣮ਃ͠ࠐΜͩ͋ͱͰPCTFSWBCMFͰؙ͔ͿΓͨ͠ͷͰٸᬎτʔΫΛม͑ͨਓ ୭ʁ
-"13"4ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ
-"13"4ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ
-"13"4ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ
6*5NFFUVQWPM ΦϯϥΠϯ ͖ͯͶ એ
ࠓ͢͜ͱ w ࢲ͕ͨͪ7VFY࣌ʹ๊͑ͨΞϓϦέʔγϣϯ։ൃͷ՝ w ࢲୡ͕7VFYΛٻΊͨཧ༝ͱݱࡏ w *OKFDUͰ࣮ݱ͢Δ7VFY࣌࠷ޙͷઃܭ w 7VFʹ͚ͯQSPWJEFJOKFDUͷظ
ࠓ͢͜ͱ w ࢲ͕ͨͪ7VFY࣌ʹ๊͑ͨΞϓϦέʔγϣϯ։ൃͷ՝ w ࢲୡ͕7VFYΛٻΊͨཧ༝ͱݱࡏ w *OKFDUͰ࣮ݱ͢Δ7VFY࣌࠷ޙͷઃܭ w 7VFʹ͚ͯQSPWJEFJOKFDUͷظ
7VFYͰͷΞϓϦέʔγϣϯ։ൃͷ՝ w 7VFYΛΘͳ͍ઃܭख๏ͷΰʔϧ w Կʹ5ZQF4DSJQUͱ૬ੑͷྑ͍ڥΛ࡞Γग़ͤΔͷ͔ w ֎෦Ϧιʔε͕ؔΘΔίʔυΛͲ͏ςετ͢Δ͔
ݸਓతͳ݁ʜʜ w *OKFDUΛ࣠ʹɺҎԼΛॏࢹ͢Δߏ w 7VFYͷґଘ࠷খͱ͑ΔɻෆཁͳΒΘͳ͍ɻ w 41"֎෦ͷґଘ͕ඞཁͳͷඞͣ*OKFDUΛ௨࣮ͯ͠ݱ͢Δ w ίϯϙʔωϯτͷϥΠϑαΠΫϧΛ࠷େݶଚॏ͠ɺώϡʔϚϯΤϥʔΛ͙ ͜ͷϙϦγʔͰҰӡ༻ͨ͠ه
ࠓ͢͜ͱ w ࢲ͕ͨͪ7VFY࣌ʹ๊͑ͨΞϓϦέʔγϣϯ։ൃͷ՝ w ࢲୡ͕7VFYΛٻΊͨཧ༝ͱݱࡏ w *OKFDUͰ࣮ݱ͢Δ7VFY࣌࠷ޙͷઃܭ w 7VFʹ͚ͯQSPWJEFJOKFDUͷظ
ࢲ͕ͨͪ7VFYʹٻΊ͍ͯͨͷଟ͗ͨ͢ w 7VFKTΦϑΟγϟϧͷ7VFYͷଘࡏʹΑΓɺର߅അ͕ډͳ͍ঢ়گͰ͋ͬͨ w ͭ·ΓϩʔΧϧεςʔτPS4UPSFҎ֎ͷબࢶΛߟྀͰ͖ͳ͍ w ͜ͷੈʹ7VFYͱ͍͏ശ͔͠ଘࡏ͠ͳ͍݁ՌɺͳΜͰಥͬࠐ·ΕΔ࣌ w ͋Δͱ͖ϩάΠϯதͷϢʔβʔใ w
͋Δͱ͖"1*ϨεϙϯεͷΩϟογϡ w ͋Δͱ͖ ϞʔμϧͳͲͷ 6*ͷϑϥάཧ5PBTUදࣔ
ࢲ͕ͨͪ7VFYʹٻΊ͍ͯͨͷଟ͗ͨ͢ w ݁Ռతʹάϩʔόϧมʹ͍ۙར༻͕ຮԆ͠ɺཻ͕ແࢹ͞ΕͨੈքͱͳΔ w ຊདྷͦΕͧΕͷ్ʹԠ͚ͯ͡Δ͖ͩͬͨ w "1*ͷΩϟογϡˠ)551ΩϟογϡPSΠϯϝϞϦʹ࣮ w ϞʔμϧͷϑϥάˠQPSUBMWVF5FMFQPSUͰάϩʔόϧεςʔτෆཁʹ w
ϩάΠϯϢʔβʔˠ7VFYͰଥͰͳ͍͔ w 7VFYΘͳ͚ΕΘͳ͍͚ͩϥΠϑαΠΫϧϑοΫʹΕͯߟ͑Δ͜ͱ͕ݮΔ w 7VFYҎ֎ΛબͰ͖ΔΑ͏ʹΛ͚Δ͖ͩͬͨ
ͱ͍͑ʜʜ
ʮετΞʯ͍͍ͨ͡ΌΜ w )551Ωϟογϡ1PSUBMͳͲͰ͋Δఔᑃ͍ͯɺʮศར͔ͩΒʯ7VFY ΘΕΔ w ڞ௨ͷݺͼग़͠ݩΛ༻ҙͯ͠ɺ෭࡞༻Λִ͍ͨ͠ TUPSF w ϦΞΫςΟϒʹෳίϯϙʔωϯτؒͰσʔλΛڞ༗Ͱ͖Δ͜ͱخ͍͠
w ϖʔδભҠͯ͠σʔλΛอ͍࣋ͨ͠
ʮετΞʯ͍͍ͨ͡ΌΜ w )551Ωϟογϡ1PSUBMͳͲͰ͋Δఔᑃ͍ͯɺʮศར͔ͩΒʯ7VFY ΘΕΔ w ڞ௨ͷݺͼग़͠ݩΛ༻ҙͯ͠ɺ෭࡞༻Λִ͍ͨ͠ TUPSF w ϦΞΫςΟϒʹෳίϯϙʔωϯτؒͰσʔλΛڞ༗Ͱ͖Δ͜ͱخ͍͠
w ϖʔδભҠͯ͠σʔλΛอ͍࣋ͨ͠ w ͨͩͦΕඞͣ͠4UPSFͱ͍͏ܗΛ͢ඞཁͳ͍ w ͦΜͳͱ͖ʹ͑Δͷ͕*OKFDU
ࠓ͢͜ͱ w ࢲ͕ͨͪ7VFY࣌ʹ๊͑ͨΞϓϦέʔγϣϯ։ൃͷ՝ w ࢲୡ͕7VFYΛٻΊͨཧ༝ͱݱࡏ w *OKFDUͰ࣮ݱ͢Δ7VFY࣌࠷ޙͷઃܭ w 7VFʹ͚ͯQSPWJEFJOKFDUͷظ
*OKFDU
8IBUT*OKFDU w /VYUKTͷ1MVHJOγεςϜʹಉࠝ͞Ε͍ͯΔɺΦϒδΣΫτೖͷػೳ w ΞϓϦέʔγϣϯͷUIJTʹੜ͑ΔґଘΛ%*Ͱ͖Δ w WVFUFTUVUJMTͰϞοΫԽͰ͖Δ͜ͱͰΫϦʔϯʹґଘΛऔΓѻ͑Δ w 5ZQF4DSJQUͷܕఆٛΛՃ͢Δ༨Λ͍ͯ͠Δ w
෦తʹ7VFͷQSPUPUZQF֦ுΛར༻͍ͯ͠Δ
*OKFDUͷಈ͖ https://github.com/nuxt/nuxt.js/blob/0337932115d4312130d266962d469620378af61c/packages/vue-app/template/index.js#L165-L200 1. key: string, value: any ΛҾͱͯ͠ड͚औΔ 2. $
ͷ prefix Λ͚ͭͯ Nuxt ͷ Context ʹೖ 3. Context ͱಉ͡ͷΛ Vue.prototype ʹೖ
͍ํ
ίʔυྫ1MVHJO src/plugins/auth.ts 1. TS ͷ߹ܕఆٛΛ import 2. observable Λར༻ͯ͠ϦΞΫςΟϒʹ 3.
this.$auth ͱͯ͠ inject
ίʔυྫܕఆٛ src/plugins/auth.ts 1. asyncData Store ͚ఆٛ 2. this.$auth ͷఆٛ
ίʔυྫ7VF$PNQPOFOU src/components/AppDialog.vue ܕఆ͕ٛͳ͘ө͞ΕΔ *OKFDUΛར༻͢Δ͜ͱͰɺඞཁ࠷খݶͷ"1*ͱґଘͰঢ়ଶ͕ཧͰ͖Δ
Կ͕خ͍͠ͷʁ
*OKFDUΛ͏͜ͱʹΑΔخ͠͞ άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ 7VFYͰऑ͍ܕఆٛͷ෦ΛΧελϜͯ͠׆༻Ͱ͖Δ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճͤΔ
*OKFDUΛ͏͜ͱʹΑΔخ͠͞ άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ w 7VFYͷ໊લۭؒͦΕͳΓʹେ͖ͳͷͱͳΓ͍͢ w ٯʹࡉ͔͘͞Εͨ7VFYͷ໊લۭ͕ؒ ͋Δίʔυݟͨ͘ͳ͍ w ར༻͢Δ߹TUBUFͷར༻ېࢭ͍ͨ͠ɺHFUUFS͚ͩʹ͍ͨ͠ͳͲߟ͑ग़͢ͱٻΊ ͍ͯͨͷ͔ΒΕͯΏ͘
w *OKFDUͰɺάϩʔόϧʹӨڹΛٴ΅͢ͷΛ࠷খݶͷ࿐ग़ͰऔΓճͤΔ w ؆୯ͳΦϯϝϞϦΩϟογϡ͚͕ͩࡌͬͨසൟʹୟ͘"1*ͷޱ͚ͩͳͲ w খ͞ͳঢ়ଶπϦʔΛෳ༻ҙ͢Δ͜ͱ3FDPJMવΓτϨϯυͰ͋Δҹ
*OKFDUΛ͏͜ͱʹΑΔخ͠͞ https://github.com/potato4d/pokemon63/blob/master/src/plugins/userRecord.ts άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ
*OKFDUΛ͏͜ͱʹΑΔخ͠͞ 7VFYͰऑ͍ܕఆٛͷ෦ΛΧελϜͯ͠׆༻Ͱ͖Δ w 7VFY7VFY4UPSFBOZͱͳ͍ͬͯΔҎ্Ͳ͏ͯ͠ܕఆ͕ٛਏ͍ w ࣍ظόʔδϣϯ͔Βվળ͞ΕΔ w $MBTT$PNQPOFOUͰղফͨ͠Γ w UIJTUZQFE4UPSFͷΑ͏ͳྖҬΛࣗͰ༻ҙ͢Δ͜ͱͰղফՄೳ͕ͩʜʜɻ
w *OKFDUͰWVFUZQFTWVFͷҰൠతͳ֦ுͷൣғͰऔΓѻ͑Δ w ϢʔβʔఆٛͰ͋Δ͜ͱมΘΓͳ͍͕
1. asyncData Store ͚ఆٛ 2. this.$auth ͷఆٛ *OKFDUΛ͏͜ͱʹΑΔخ͠͞ 7VFYͰऑ͍ܕఆٛͷ෦ΛΧελϜͯ͠׆༻Ͱ͖Δ
*OKFDUΛ͏͜ͱʹΑΔخ͠͞ w *OKFDUWVFUFTUVUJMTͱ૬ੑ͕ྑ͍ w *OKFDUʹΑͬͯUIJTʹґଘ͕ੜ͑ΔͨΊɺNPDLT͕ར༻Ͱ͖Δ w 7VFYͰ4UPSFOBNFTQBDF୯ҐͰϞοΫΛ࡞Δ͜ͱͱͳΓ͕ͪ w *OKFDUͰཻ͕ͦͦ͘͝খ͍͞ͷʹͳΔͷͰऔΓճ͍͢͠ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճ͍͢͠
*OKFDUΛར༻͢Δ͜ͱͰɺඞཁ࠷খݶͷ"1*ͱґଘͰঢ়ଶ͕ཧͰ͖Δ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճ͍͢͠ *OKFDUΛ͏͜ͱʹΑΔخ͠͞
*OKFDUΛ͏͜ͱʹΑΔخ͠͞ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճ͍͢͠
ͬͱ࣮ྫ͕Γ͍ͨਓ͚ w *OKFDUͷ༗ޮ׆༻ʹ͍ͭͯҎલهड़ͨ͠ࢿྉ w IUUQTUFDICMPHFMFWFOCBDLDPKQFOUSZ w /VYUKTͷΞʔΩςΫνϟతͳ w IUUQTUFDICMPHSPYYDPKQFOUSZ w
࠷ۙ༻ҙͨ͜͠ͷ͋ͨΓͷίʔυྫͷͨΊʹެ։͍ͯ͠ΔΞϓϦέʔγϣϯ044ίʔυ w IUUQTHJUIVCDPNQPUBUPEQPLFNPO
·ͱΊ w 7VFYͷར༻Λ࠷খݶʹ͢Δ w )551ϦΫΤετͷΩϟογϡͷͨΊʹ7VFYΛ͏ͷΛΊΔ w )551ΩϟογϡPS*OKFDUͰΦϯϝϞϦΛผ్࣮͖͢ w ϞʔμϧͷϑϥάཧͷͨΊʹ7VFYΛ͏ͷΛΊΔ w
1PSUBMͰରԠ͖͢ w ڞ௨ͷ5PBTUΛग़͢ͳͲͷศརॲཧͷͨΊʹ͏ͷΛΊΔ w *OKFDUͰ୯ମͰཧ͖͢
·ͱΊ w *OKFDUऔΓճ͕͠ྑ͘7VFYΑΓѻ͍͍͢খ͞ͳΦϒδΣΫτ w ϦΞΫςΟϒͳετΞ w 6*ʹؔ͢Δάϩʔόϧͳॲཧ w ελϒԽ͍ͨ͠ϥΠϒϥϦͷೖ w
্هʹݶΒͣ׆༂͢ΔͨΊɺ͜ΕΛ࣠ͱ͢Δ͜ͱΛਪ͢Δ
ࠓ͢͜ͱ w ࢲ͕ͨͪ7VFY࣌ʹ๊͑ͨΞϓϦέʔγϣϯ։ൃͷ՝ w ࢲୡ͕7VFYΛٻΊͨཧ༝ͱݱࡏ w *OKFDUͰ࣮ݱ͢Δ7VFY࣌࠷ޙͷઃܭ w 7VFʹ͚ͯQSPWJEFJOKFDUͷظ
2/VYUKTͰͳ͍ͱ͍͚ͳ͍ͷʁ
1SPUPUZQF֦ுQSPWJEFJOKFDU7VFYࣗମʹ͕͋ͬͨʜʜ https://jp.vuejs.org/v2/api/#provide-inject
1SPUPUZQF֦ுQSPWJEFJOKFDU7VFYࣗମʹ͕͋ͬͨʜʜ https://jp.vuejs.org/v2/api/#provide-inject
1SPUPUZQF֦ுQSPWJEFJOKFDU7VFYࣗମʹ͕͋ͬͨʜʜ 7VFYͰ ݶఆతͳར༻Λਪ https://jp.vuejs.org/v2/api/#provide-inject
7VF͔ΒΞΫηε͘͢͠ͳΓɺ $PNQPTJUPO"1*ͱ߹ΘͤͯΘΕΔػձ૿͑Δͱ༧Ͱ͖Δ
͓ΘΓʹ w 7VFYͰɺΞϓϦέʔγϣϯΛΫϦʔϯʹهड़͢Δखஈ͕ఏڙ͞Ε͍ͯͨ w ͔͠͠Ϣʔβʔଆ͕৽نػೳΛ༗ޮ׆༻͖͠Εͳ͔ͬͨͱೝ͍ࣝͯ͠Δ w ୯७ʹ׳ΕͷͰըҰతͳه๏͕تΕΔݱ͕ଟ͔ͬͨ͜ͱҰҼͰ͋Δ w ࠓશһ͕՝ײΛ͔ͭΊΔ࣌ʹདྷͨͷͰɺࠓͦ͜ΑΓߟ࣮͑ͯͰ͖Δ w
7VFͰɺͦ͏͍ͬͨ7VFͷ"1*ΛΑΓ͏·͘׆༻Ͱ͖Δ w 1SPWJEF*OKFDUݩ͔Β͋ͬͨɻ͍ͬͯͨͷ1SPUPUZQFͰ͋Δ͕ɻ
͓ΘΓʹ w ΑΓઓུతͳػೳʹΛ͚Α͏ w $PNQPTJUJPO"1*৽͍͕͠ɺͦͷଞઃܭʹؔΘΔ෦ɺ͜Ε·ͰαʔυύʔςΟʹ པ͍ͬͯͨ5FMFQPSUͳͲɺݟ௨͠ΛΑ͘Ͱ͖ΔΈͨ͘͞Μ͋Δ w 7VFΛཧ༝ʹઃܭΛαϘΔݴ͍༁͕Ͱ͖ͳ͍͕࣌དྷ͍ͯΔ w 5ZQF4DSJQUͷܕαϙʔτ͕ʜʜ
w 4'$ͷύʔεͷ߹͕ʜʜ w ͯ͢ͷίʔυ͕7VFOBUJWFͱͳͬͨݱͰͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍