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
7k
終わりゆく 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
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
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
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.7k
Other Decks in Programming
See All in Programming
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
760
RDoc meets YARD
okuramasafumi
4
170
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
230
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
180
概念モデル→論理モデルで気をつけていること
sunnyone
2
250
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
180
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
Kiroで始めるAI-DLC
kaonash
2
600
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
What's in a price? How to price your products and services
michaelherold
246
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Music & Morning Musume
bryan
46
6.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Facilitating Awesome Meetings
lara
55
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
RailsConf 2023
tenderlove
30
1.2k
A designer walks into a library…
pauljervisheath
207
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
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ͱͳͬͨݱͰͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍