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

#remote_vue で話しました。

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. ͱ͸͍͑ʜʜ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. *OKFDU
    

    View Slide

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

    View Slide

20. *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 ʹ୅ೖ
    

    View Slide

21. ࢖͍ํ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Կ͕خ͍͠ͷʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide