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

Slide 1

Slide 1 text

5BLVNB)"/"5"/* !QPUBUPE SFNPUF@WVF ऴΘΓΏ͘7VFY࣌୅ͷঢ়ଶઃܭͷΞϯαʔ 7VFͷ1SPWJEFS΁ͷظ଴

Slide 2

Slide 2 text

QPUBUPE 5BLVNB)"/"5"/* w -*/&גࣜձࣾγχΞϑϩϯτΤϯυΤϯδχΞ߹ಉձࣾ&MFWFO#BDL୅ද w 7VFKT೔ຊޠυΩϡϝϯτϝϯςφ ͠͹Β͘׆ಈͰ͖ͯͳ͍ w ⚙/VYUKTΦϑΟγϟϧϓϥάΠϯ!OVYUKTEBZKT؅ཧऀ w 6*5*/4*%&1PEDBTUFS w 7VFKTΛॻ͘ͱ͖͸΄ͱΜͲ/VYUKT549Ͱॻ͍ͯ·͢ w ࣮͸ਃ͠ࠐΜͩ͋ͱͰPCTFSWBCMFͰؙ͔ͿΓͨ͠ͷͰٸᬎτʔΫΛม͑ͨਓ ୭ʁ

Slide 3

Slide 3 text

-"13"4ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ

Slide 4

Slide 4 text

-"13"4ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ

Slide 5

Slide 5 text

-"13"4ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ࢲ͕ͨͪ7VFYʹٻΊ͍ͯͨ΋ͷ͸ଟ͗ͨ͢ w 7VFKT͸ΦϑΟγϟϧͷ7VFYͷଘࡏʹΑΓɺର߅അ͕ډͳ͍ঢ়گͰ͋ͬͨ w ͭ·Γ͸ϩʔΧϧεςʔτPS4UPSFҎ֎ͷબ୒ࢶΛߟྀͰ͖ͳ͍ w ͜ͷੈʹ7VFYͱ͍͏ശ͔͠ଘࡏ͠ͳ͍݁ՌɺͳΜͰ΋ಥͬࠐ·ΕΔ࣌୅ w ͋Δͱ͖͸ϩάΠϯதͷϢʔβʔ৘ใ w ͋Δͱ͖͸"1*ϨεϙϯεͷΩϟογϡ w ͋Δͱ͖͸ ϞʔμϧͳͲͷ 6*ͷϑϥά؅ཧ΍5PBTUදࣔ

Slide 13

Slide 13 text

ࢲ͕ͨͪ7VFYʹٻΊ͍ͯͨ΋ͷ͸ଟ͗ͨ͢ w ݁Ռతʹάϩʔόϧม਺ʹ͍ۙར༻͕ຮԆ͠ɺཻ౓͕ແࢹ͞ΕͨੈքͱͳΔ w ຊདྷ͸ͦΕͧΕͷ࢖్ʹԠͯ͡෼͚Δ΂͖ͩͬͨ w "1*ͷΩϟογϡˠ)551ΩϟογϡPSΠϯϝϞϦʹ࣮૷ w ϞʔμϧͷϑϥάˠQPSUBMWVF5FMFQPSUͰάϩʔόϧεςʔτෆཁʹ w ϩάΠϯϢʔβʔˠ7VFYͰ΋ଥ౰Ͱ͸ͳ͍͔ w 7VFY͸࢖Θͳ͚Ε͹࢖Θͳ͍͚ͩϥΠϑαΠΫϧϑοΫʹ৐Εͯߟ͑Δ͜ͱ͕ݮΔ w 7VFYҎ֎Λબ୒Ͱ͖ΔΑ͏ʹ໨Λ޲͚Δ΂͖ͩͬͨ

Slide 14

Slide 14 text

ͱ͸͍͑ʜʜ

Slide 15

Slide 15 text

ʮετΞʯ࢖͍͍ͨ͡ΌΜ w )551Ωϟογϡ΍1PSUBMͳͲͰ͋Δఔ౓ᑃ͍ͯ΋ɺʮศར͔ͩΒʯ7VFY ͸࢖ΘΕΔ w ڞ௨ͷݺͼग़͠ݩΛ༻ҙͯ͠ɺ෭࡞༻Λִ཭͍ͨ͠ TUPSF w ϦΞΫςΟϒʹෳ਺ίϯϙʔωϯτؒͰσʔλΛڞ༗Ͱ͖Δ͜ͱ͸خ͍͠ w ϖʔδભҠͯ͠΋σʔλΛอ͍࣋ͨ͠

Slide 16

Slide 16 text

ʮετΞʯ࢖͍͍ͨ͡ΌΜ w )551Ωϟογϡ΍1PSUBMͳͲͰ͋Δఔ౓ᑃ͍ͯ΋ɺʮศར͔ͩΒʯ7VFY͸࢖ ΘΕΔ w ڞ௨ͷݺͼग़͠ݩΛ༻ҙͯ͠ɺ෭࡞༻Λִ཭͍ͨ͠ TUPSF w ϦΞΫςΟϒʹෳ਺ίϯϙʔωϯτؒͰσʔλΛڞ༗Ͱ͖Δ͜ͱ͸خ͍͠ w ϖʔδભҠͯ͠΋σʔλΛอ͍࣋ͨ͠ w ͨͩͦΕ͸ඞͣ͠΋4UPSFͱ͍͏ܗΛ੒͢ඞཁ͸ͳ͍ w ͦΜͳͱ͖ʹ࢖͑Δͷ͕*OKFDU

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

*OKFDU

Slide 19

Slide 19 text

8IBUT*OKFDU w /VYUKTͷ1MVHJOγεςϜʹಉࠝ͞Ε͍ͯΔɺΦϒδΣΫτ஫ೖͷػೳ w ΞϓϦέʔγϣϯͷUIJTʹੜ͑ΔґଘΛ%*Ͱ͖Δ w WVFUFTUVUJMTͰϞοΫԽͰ͖Δ͜ͱͰΫϦʔϯʹґଘΛऔΓѻ͑Δ w 5ZQF4DSJQUͷܕఆٛΛ௥Ճ͢Δ༨஍Λ࢒͍ͯ͠Δ w ಺෦తʹ͸7VFͷQSPUPUZQF֦ுΛར༻͍ͯ͠Δ

Slide 20

Slide 20 text

*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 ʹ୅ೖ

Slide 21

Slide 21 text

࢖͍ํ

Slide 22

Slide 22 text

ίʔυྫ1MVHJO src/plugins/auth.ts 1. TS ͷ৔߹͸ܕఆٛΛ import 2. observable Λར༻ͯ͠ϦΞΫςΟϒʹ 3. this.$auth ͱͯ͠ inject

Slide 23

Slide 23 text

ίʔυྫܕఆٛ src/plugins/auth.ts 1. asyncData ΍ Store ޲͚ఆٛ 2. this.$auth ͷఆٛ

Slide 24

Slide 24 text

ίʔυྫ7VF$PNQPOFOU src/components/AppDialog.vue ܕఆ͕ٛ໰୊ͳ͘൓ө͞ΕΔ *OKFDUΛར༻͢Δ͜ͱͰɺඞཁ࠷খݶͷ"1*ͱґଘͰঢ়ଶ͕؅ཧͰ͖Δ

Slide 25

Slide 25 text

Կ͕خ͍͠ͷʁ

Slide 26

Slide 26 text

*OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ 7VFYͰ͸ऑ͍ܕఆٛͷ෦෼ΛΧελϜͯ͠׆༻Ͱ͖Δ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճͤΔ

Slide 27

Slide 27 text

*OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ w 7VFYͷ໊લۭؒ͸ͦΕͳΓʹେ͖ͳ΋ͷͱͳΓ΍͍͢ w ٯʹࡉ͔͘෼཭͞Εͨ7VFYͷ໊લۭ͕ؒ ͋Δίʔυ͸ݟͨ͘ͳ͍ w ར༻͢Δ৔߹΋TUBUFͷར༻͸ېࢭ͍ͨ͠ɺHFUUFS͚ͩʹ͍ͨ͠ͳͲߟ͑ग़͢ͱٻΊ ͍ͯͨ΋ͷ͔Β཭ΕͯΏ͘ w *OKFDUͰ͸ɺάϩʔόϧʹӨڹΛٴ΅͢΋ͷΛ࠷খݶͷ࿐ग़ͰऔΓճͤΔ w ؆୯ͳΦϯϝϞϦΩϟογϡ͚͕ͩࡌͬͨසൟʹୟ͘"1*ͷޱ͚ͩͳͲ w খ͞ͳঢ়ଶπϦʔΛෳ਺༻ҙ͢Δ͜ͱ͸3FDPJMવΓτϨϯυͰ΋͋Δҹ৅

Slide 28

Slide 28 text

*OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ https://github.com/potato4d/pokemon63/blob/master/src/plugins/userRecord.ts άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

*OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ w *OKFDU͸WVFUFTUVUJMTͱ૬ੑ͕ྑ͍ w *OKFDUʹΑͬͯUIJTʹґଘ͕ੜ͑ΔͨΊɺNPDLT͕ར༻Ͱ͖Δ w 7VFYͰ͸4UPSF΍OBNFTQBDF୯ҐͰϞοΫΛ࡞Δ͜ͱͱͳΓ͕ͪ w *OKFDUͰ͸ͦ΋ͦ΋ཻ౓͕͘͝খ͍͞΋ͷʹͳΔͷͰऔΓճ͠΍͍͢ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճ͠΍͍͢

Slide 32

Slide 32 text

*OKFDUΛར༻͢Δ͜ͱͰɺඞཁ࠷খݶͷ"1*ͱґଘͰঢ়ଶ͕؅ཧͰ͖Δ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճ͠΍͍͢ *OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞

Slide 33

Slide 33 text

*OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ ίϯϙʔωϯτΛΫϦʔϯ͔ͭςελϒϧʹऔΓճ͠΍͍͢

Slide 34

Slide 34 text

΋ͬͱ࣮ྫ͕஌Γ͍ͨਓ޲͚ w *OKFDUͷ༗ޮ׆༻ʹ͍ͭͯҎલهड़ͨ͠ࢿྉ w IUUQTUFDICMPHFMFWFOCBDLDPKQFOUSZ w /VYUKTͷΞʔΩςΫνϟతͳ࿩ w IUUQTUFDICMPHSPYYDPKQFOUSZ w ࠷ۙ༻ҙͨ͜͠ͷ͋ͨΓͷίʔυྫͷͨΊʹެ։͍ͯ͠ΔΞϓϦέʔγϣϯ044ίʔυ w IUUQTHJUIVCDPNQPUBUPEQPLFNPO

Slide 35

Slide 35 text

·ͱΊ w 7VFYͷར༻Λ࠷খݶʹ͢Δ w )551ϦΫΤετͷΩϟογϡͷͨΊʹ7VFYΛ࢖͏ͷΛ΍ΊΔ w )551ΩϟογϡPS*OKFDUͰΦϯϝϞϦΛผ్࣮૷͢΂͖ w Ϟʔμϧͷϑϥά؅ཧͷͨΊʹ7VFYΛ࢖͏ͷΛ΍ΊΔ w 1PSUBMͰରԠ͢΂͖ w ڞ௨ͷ5PBTUΛग़͢ͳͲͷศརॲཧͷͨΊʹ࢖͏ͷΛ΍ΊΔ w *OKFDUͰ୯ମͰ؅ཧ͢΂͖

Slide 36

Slide 36 text

·ͱΊ w *OKFDU͸औΓճ͕͠ྑ͘7VFYΑΓ͸ѻ͍΍͍͢খ͞ͳΦϒδΣΫτ w ϦΞΫςΟϒͳετΞ w 6*ʹؔ͢Δάϩʔόϧͳॲཧ w ελϒԽ͍ͨ͠ϥΠϒϥϦͷ஫ೖ w ্هʹݶΒͣ׆༂͢ΔͨΊɺ͜ΕΛ࣠ͱ͢Δ͜ͱΛਪ঑͢Δ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

1SPUPUZQF֦ு΍QSPWJEFJOKFDU͸7VFYࣗମʹ΋͕͋ͬͨʜʜ 7VFYͰ͸ ݶఆతͳར༻Λਪ঑ https://jp.vuejs.org/v2/api/#provide-inject

Slide 42

Slide 42 text

7VF͔Β͸ΞΫηε͠΍͘͢ͳΓɺ $PNQPTJUPO"1*ͱ߹Θͤͯ࢖ΘΕΔػձ΋૿͑Δͱ༧૝Ͱ͖Δ

Slide 43

Slide 43 text

͓ΘΓʹ w 7VFYͰ͸ɺΞϓϦέʔγϣϯΛΫϦʔϯʹهड़͢Δखஈ͕ఏڙ͞Ε͍ͯͨ w ͔͠͠Ϣʔβʔଆ͕৽نػೳΛ༗ޮ׆༻͖͠Εͳ͔ͬͨͱೝ͍ࣝͯ͠Δ w ୯७ʹ׳Εͷ໰୊ͰըҰతͳه๏͕ت͹ΕΔݱ৔͕ଟ͔ͬͨ͜ͱ΋ҰҼͰ͸͋Δ w ࠓ͸શһ͕՝୊ײΛ͔ͭΊΔ࣌୅ʹདྷͨͷͰɺࠓͦ͜ΑΓߟ࣮͑ͯ૷Ͱ͖Δ w 7VFͰ͸ɺͦ͏͍ͬͨ7VFͷ"1*ΛΑΓ͏·͘׆༻Ͱ͖Δ w 1SPWJEF*OKFDU΋ݩ͔Β͋ͬͨɻ࢖͍ͬͯͨͷ͸1SPUPUZQFͰ͸͋Δ͕ɻ

Slide 44

Slide 44 text

͓ΘΓʹ w ΑΓઓུతͳػೳʹ΋໨Λ޲͚Α͏ w $PNQPTJUJPO"1*͸໨৽͍͕͠ɺͦͷଞ΋ઃܭʹؔΘΔ෦෼ɺ͜Ε·ͰαʔυύʔςΟʹ པ͍ͬͯͨ5FMFQPSUͳͲɺݟ௨͠ΛΑ͘Ͱ͖Δ࢓૊Έ͸ͨ͘͞Μ͋Δ w 7VFΛཧ༝ʹઃܭΛαϘΔݴ͍༁͕Ͱ͖ͳ͍࣌୅͕དྷ͍ͯΔ w 5ZQF4DSJQUͷܕαϙʔτ͕ʜʜ w 4'$ͷύʔεͷ౎߹͕ʜʜ w ͢΂ͯͷίʔυ͕7VFOBUJWFͱͳͬͨݱ৔Ͱͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍