終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x

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ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ

6*5NFFUVQWPM ΦϯϥΠϯ ͖ͯͶ એ఻

ࠓ೔࿩͢͜ͱ w ࢲ͕ͨͪ7VFY࣌୅ʹ๊͑ͨΞϓϦέʔγϣϯ։ൃͷ՝୊ w ࢲୡ͕7VFYΛٻΊͨཧ༝ͱݱࡏ w *OKFDUͰ࣮ݱ͢Δ7VFY࣌୅࠷ޙͷઃܭ࿦ w 7VFʹ޲͚ͯQSPWJEFJOKFDU΁ͷظ଴

7VFYͰͷΞϓϦέʔγϣϯ։ൃͷ՝୊ w 7VFYΛ࢖Θͳ͍ઃܭख๏ͷΰʔϧ w ೗Կʹ5ZQF4DSJQUͱ૬ੑͷྑ͍؀ڥΛ࡞Γग़ͤΔͷ͔ w ֎෦Ϧιʔε͕ؔΘΔίʔυΛͲ͏ςετ͢Δ͔

ݸਓతͳ݁࿦ʜʜ w *OKFDUΛ࣠ʹɺҎԼΛॏࢹ͢Δߏ੒ w 7VFY΁ͷґଘ͸࠷খ΁ͱ཈͑ΔɻෆཁͳΒ࢖Θͳ͍ɻ w 41"֎෦΁ͷґଘ͕ඞཁͳ΋ͷ͸ඞͣ*OKFDUΛ௨࣮ͯ͠ݱ͢Δ w ίϯϙʔωϯτͷϥΠϑαΠΫϧΛ࠷େݶଚॏ͠ɺώϡʔϚϯΤϥʔΛ๷͙ ͜ͷϙϦγʔͰҰ೥൒ӡ༻ͨ͠ه࿥

ࢲ͕ͨͪ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

*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 7VFY͸7VFY4UPSFBOZͱͳ͍ͬͯΔҎ্Ͳ͏ͯ͠΋ܕఆ͕ٛਏ͍ w ࣍ظόʔδϣϯ͔Βվળ͞ΕΔ w $MBTT$PNQPOFOUͰղফͨ͠Γ w UIJTUZQFE4UPSFͷΑ͏ͳྖҬΛࣗ෼Ͱ༻ҙ͢Δ͜ͱͰղফ͸Մೳ͕ͩʜʜɻ
w *OKFDUͰ͸WVFUZQFTWVFͷҰൠతͳ֦ுͷൣғͰऔΓѻ͑Δ w ϢʔβʔఆٛͰ͋Δ͜ͱ͸มΘΓͳ͍͕

1. asyncData ΍ Store ޲͚ఆٛ 2. this.$auth ͷఆٛ *OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ 7VFYͰ͸ऑ͍ܕఆٛͷ෦෼ΛΧελϜͯ͠׆༻Ͱ͖Δ

*OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ w *OKFDU͸WVFUFTUVUJMTͱ૬ੑ͕ྑ͍ w *OKFDUʹΑͬͯUIJTʹґଘ͕ੜ͑ΔͨΊɺNPDLT͕ར༻Ͱ͖Δ w 7VFYͰ͸4UPSF΍OBNFTQBDF୯ҐͰϞοΫΛ࡞Δ͜ͱͱͳΓ͕ͪ 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
্هʹݶΒͣ׆༂͢ΔͨΊɺ͜ΕΛ࣠ͱ͢Δ͜ͱΛਪ঑͢Δ

2/VYUKTͰͳ͍ͱ͍͚ͳ͍ͷʁ

1SPUPUZQF֦ு΍QSPWJEFJOKFDU͸7VFYࣗମʹ΋͕͋ͬͨʜʜ https://jp.vuejs.org/v2/api/#provide-inject

1SPUPUZQF֦ு΍QSPWJEFJOKFDU͸7VFYࣗମʹ΋͕͋ͬͨʜʜ 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ͱͳͬͨݱ৔Ͱͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍

終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider へ...

終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x

More Decks by potato4d(Takuma HANATANI)

Other Decks in Programming

Featured

Transcript