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.5k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.7k
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
130
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.6k
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
tool ディレクティブを導入してみた感想
sgash708
1
160
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
0
110
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
250
Laravel Boost 超入門
fire_arlo
2
170
パスタの技術
yusukebe
1
550
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
1
300
兎に角、コードレビュー
mitohato14
0
160
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Ace a Technical Interview
jacobian
279
23k
Practical Orchestrator
shlominoach
190
11k
It's Worth the Effort
3n
187
28k
Code Reviewing Like a Champion
maltzj
525
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
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ͱͳͬͨݱͰͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍