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.9k
終わりゆく 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
370
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
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
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.6k
Other Decks in Programming
See All in Programming
ニーリーQAのこれまでとこれから
nealle
2
770
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
0
180
Cursor/Devin全社導入の理想と現実
saitoryc
29
22k
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.9k
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
120
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
8
3.3k
Thank you <💅>, What's the Next?
ahoxa
1
600
Embracing Ruby magic
vinistock
2
220
Laravel × Clean Architecture
bumptakayuki
PRO
0
150
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.2k
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
110
Vibe Coding の話をしよう
schroneko
14
3.8k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Into the Great Unknown - MozCon
thekraken
38
1.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Building an army of robots
kneath
305
45k
Embracing the Ebb and Flow
colly
85
4.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
GraphQLとの向き合い方2022年版
quramy
46
14k
The World Runs on Bad Software
bkeepers
PRO
68
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
Build your cross-platform service in a week with App Engine
jlugia
230
18k
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ͱͳͬͨݱͰͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍