่งฃๆฑบๆธˆใฟ: vuejs typescript mapactions

Vue.js ใจ ใ‚ฟใ‚คใƒ—ใ‚นใ‚ฏใƒชใƒ—ใƒˆ ใฏใ€Web ใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณ้–‹็™บใ‚’ๅคงๅน…ใซ็ฐก็ด ๅŒ–ใŠใ‚ˆใณๅˆ็†ๅŒ–ใงใใ‚‹ใ€ใƒ—ใƒญใ‚ฐใƒฉใƒŸใƒณใ‚ฐใฎไธ–็•ŒใซใŠใ‘ใ‚‹ XNUMX ใคใฎๅผทๅŠ›ใชใƒ„ใƒผใƒซใงใ™ใ€‚ ใ‚ขใ‚ฏใ‚ทใƒงใƒณใฎใƒžใƒƒใƒ”ใƒณใ‚ฐ Vue.js TypeScript ใ‚’ไฝฟ็”จใ™ใ‚‹ใฎใฏ้›ฃใ—ใ„ไฝœๆฅญใซใชใ‚‹ๅ ดๅˆใŒใ‚ใ‚Šใพใ™ใŒใ€ๅŸบ็คŽใจใชใ‚‹ๆฆ‚ๅฟตใ‚’็†่งฃใ—ใ€ๆญฃใ—ใ„ๆ‰‹้ †ใซๅพ“ใ†ใ“ใจใงใ€ใƒ—ใƒญใ‚ปใ‚นใ‚’ใ‚ˆใ‚Šใ‚นใƒ ใƒผใ‚บใซ่กŒใ†ใ“ใจใŒใงใใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: htmlWebpackPlugin.options.title

HTMLWebpackPlugin ใฏใ€Webpack ใƒใƒณใƒ‰ใƒซใ‚’ๆไพ›ใ™ใ‚‹ HTML ใƒ•ใ‚กใ‚คใƒซใฎไฝœๆˆใ‚’ๅคงๅน…ใซ็ฐก็ด ๅŒ–ใ™ใ‚‹ๅผทๅŠ›ใชใƒ„ใƒผใƒซใงใ™ใ€‚ ใ“ใฎๅฎŸ็”จ็š„ใชใƒ—ใƒฉใ‚ฐใ‚คใƒณใฏใ€ใ‚ณใƒผใƒ‰ใ‚’ใ‚ˆใ‚ŠๅŠน็Ž‡็š„ใ‹ใคๅ‹•็š„ใซใ™ใ‚‹ใŸใ‚ใฎใ•ใพใ–ใพใชใ‚ชใƒ—ใ‚ทใƒงใƒณใ‚’้–‹็™บ่€…ใซๆไพ›ใ—ใพใ™ใ€‚ ใ“ใ‚Œใ‚‰ใฎใ‚ชใƒ—ใ‚ทใƒงใƒณใฎ XNUMX ใคใฏ `htmlWebpackPlugin.options.title` ใ‚ชใƒ—ใ‚ทใƒงใƒณใงใ€ใ“ใ‚Œใ‚’ไฝฟ็”จใ™ใ‚‹ใจ HTML ใƒ•ใ‚กใ‚คใƒซใฎใ‚ฟใ‚คใƒˆใƒซใ‚’่จญๅฎšใงใใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ใƒญใƒผใ‚ซใƒซใ‚นใƒˆใƒฌใƒผใ‚ธใฎๅ‰Š้™ค

Web ใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณใŒๆ—ฅๅธธ็”Ÿๆดปใฎไธ€้ƒจใจใชใฃใฆใ„ใ‚‹็พไปฃใฎใƒ‡ใ‚ธใ‚ฟใƒซไธ–็•Œใงใฏใ€้–‹็™บ่€…ใฎๅฝนๅ‰ฒใซใฏใ€ใƒ‡ใƒผใ‚ฟใ‚’ๅŠน็Ž‡็š„ใซๆ•ด็†ใ€ไฟๅญ˜ใ€็ฎก็†ใ™ใ‚‹ใ“ใจใŒๅซใพใ‚Œใพใ™ใ€‚ ใƒ‡ใƒผใ‚ฟใ‚’ๆ‰ฑใ†้š›ใฎๅŸบๆœฌ็š„ใชๆฆ‚ๅฟตใฎ XNUMX ใคใฏ **ใƒญใƒผใ‚ซใƒซ ใ‚นใƒˆใƒฌใƒผใ‚ธ**ใงใ™ใ€‚ ใ“ใฎ่จ˜ไบ‹ใงใฏใ€JavaScript ใ‚’ไฝฟ็”จใ—ใฆใƒญใƒผใ‚ซใƒซ ใ‚นใƒˆใƒฌใƒผใ‚ธใ‹ใ‚‰ใƒ‡ใƒผใ‚ฟใ‚’ๅ‰Š้™คใ™ใ‚‹ๆ–นๆณ•ใ‚’่ฉณใ—ใ่ชฌๆ˜Žใ—ใ€ใ‚ณใƒผใƒ‰ใฎๆฎต้šŽ็š„ใชๅฎŸ่ฃ…ใ‚’ๆคœ่จผใ—ใ€ใ“ใฎใƒ—ใƒญใ‚ปใ‚นใซ้–ข้€ฃใ™ใ‚‹ใ„ใใคใ‹ใฎใƒฉใ‚คใƒ–ใƒฉใƒชใจ้–ขๆ•ฐใซใคใ„ใฆ่ชฌๆ˜Žใ—ใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ใƒ‡ใ‚ฃใƒผใƒ— ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’็›ฃ่ฆ–ใ™ใ‚‹

Watch deep ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใจใ„ใ†ใจ่ค‡้›‘ใชๆฆ‚ๅฟตใฎใ‚ˆใ†ใซ่žใ“ใˆใ‚‹ใ‹ใ‚‚ใ—ใ‚Œใพใ›ใ‚“ใŒใ€JavaScript ใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆใฎๅ‹•ไฝœใ‚’็†่งฃใ™ใ‚‹ไธŠใงไธๅฏๆฌ ใช้ƒจๅˆ†ใงใ™ใ€‚ ๅŸบๆœฌ็š„ใซใ€ใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆใฎใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใซไป–ใฎใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆใ‚’ๅซใ‚ใ‚‹ใ“ใจใŒใงใใ‚‹ใ“ใจใ‚’ๅ‰ๆใจใ—ใฆใ„ใพใ™ใ€‚ ๅ…ทไฝ“็š„ใซใฏใ€ใƒ‡ใƒผใ‚ฟ/ใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆ้ง†ๅ‹•ๅž‹ใƒ—ใƒญใ‚ฐใƒฉใƒŸใƒณใ‚ฐใงใฏใ€ใƒใ‚นใƒˆใ•ใ‚ŒใŸใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆใพใŸใฏ้…ๅˆ—ใฎๅค‰ๆ›ดใ‚’็›ฃ่ฆ–ใ€่ฆณๅฏŸใ€ใพใŸใฏ่ฟฝ่ทกใ™ใ‚‹ๅฟ…่ฆใŒ้žๅธธใซใ‚ใ‚Šใพใ™ใ€‚ ใ“ใฎใŸใ‚ใซใ€ใƒ—ใƒญใƒ‘ใƒ†ใ‚ฃใ‚’ๅพนๅบ•็š„ใซ็›ฃ่ฆ–ใ—ใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: For ใƒซใƒผใƒ—

ๅ–œใ‚“ใง้ตๅฎˆใ—ใพใ™ใŒใ€AI ใƒขใƒ‡ใƒซใจใ—ใฆใ€Web ใ‚ตใ‚คใƒˆไธŠใงๆฉŸ่ƒฝใ™ใ‚‹ใ‚ˆใ†ใซ HTML ใ‚ฟใ‚ฐใ‚’็ตฑๅˆใ™ใ‚‹ใ“ใจใฏใงใใชใ„ใ“ใจใซๆณจๆ„ใ—ใฆใใ ใ•ใ„ใ€‚ ใ—ใ‹ใ—ใ€ๆ–‡ๆ›ธใฎ็›ฎ็š„ไธŠใ€ๆ›ธใ็•™ใ‚ใฆใŠใใพใ™ใ€‚

JavaScript ใฎๅŸบๆœฌๆฆ‚ๅฟตใงใ‚ใ‚‹ For ใƒซใƒผใƒ—ใฏใ€ใ™ในใฆใฎ้–‹็™บ่€…ใŒไฝฟใ„ๆ…ฃใ‚Œใ‚‹ๅฟ…่ฆใŒใ‚ใ‚‹ๅผทๅŠ›ใชใƒ—ใƒญใ‚ฐใƒฉใƒŸใƒณใ‚ฐ ใƒ„ใƒผใƒซใงใ™ใ€‚ ใ“ใ‚Œใซใ‚ˆใ‚Šใ€ๆŒ‡ๅฎšใ•ใ‚ŒใŸๆกไปถใซๅŸบใฅใ„ใฆใ‚ณใƒผใƒ‰ใ‚’็นฐใ‚Š่ฟ”ใ—ๅฎŸ่กŒใงใใพใ™ใ€‚ ใ“ใ‚Œใฏ็ฐกๅ˜ใชใ“ใจใฎใ‚ˆใ†ใซๆ€ใˆใ‚‹ใ‹ใ‚‚ใ—ใ‚Œใพใ›ใ‚“ใŒใ€ใƒซใƒผใƒ—ใฎๆ“ไฝœๆ–นๆณ•ใ‚’ใ‚ˆใ็†่งฃใ™ใ‚‹ใจใ€ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ่ƒฝๅŠ›ใซๅคงใใช้•ใ„ใŒ็”Ÿใ˜ใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ใƒ†ใ‚ญใ‚นใƒˆใŒๅˆ‡ใ‚Š่ฉฐใ‚ใ‚‰ใ‚Œใ‚‹

ใƒ†ใ‚ญใ‚นใƒˆใฎๅˆ‡ใ‚Š่ฉฐใ‚ ใ“ใ‚Œใฏใ€Web ้–‹็™บใซใŠใ‘ใ‚‹ไธ€่ˆฌ็š„ใชใ‚ฟใ‚นใ‚ฏใงใ‚ใ‚Šใ€็‰นใซใƒ“ใƒฅใƒผใ‚’้Ž่ฒ ่ทใซใ™ใ‚‹ใ“ใจใชใ็‰นๅฎšใฎ่กจ็คบๅˆถ้™ๅ†…ใซๅŽใพใ‚‹ๅฟ…่ฆใŒใ‚ใ‚‹้•ทใ„ใƒ†ใ‚ญใ‚นใƒˆ ใ‚ณใƒณใƒ†ใƒณใƒ„ใ‚’ๆ‰ฑใ†ๅ ดๅˆใซๅฝ“ใฆใฏใพใ‚Šใพใ™ใ€‚ ใ“ใ‚Œใฏ้€šๅธธใ€ใƒ‹ใƒฅใƒผใ‚น ใƒ•ใ‚ฃใƒผใƒ‰ใ€ใƒ†ใ‚ญใ‚นใƒˆ ใƒ—ใƒฌใƒ“ใƒฅใƒผใ€ใพใŸใฏๅฎŸ้š›ใซใ€Œ็ถšใใ‚’่ชญใ‚€ใ€ใ‚ฟใ‚คใƒ—ใฎๆฉŸ่ƒฝใ‚’้ธๆŠžใ—ใŸๅ ดๅˆใชใฉใฎใ‚ทใƒŠใƒชใ‚ชใง็™บ็”Ÿใ—ใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ้€Ÿ่จ˜ๆณ•

Javascript ใฎ็Ÿญ็ธฎใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐ ใƒ—ใƒญใ‚ฐใƒฉใƒŸใƒณใ‚ฐใฎๅฐ‚้–€็Ÿฅ่ญ˜ใ‚’้ซ˜ใ‚ใ€ๅŠน็Ž‡็š„ใชใ‚ฝใƒชใƒฅใƒผใ‚ทใƒงใƒณใ‚’ๆไพ›ใงใใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚ ใ“ใฎใƒ†ใ‚ฏใƒ‹ใƒƒใ‚ฏใฏๅ˜ใซใ‚ณใƒผใƒ‰ใฎ่จ˜่ฟฐ้‡ใ‚’ๆธ›ใ‚‰ใ™ใ ใ‘ใงใฏใชใใ€ใ‚ณใƒผใƒ‰ใ‚’ๆœ€้ฉๅŒ–ใ—ใ€้ซ˜ใ„ใƒ‘ใƒ•ใ‚ฉใƒผใƒžใƒณใ‚นใ‚’็ถญๆŒใ—ใชใŒใ‚‰ๅฏ่ชญๆ€งใ‚’ๅ‘ไธŠใ•ใ›ใ‚‹ใ“ใจใ‚’็›ฎ็š„ใจใ—ใฆใ„ใพใ™ใ€‚

็Ÿญ็ธฎใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใฏใ€ใ™ในใฆใฎ้–‹็™บ่€…ใŒ่€ƒๆ…ฎใ™ในใๅฎŸ่ทตใงใ™ใ€‚ ใ‚ณใƒผใƒ‰ใ‚’ๆ›ธใ้€ŸๅบฆใŒๅ‘ไธŠใ™ใ‚‹ใ ใ‘ใงใชใใ€ใƒฌใƒ“ใƒฅใƒผใ™ใ‚‹่กŒๆ•ฐใŒๆธ›ใ‚‹ใŸใ‚ใ€้–“้•ใ„ใ‚’็Šฏใ™ๅฏ่ƒฝๆ€งใ‚‚ๆธ›ใ‚Šใพใ™ใ€‚ ใ“ใ‚Œใ‚’ๅฎŸ่ฃ…ใ™ใ‚‹ใซใฏใ„ใใคใ‹ใฎๆ–นๆณ•ใŒใ‚ใ‚Šใพใ™ใŒใ€็‰นใซๆœ€ใ‚‚ไธ€่ˆฌ็š„ใงๅŠน็Ž‡็š„ใชๆ–นๆณ•ใซ้‡็‚นใ‚’็ฝฎใๅฟ…่ฆใŒใ‚ใ‚Šใพใ™ใ€‚ ๅˆฉ็‚นใฏๆ˜Žใ‚‰ใ‹ใงใ™ใ€‚ ใ‚ณใƒผใƒ‰ใฎ้‡ใ‚’ๆธ›ใ‚‰ใ—ใ€ใ‚จใƒฉใƒผใฎๅฏ่ƒฝๆ€งใ‚’ๆธ›ใ‚‰ใ—ใ€ๅฏ่ชญๆ€งใ‚’ๅ‘ไธŠใ•ใ›ใ€ใƒ‘ใƒ•ใ‚ฉใƒผใƒžใƒณใ‚นใ‚’ๅ‘ไธŠใ•ใ›ใพใ™ใ€‚

// Longhand
let a;
if (b) {
  a = c;
} else {
  a = d;
}

// Shorthand
let a = b ? c : d;

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ๅๅฟœใพใŸใฏ

-
ใ‚‚ใกใ‚ใ‚“๏ผ ใ“ใ“ใŒ React ใƒ™ใƒผใ‚นใฎ JavaScript ่จ˜ไบ‹ใฎๅง‹ใพใ‚Šใงใ™ใ€‚

React ใฎๅ†…้ƒจๅ‹•ไฝœใ‚’็†่งฃใ™ใ‚‹ใ“ใจใฏใ€ใ“ใฎ JavaScript ใƒฉใ‚คใƒ–ใƒฉใƒชใ‚’ๅบƒ็ฏ„ๅ›ฒใซไฝฟ็”จใ™ใ‚‹ไบบใซใจใฃใฆ้žๅธธใซ้‡่ฆใงใ™ใ€‚ React ใฏใ€ใ‚ทใƒณใ‚ฐใƒซใƒšใƒผใ‚ธ ใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณใฎใƒฆใƒผใ‚ถใƒผ ใ‚คใƒณใ‚ฟใƒผใƒ•ใ‚งใ‚คใ‚นใฎ่จญ่จˆใซไฝฟ็”จใ•ใ‚Œใ‚‹ใ‚ชใƒผใƒ—ใƒณใ‚ฝใƒผใ‚นใฎใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ JavaScript ใƒฉใ‚คใƒ–ใƒฉใƒชใงใ™ใ€‚ ใ“ใ‚Œใฏใ€MVC (Model-View-Controller) ใƒขใƒ‡ใƒซใฎใƒ“ใƒฅใƒผๅฑคใงใ™ใ€‚

็ถšใใ‚’่ชญใ‚€

่งฃๆฑบๆธˆใฟ: ็ด ๆ™ดใ‚‰ใ—ใ„ใƒ•ใ‚ฉใƒณใƒˆใ‚’่ฟฝๅŠ 

ๆใ‚ใ—ใ„ใƒ•ใ‚ฉใƒณใƒˆ ใ‚ฆใ‚งใƒ–ใ‚ตใ‚คใƒˆใ‚’้–‹็™บใ™ใ‚‹ใจใใซ้žๅธธใซไพฟๅˆฉใชใƒ„ใƒผใƒซใงใ™ใ€‚ ใ“ใ‚Œใฏใ‚นใ‚ฑใƒผใƒฉใƒ–ใƒซใชใƒ™ใ‚ฏใ‚ฟใƒผ ใ‚ขใ‚คใ‚ณใƒณใฎ่†จๅคงใชใƒฉใ‚คใƒ–ใƒฉใƒชใงใ‚ใ‚Šใ€้–‹็™บ่€…ใŒใ‚ใ‚‰ใ‚†ใ‚‹ Web ใƒšใƒผใ‚ธใฎ็พŽใ—ใ•ใ‚’ใ‚ซใ‚นใ‚ฟใƒžใ‚คใ‚บใ—ใฆๅ‘ไธŠใ•ใ›ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚ ใ“ใ‚Œใ‚’ JavaScript ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใซ่ฟฝๅŠ ใ™ใ‚‹ใจใ€ใ‚ตใ‚คใƒˆใฎ่ฆ–่ฆš็š„ใซ้ญ…ๅŠ›็š„ใชใ‚‚ใฎใซใชใ‚‹ใ ใ‘ใงใชใใ€ใ‚คใƒณใ‚ฟใƒฉใ‚ฏใƒ†ใ‚ฃใƒ–ใชๆฉŸ่ƒฝใ‚‚ๅ‘ไธŠใ—ใพใ™ใ€‚ ใ“ใฎ่จ˜ไบ‹ใงใฏใ€Font Awesome ใ‚’ JavaScript ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใซ็ต„ใฟ่พผใ‚€ใƒ—ใƒญใ‚ปใ‚นใซใคใ„ใฆ่ชฌๆ˜Žใ—ใพใ™ใ€‚

็ถšใใ‚’่ชญใ‚€