終わりゆく 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 で話しました。

Transcript

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

  2. QPUBUPE 5BLVNB)"/"5"/* w -*/&גࣜձࣾγχΞϑϩϯτΤϯυΤϯδχΞ߹ಉձࣾ&MFWFO#BDL୅ද w 7VFKT೔ຊޠυΩϡϝϯτϝϯςφ ͠͹Β͘׆ಈͰ͖ͯͳ͍  w ⚙/VYUKTΦϑΟγϟϧϓϥάΠϯ!OVYUKTEBZKT؅ཧऀ

    w 6*5*/4*%&1PEDBTUFS w 7VFKTΛॻ͘ͱ͖͸΄ͱΜͲ/VYUKT 549Ͱॻ͍ͯ·͢ w ࣮͸ਃ͠ࠐΜͩ͋ͱͰPCTFSWBCMFͰؙ͔ͿΓͨ͠ͷͰٸᬎτʔΫΛม͑ͨਓ ୭ʁ
  3. -"13"4ϥϯΧʔͳͷʹπΠʔτΛʮ͍͍Ͷʯ͚ͩԡ͞Εͯެ͔ࣜΒແࢹ͞Εଓ͚Δஉ ୭ʁ

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

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

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

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

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

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

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

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

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

    ͋Δͱ͖͸"1*ϨεϙϯεͷΩϟογϡ w ͋Δͱ͖͸ ϞʔμϧͳͲͷ 6*ͷϑϥά؅ཧ΍5PBTUදࣔ
  13. ࢲ͕ͨͪ7VFYʹٻΊ͍ͯͨ΋ͷ͸ଟ͗ͨ͢ w ݁Ռతʹάϩʔόϧม਺ʹ͍ۙར༻͕ຮԆ͠ɺཻ౓͕ແࢹ͞ΕͨੈքͱͳΔ w ຊདྷ͸ͦΕͧΕͷ࢖్ʹԠͯ͡෼͚Δ΂͖ͩͬͨ w "1*ͷΩϟογϡˠ)551ΩϟογϡPSΠϯϝϞϦʹ࣮૷ w ϞʔμϧͷϑϥάˠQPSUBMWVF5FMFQPSUͰάϩʔόϧεςʔτෆཁʹ w

    ϩάΠϯϢʔβʔˠ7VFYͰ΋ଥ౰Ͱ͸ͳ͍͔ w 7VFY͸࢖Θͳ͚Ε͹࢖Θͳ͍͚ͩϥΠϑαΠΫϧϑοΫʹ৐Εͯߟ͑Δ͜ͱ͕ݮΔ w 7VFYҎ֎Λબ୒Ͱ͖ΔΑ͏ʹ໨Λ޲͚Δ΂͖ͩͬͨ
  14. ͱ͸͍͑ʜʜ

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

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

    w ϖʔδભҠͯ͠΋σʔλΛอ͍࣋ͨ͠ w ͨͩͦΕ͸ඞͣ͠΋4UPSFͱ͍͏ܗΛ੒͢ඞཁ͸ͳ͍ w ͦΜͳͱ͖ʹ࢖͑Δͷ͕*OKFDU
  17. ࠓ೔࿩͢͜ͱ w ࢲ͕ͨͪ7VFY࣌୅ʹ๊͑ͨΞϓϦέʔγϣϯ։ൃͷ՝୊ w ࢲୡ͕7VFYΛٻΊͨཧ༝ͱݱࡏ w *OKFDUͰ࣮ݱ͢Δ7VFY࣌୅࠷ޙͷઃܭ࿦ w 7VFʹ޲͚ͯQSPWJEFJOKFDU΁ͷظ଴

  18. *OKFDU

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

    ಺෦తʹ͸7VFͷQSPUPUZQF֦ுΛར༻͍ͯ͠Δ
  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 ʹ୅ೖ
  21. ࢖͍ํ

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

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

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

  25. Կ͕خ͍͠ͷʁ

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

  27. *OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ w 7VFYͷ໊લۭؒ͸ͦΕͳΓʹେ͖ͳ΋ͷͱͳΓ΍͍͢ w ٯʹࡉ͔͘෼཭͞Εͨ7VFYͷ໊લۭ͕ؒ ͋Δίʔυ͸ݟͨ͘ͳ͍ w ར༻͢Δ৔߹΋TUBUFͷར༻͸ېࢭ͍ͨ͠ɺHFUUFS͚ͩʹ͍ͨ͠ͳͲߟ͑ग़͢ͱٻΊ ͍ͯͨ΋ͷ͔Β཭ΕͯΏ͘

    w *OKFDUͰ͸ɺάϩʔόϧʹӨڹΛٴ΅͢΋ͷΛ࠷খݶͷ࿐ग़ͰऔΓճͤΔ w ؆୯ͳΦϯϝϞϦΩϟογϡ͚͕ͩࡌͬͨසൟʹୟ͘"1*ͷޱ͚ͩͳͲ w খ͞ͳঢ়ଶπϦʔΛෳ਺༻ҙ͢Δ͜ͱ͸3FDPJMવΓτϨϯυͰ΋͋Δҹ৅
  28. *OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ https://github.com/potato4d/pokemon63/blob/master/src/plugins/userRecord.ts άϩʔόϧʹ࿐ग़͢Δঢ়ଶΛ࠷খʹͰ͖Δ

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

    w *OKFDUͰ͸WVFUZQFTWVFͷҰൠతͳ֦ுͷൣғͰऔΓѻ͑Δ w ϢʔβʔఆٛͰ͋Δ͜ͱ͸มΘΓͳ͍͕
  30. 1. asyncData ΍ Store ޲͚ఆٛ 2. this.$auth ͷఆٛ *OKFDUΛ࢖͏͜ͱʹΑΔخ͠͞ 7VFYͰ͸ऑ͍ܕఆٛͷ෦෼ΛΧελϜͯ͠׆༻Ͱ͖Δ

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

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

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

  34. ΋ͬͱ࣮ྫ͕஌Γ͍ͨਓ޲͚ w *OKFDUͷ༗ޮ׆༻ʹ͍ͭͯҎલهड़ͨ͠ࢿྉ w IUUQTUFDICMPHFMFWFOCBDLDPKQFOUSZ w /VYUKTͷΞʔΩςΫνϟతͳ࿩ w IUUQTUFDICMPHSPYYDPKQFOUSZ w

    ࠷ۙ༻ҙͨ͜͠ͷ͋ͨΓͷίʔυྫͷͨΊʹެ։͍ͯ͠ΔΞϓϦέʔγϣϯ044ίʔυ w IUUQTHJUIVCDPNQPUBUPEQPLFNPO
  35. ·ͱΊ w 7VFYͷར༻Λ࠷খݶʹ͢Δ w )551ϦΫΤετͷΩϟογϡͷͨΊʹ7VFYΛ࢖͏ͷΛ΍ΊΔ w )551ΩϟογϡPS*OKFDUͰΦϯϝϞϦΛผ్࣮૷͢΂͖ w Ϟʔμϧͷϑϥά؅ཧͷͨΊʹ7VFYΛ࢖͏ͷΛ΍ΊΔ w

    1PSUBMͰରԠ͢΂͖ w ڞ௨ͷ5PBTUΛग़͢ͳͲͷศརॲཧͷͨΊʹ࢖͏ͷΛ΍ΊΔ w *OKFDUͰ୯ମͰ؅ཧ͢΂͖
  36. ·ͱΊ w *OKFDU͸औΓճ͕͠ྑ͘7VFYΑΓ͸ѻ͍΍͍͢খ͞ͳΦϒδΣΫτ w ϦΞΫςΟϒͳετΞ w 6*ʹؔ͢Δάϩʔόϧͳॲཧ w ελϒԽ͍ͨ͠ϥΠϒϥϦͷ஫ೖ w

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

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

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

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

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

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

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

    7VFͰ͸ɺͦ͏͍ͬͨ7VFͷ"1*ΛΑΓ͏·͘׆༻Ͱ͖Δ w 1SPWJEF*OKFDU΋ݩ͔Β͋ͬͨɻ࢖͍ͬͯͨͷ͸1SPUPUZQFͰ͸͋Δ͕ɻ
  44. ͓ΘΓʹ w ΑΓઓུతͳػೳʹ΋໨Λ޲͚Α͏ w $PNQPTJUJPO"1*͸໨৽͍͕͠ɺͦͷଞ΋ઃܭʹؔΘΔ෦෼ɺ͜Ε·ͰαʔυύʔςΟʹ པ͍ͬͯͨ5FMFQPSUͳͲɺݟ௨͠ΛΑ͘Ͱ͖Δ࢓૊Έ͸ͨ͘͞Μ͋Δ w 7VFΛཧ༝ʹઃܭΛαϘΔݴ͍༁͕Ͱ͖ͳ͍࣌୅͕དྷ͍ͯΔ w 5ZQF4DSJQUͷܕαϙʔτ͕ʜʜ

    w 4'$ͷύʔεͷ౎߹͕ʜʜ w ͢΂ͯͷίʔυ͕7VFOBUJWFͱͳͬͨݱ৔Ͱͷ࢟ʹ͍ͭͯߟ͍͑ͯ͘ͱྑ͍