フロントエンドLT会 - vol.7 の発表資料です。
7JUFͰ͓खܰ7VFKTͷڥߏஙϑϩϯτΤϯυ-5େձWPM4"8
View Slide
$(whoami)ࢯ໊Ճ౻फҰ ࡀϋϯυϧωʔϜ4"85XJUUFS!B[[email protected]ॴଐגࣜձࣾ.4&/ 5XJUUFSΞΠίϯ
ಈػ7VFKT͕ϦϦʔε͞Εͨ$PNQPTJUJPO"1*ͱ͍͏৽͍͠هड़ํ๏͕Ճ5ZQF4DSJQUެࣜαϙʔτ7JUFͱ͍͏ϑϩϯτΤϯυͷϏϧυπʔϧϦϦʔε͞Εͨ΄ͱΜͲઃఆෆཁͰ։ൃڥ͕ߏஙՄೳ7VFKT3FBDUͳͲෳͷϑϨʔϜϫʔΫʹରԠͲͪΒࢼͤͯͳ͍ͷͰ৮ͬͯΈ͍ͨ
7VFKTͷ$PNQPTJUJPO"1*ैདྷͷ0QUJPOBM"1*ͱେ෯ʹҟͳΔ৽͍͠"1*ैདྷͷdata methodsͳͲ͕setup()ʹهड़͞ΕΔthisΛهड़͢Δඞཁ͕ͳ͘ͳͬͨv-for="item in items":key="item.id">{{ item.name }}ςϯϓϨʔτଆ<br/><br/><br/>export default defineComponent({<br/><br/><br/>setup() {<br/><br/><br/>const state = reactive<State>({<br/><br/><br/>items: [{ id: 1, name: 'vite' }],<br/><br/><br/>});<br/><br/><br/>return { state };<br/><br/><br/>},<br/><br/><br/>});<br/><br/><br/>εΫϦϓτଆ
7JUFͱϏϧυ͕࣌ؒരͳϑϩϯτΤϯυ։ൃπʔϧେنͳϓϩδΣΫτͰϩʔΧϧαʔόʔͷىಈ͕ߴ&WBO:PVࢯ͕࡞7VFKT 3FBDU 4WFMUFͳͲෳͷϑϨʔϜϫʔΫʹରԠTDBffPME࡞࣌ʹ΄ͱΜͲઃఆ͕ෆཁ5ZQF4DSJQUͷબՄೳ
7JUFͷ͍ํnpmyarn͔Β࣮ߦάϩʔόϧΠϯετʔϧෆཁ--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*Ͱهड़͞ΕΔ
ϩʔΧϧαʔόʔͷىಈnpmyarnͰdevίϚϯυΛ࣮ߦମײͰ7VF$-*ΑΓߴʹىಈ# npm ͷ߹npm run dev# yarn ͷ߹yarn dev
7VFYͱ7VF3PVUFSͷՃnpmyarn͔ΒՃ7JUF͔ΒՃͰ͖ͳ͍ࠓޙ7JUF͔ΒબͰ͖ͨΒخ͍͔͠ 7VFKTઐ༻ͷπʔϧͰͳ͍͔Β͍͠# Vuex ͷՃyarn add vuex# Vue Router ͷՃyarn add [email protected]
ࠓճࢼͤͳ͔ͬͨ͜ͱ7VFKTͷ$PNQPTJUJPO"1*Λ͔ͬ͠Γࢼͤͳ͔ͬͨ2JJUBͳͲͰܰ͘ௐͨఔͰ΄ͱΜͲࢼ͍ͤͯͳ͍ެࣜʹॻ͔Ε͍ͯͨscriptλάͷsetup͕Α͔͍ͬͯ͘ͳ͍7VFKTҎ֎ͷϑϨʔϜϫʔΫͷར༻3FBDU4WFMUFͳͲͷڥߏங࣮ߦΛࢼͤͳ͔ͬͨࠓޙࢼͯ͠Έ͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠