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
400
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.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.7k
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
270
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Hack Claude Code with Claude Code
choplin
8
2.7k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
190
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.1k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
170
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
150
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.8k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
580
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
270
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
200
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
480
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Code Reviewing Like a Champion
maltzj
524
40k
Faster Mobile Websites
deanohume
308
31k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building Applications with DynamoDB
mza
95
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Cult of Friendly URLs
andyhume
79
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Agile that works and the tools we love
rasmusluckow
329
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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ͱͳͬͨݱͰͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍