$30 off During Our Annual Pro Sale. View Details »

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

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

#remote_vue で話しました。

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

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