inflearn logo
inflearn logo

Learning Vue.js by Picking Out the Essentials

Vue.JS is a must-learn for front-end beginners!! We will thoroughly explore Vue.JS from basic to advanced levels!

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

Vue.js
Vue.js
Vue 3
Vue 3
pinia
pinia
Vue.js
Vue.js
Vue 3
Vue 3
pinia
pinia
sucoding๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

๏ฝฅ

ไฟฎๆญฃๆธˆใฟ

์ˆ˜์ฝ”๋”ฉใฎ [TypeScriptใงๅญฆใถ React(React.js)] ่ฌ›ๅบง ใ‚ชใƒผใƒ—ใƒณ!!

ใ“ใ‚“ใซใกใฏใ€‚ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใงใ™ใ€‚

๐Ÿš€ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใฎใƒชใ‚ขใ‚ฏใƒˆ่ฌ›็พฉใ‚ชใƒผใƒ—ใƒณ๐Ÿš€

[ใ‚ฟใ‚คใƒ—ใ‚นใ‚ฏใƒชใƒ—ใƒˆใงๅญฆใถใƒชใ‚ขใ‚ฏใƒˆ(React.js) โ€“ ๅŸบ็คŽใ‹ใ‚‰ๆœ€ๆ–ฐๆŠ€่ก“ใพใงๅฎŒ็’งใซ]

ใ‚นใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใฎใƒชใ‚ขใ‚ฏใƒˆ่ฌ›็พฉใŒใ‚ˆใ†ใ‚„ใใ‚ชใƒผใƒ—ใƒณใ—ใพใ—ใŸ๏ผ ๐ŸŽ‰

ไปŠๅ›žใฎ่ฌ›็พฉใฏใ€Œใƒชใ‚ขใ‚ฏใƒˆ19+ใ‚ฟใ‚คใƒ—ใ‚นใ‚ฏใƒชใƒ—ใƒˆใ€ใ‚’ๅฎŒ็’งใซๅๆ˜ ใ—ใ€ๅฎŸๅ‹™ใซใ™ใใซ้ฉ็”จใงใใ‚‹ๆทฑใ„็Ÿฅ่ญ˜ใ‚’่พผใ‚ใพใ—ใŸใ€‚

ๅˆๅฟƒ่€…ใ‹ใ‚‰ไธŠ็ดš้–‹็™บ่€…ใพใงใ€็š†ใฎใŸใ‚ใฎไฝ“็ณป็š„ใชใ‚ซใƒชใ‚ญใƒฅใƒฉใƒ ใงๆง‹ๆˆใ—ใพใ—ใŸใ€‚

่จˆ19็ซ ใ€ 290ไปฅไธŠใฎ่ฌ›็พฉใ€ 26ๆ™‚้–“ๅˆ†ใฎๅ……ๅฎŸใ—ใŸ่ฌ›็พฉใง

็š†ใ•ใ‚“ใ‚’ๆœฌ็‰ฉใฎใƒชใ‚ขใ‚ฏใƒˆ้–‹็™บ่€…ใซๆˆ้•ทใ•ใ›ใฆใ„ใŸใ ใใพใ™ใ€‚

---

๐Ÿ”ฅๅทใฎไธปใช็‰นๅพด๐Ÿ”ฅ

โœ…ใƒชใ‚ขใ‚ฏใƒˆ19ๆœ€ๆ–ฐๅ†…ๅฎนๅฎŒๅ…จๅๆ˜ 

ไปŠๅ›žใฎ่ฌ›็พฉใฏใ€ๆœ€ๅˆใ‹ใ‚‰ใƒชใ‚ขใ‚ฏใƒˆ19ใ‚’ๅŸบๆบ–ใซๅˆถไฝœใ•ใ‚ŒใŸๆœ€ๆ–ฐใฎ่ฌ›็พฉใงใ™ใ€‚

ViteใŒใƒชใ‚ขใ‚ฏใƒˆ19ใ‚’ๆ”ฏๆดใ™ใ‚‹ใจใ™ใใซ๏ผˆ2025ๅนด2ๆœˆ๏ผ‰ๆ’ฎๅฝฑใ‚’ๅง‹ใ‚ใŸใฎใงใ€

็พๅญ˜ใ™ใ‚‹ๆœ€ๆ–ฐใฎใƒชใ‚ขใ‚ฏใƒˆ่ฌ›็พฉใ ใจ่‡ช่ฒ ใ—ใพใ™ใ€‚

้€”ไธญใงใ‚ขใƒƒใƒ—ใ‚ฐใƒฌใƒผใƒ‰ใ—ใŸใฎใงใฏใชใใ€ๆœ€ๅˆใ‹ใ‚‰ใƒชใ‚ขใ‚ฏใƒˆ19ใซ่จญ่จˆใ•ใ‚Œใพใ—ใŸ๏ผ

โœ…ใƒชใ‚ขใ‚ฏใƒˆ19ๆฉŸ่ƒฝๆดป็”จไพ‹ใพใงใŸใฃใทใ‚Š

ไพ‹ใชใ—ใง่ชฌๆ˜Žใ ใ‘ใ‚’่žใ„ใฆ็†่งฃใ™ใ‚‹ใฎใฏ้›ฃใ—ใ„ใงใ™ใ‹๏ผŸ

็‰นใซใ€ๆ–ฐใ—ใ่ฟฝๅŠ ใ•ใ‚ŒใŸuseใƒ•ใƒƒใ‚ฏใฎใ‚ˆใ†ใชๆฉŸ่ƒฝใฏใ€ๅฎŸ้š›ใฎ้ฉ็”จไพ‹ใงๅญฆใฐใชใ‘ใ‚Œใฐๆญฃใ—ใ็†่งฃใ•ใ‚Œใพใ›ใ‚“ใ€‚

ๅฎŸๅ‹™ใงใฉใฎใ‚ˆใ†ใซๆดป็”จใ•ใ‚Œใ‚‹ใฎใ‹ใ€ๅฎŸๆˆฆ่ฆ–็‚นใฎ้ฉ็”จไบ‹ไพ‹ใ‚’ใ™ในใฆ็››ใ‚Š่พผใ‚“ใงใ„ใพใ™ใ€‚

ใœใฒๅญฆใณใพใ—ใ‚‡ใ†๏ผ

โœ…ๅŸบ็คŽใ‹ใ‚‰้ซ˜็ดšใพใงใ€ๅฎŸๆˆฆไธญๅฟƒใ‚ซใƒชใ‚ญใƒฅใƒฉใƒ 

*ๅŸบ็คŽ๏ผš้–ขๆ•ฐๅž‹ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใ€Propsใ€็Šถๆ…‹็ฎก็†ใ€ใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐๆ‰‹ๆณ•ใชใฉใฎๅ …็‰ขใชๅŸบ็คŽใ‚’ๅ›บใ‚ใ‚‹

*ไธญ็ดš๏ผšContext APIใ€Redux Toolkitใ€Zustandใชใฉใ€ใ•ใพใ–ใพใชใ‚ฐใƒญใƒผใƒใƒซ็Šถๆ…‹็ฎก็†ๆˆฆ็•ฅ

*้ซ˜ๅบฆ๏ผšใ‚ฟใ‚คใƒ—ใ‚นใ‚ฏใƒชใƒ—ใƒˆใฎๆดป็”จๆณ•ใ€ใƒ‡ใƒผใ‚ฟ้€šไฟกใ€ใƒซใƒผใƒ†ใ‚ฃใƒณใ‚ฐใชใฉใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณ่จญ่จˆใƒŽใ‚ฆใƒใ‚ฆใพใง๏ผ

โœ…ๆœฌ็•ชใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใƒ™ใƒผใ‚นใฎๅญฆ็ฟ’

ๅ˜ใชใ‚‹็†่ซ–ใงใฏใชใใ€็›ดๆŽฅๅฎŸ็ฟ’ใ‚’้€šใ˜ใฆใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใ‚’ไฝœใฃใฆใฟใฆ

ใ‚ณใƒผใƒ‰ใ‚’ๆ›ธใ„ใฆใƒ‡ใƒใƒƒใ‚ฐใ—ใชใŒใ‚‰ใ€ๅฎŸ้š›ใฎ้–‹็™บ็ตŒ้จ“ใ‚’ไฝ“้จ“ใ—ใพใ™ใ€‚

ๅฎŸๅ‹™ใซๅผทใ„้–‹็™บ่€…ใซใชใ‚‹ๆ–นๆณ•ใ€ใ“ใ“ใงๅญฆใณใพใ—ใ‚‡ใ†๏ผ

โœ…ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃ๏ผ†ใƒชใ‚ขใƒซใ‚ฟใ‚คใƒ ใƒ•ใ‚ฃใƒผใƒ‰ใƒใƒƒใ‚ฏ

ใƒชใ‚ขใƒซใ‚ฟใ‚คใƒ ใ‚ณใƒผใƒ‰ใƒฌใƒ“ใƒฅใƒผใ€Q\&Aใ‚ปใƒƒใ‚ทใƒงใƒณใงใ‚ใชใŸใฎ็–‘ๅ•ใ‚’็ด ๆ—ฉใ่งฃๆฑบใ—ใพใ™ใ€‚

ไธ€็ท’ใซๅ‹‰ๅผทใ™ใ‚‹ไปฒ้–“ใŸใกใจใฎใ‚ณใƒฉใƒœใƒฌใƒผใ‚ทใƒงใƒณ็ตŒ้จ“ใพใง็ฉใ‚“ใงใฟใฆใใ ใ•ใ„ใ€‚

ใ“ใฎ่ฌ›็พฉใฏๅ˜ใซ่žใ่ฌ›็พฉใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚ไธ€็ท’ใซๆˆ้•ทใ™ใ‚‹ใƒ—ใƒญใ‚ปใ‚นใงใ™ใ€‚

---

๐ŸŽ‰ใ‚ชใƒผใƒ—ใƒณ่จ˜ๅฟตๅ‰ฒๅผ•ใ‚คใƒ™ใƒณใƒˆ๏ผ ๐ŸŽ‰

ไปŠๅ—่ฌ›ใ•ใ‚ŒใŸใ‚‰็‰นๅˆฅๅ‰ฒๅผ•ใ‚’ใ„ใŸใ—ใพใ™๏ผ

้™ใ‚‰ใ‚ŒใŸๆœŸ้–“ใ ใ‘ๆไพ›ใ•ใ‚Œใ‚‹ๆฉŸไผšใชใฎใงใ€็ตถๅฏพใซใŠ่ฆ‹้€ƒใ—ใชใใ€‚

ๆœ€ๆ–ฐใƒชใ‚ขใ‚ฏใƒˆๆŠ€่ก“ใ‚’ๅญฆใณใ€ๅฎŸๅŠ›ใ‚’ไธ€ๆฎต้šŽๅผ•ใไธŠใ’ใ‚‹ใ“ใจใŒใงใใ‚‹ๆœ€้ซ˜ใฎใ‚ฟใ‚คใƒŸใƒณใ‚ฐใงใ™ใ€‚

ไปŠใ™ใๅ‰ฒๅผ•ใ‚’ๅ—ใ‘ใฆๅง‹ใ‚ใพใ—ใ‚‡ใ†๏ผ

๐Ÿ‘‰่ฌ›็พฉใจๅ—่ฌ›ใ‚นใ‚ฑใ‚ธใƒฅใƒผใƒซใฎ็ขบ่ช๏ผš

https://inf.run/1Uo4q

ใ“ใ‚Œใงใ€ๆœ€ๆ–ฐใฎReact 19ใจTypeScriptใ‚’ๅฎŒๅ…จใซใƒžใ‚นใ‚ฟใƒผใ™ใ‚‹ๆบ–ๅ‚™ใŒใงใใพใ—ใŸใ‹๏ผŸ

ใ“ใฎ่ฌ›็พฉใŒใ‚ใชใŸใฎ้–‹็™บใ‚ญใƒฃใƒชใ‚ขใซใจใฃใฆๅฎŸ่ณช็š„ใช็งป่กŒ็‚นใซใชใ‚‹ใ“ใจใ‚’้ก˜ใฃใฆใ„ใพใ™ใ€‚

ไธ€็ท’ใซๆƒ…็†ฑใ‚’็‡ƒใ‚„ใ—ใพใ—ใ‚‡ใ†๏ผ

ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚

ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใƒ‰ใƒชใƒผใƒ 

ใ‚ณใƒกใƒณใƒˆ
ใพใ ใ‚ณใƒกใƒณใƒˆใŒใ‚ใ‚Šใพใ›ใ‚“

๏ฟฅ9,889