7JUFͰ͓खܰ7VFKTͷ؀ڥߏங ϑϩϯτΤϯυ-5େձWPM 4"8

$(whoami) ࢯ໊Ճ౻फҰ࿠ ࡀ ϋϯυϧωʔϜ4"8 5XJUUFS!B[VLJ@FBUFS ॴଐגࣜձࣾ.4&/ ೥໨ 5XJUUFSΞΠίϯ

ಈػ 7VFKT͕ϦϦʔε͞Εͨ $PNQPTJUJPO"1*ͱ͍͏৽͍͠هड़ํ๏͕௥Ճ 5ZQF4DSJQU΋ެࣜαϙʔτ 7JUFͱ͍͏ϑϩϯτΤϯυͷϏϧυπʔϧ΋ϦϦʔε͞Εͨ ΄ͱΜͲઃఆෆཁͰ։ൃ؀ڥ͕ߏஙՄೳ 7VFKT΍3FBDUͳͲෳ਺ͷϑϨʔϜϫʔΫʹରԠ ͲͪΒ΋ࢼͤͯͳ͍ͷͰ৮ͬͯΈ͍ͨ

7VFKTͷ$PNQPTJUJPO"1* ैདྷͷ0QUJPOBM"1*ͱ͸େ෯ʹҟͳΔ৽͍͠"1* ैདྷͷdata methodsͳͲ͕setup()಺ʹهड़͞ΕΔ thisΛهड़͢Δඞཁ͕ͳ͘ͳͬͨ ςϯϓϨʔτଆ export default defineComponent({ setup() { const state = reactive<State>({ items: [{ id: 1, name: 'vite' }], }); return { state }; }, }); εΫϦϓτଆ

7JUFͱ͸ Ϗϧυ͕࣌ؒര଎ͳϑϩϯτΤϯυ։ൃπʔϧ େن໛ͳϓϩδΣΫτͰ΋ϩʔΧϧαʔόʔͷىಈ͕ߴ଎ &WBO:PVࢯ͕࡞੒ 7VFKT 3FBDU 4WFMUFͳͲෳ਺ͷϑϨʔϜϫʔΫʹରԠ TDB ff PME࡞੒࣌ʹ΄ͱΜͲઃఆ͕ෆཁ 5ZQF4DSJQUͷબ୒΋Մೳ

7JUFͷ࢖͍ํ npm΍yarn͔Β࣮ߦ άϩʔόϧΠϯετʔϧ͸ෆཁ --templateΦϓγϣϯͰϑϨʔϜϫʔΫͷࢦఆ΋Մೳ # npm ͷ৔߹ npm create vite my-vue-app --template vue-ts # yarn ͷ৔߹ yarn create vite my-vue-app --template vue-ts

7JUFͰ࡞੒͞Εͨ7VFKTͷϓϩδΣΫτ 7VFKTͰ࡞੒͞ΕΔ ςϯϓϨʔτ͸$PNQPTJUJPO"1*Ͱهड़͞ΕΔ

ϩʔΧϧαʔόʔͷىಈ npm΍yarnͰdevίϚϯυΛ࣮ߦ ମײͰ7VF$-*ΑΓߴ଎ʹىಈ # npm ͷ৔߹ npm run dev # yarn ͷ৔߹ yarn dev

7VFYͱ7VF3PVUFSͷ௥Ճ npm΍yarn͔Β௥Ճ 7JUF͔Β͸௥ՃͰ͖ͳ͍ ࠓޙ7JUF͔Βબ୒Ͱ͖ͨΒخ͍͔͠΋ 7VFKTઐ༻ͷπʔϧͰ͸ͳ͍͔Β೉͍͠ # Vuex ͷ௥Ճ yarn add vuex # Vue Router ͷ௥Ճ yarn add vue-router@4

ࠓճࢼͤͳ͔ͬͨ͜ͱ 7VFKTͷ$PNQPTJUJPO"1*Λ͔ͬ͠Γࢼͤͳ͔ͬͨ 2JJUBͳͲͰܰ͘ௐ΂ͨఔ౓Ͱ΄ͱΜͲࢼ͍ͤͯͳ͍ ެࣜʹॻ͔Ε͍ͯͨscriptλάͷsetup͕Α͘෼͔͍ͬͯͳ͍ 7VFKTҎ֎ͷϑϨʔϜϫʔΫͷར༻ 3FBDU΍4WFMUFͳͲͷ؀ڥߏங΍࣮ߦΛࢼͤͳ͔ͬͨ ࠓޙࢼͯ͠Έ͍ͨ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠