inflearn logo
็Ÿฅ่ญ˜ๅ…ฑๆœ‰
inflearn logo

[้›ปๅญๆ›ธ็ฑ] 1ไธ‡ๅ††ใงๅญฆใถJavaScript โ€” ๆ–‡ๆณ•ใ‹ใ‚‰ๅฎŸ่ทตUIใพใง

ใ“ใ‚“ใซใกใฏใ€4ๅนด็›ฎใฎใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใ‚จใƒณใ‚ธใƒ‹ใ‚ขใฎใ‚ซใƒ ใ‚ธใƒฃ๏ผˆใ˜ใ‚ƒใŒใ„ใ‚‚๏ผ‰ใงใ™ใ€‚ ็งใŒๅˆใ‚ใฆJavaScriptใ‚’ๅญฆใ‚“ใ ๆ™‚ใฎใ“ใจใ‚’ๆ€ใ„่ฟ”ใ™ใจใ€YouTubeใ‚„ๆœฌใ‚’่ฆ‹ใชใŒใ‚‰ใ‚ณใƒผใƒ‰ใ‚’ๅ†™ใ—ใฆใ„ใ‚‹ๆ™‚ใฏใ™ในใฆ็†่งฃใ—ใŸใคใ‚‚ใ‚Šใซใชใฃใฆใ„ใŸใฎใซใ€ใ„ใ–็œŸใฃ็™ฝใชใ‚จใƒ‡ใ‚ฃใ‚ฟใ‚’้–‹ใใจ้ ญใŒ็œŸใฃ็™ฝใซใชใฃใฆใ—ใพใ†็ตŒ้จ“ใŒไฝ•ๅบฆใ‚‚ใ‚ใ‚Šใพใ—ใŸใ€‚ ๆœ€ๅˆใฏใŸใ ใ‚ฐใ‚ฐใฃใฆ่ฆ‹ใคใ‘ใŸใ‚ณใƒผใƒ‰ใ‚’ใ‚ณใƒ”ใƒผ๏ผ†ใƒšใƒผใ‚นใƒˆใ™ใ‚‹ใ“ใจใซๅฟ…ๆญปใงใ—ใŸใ€‚ใใฎใŸใ‚ใ€ใ‚จใƒฉใƒผใŒ็™บ็”Ÿใ™ใ‚‹ใจใฉใ“ใ‹ใ‚‰ๆ‰‹ใ‚’ใคใ‘ใ‚Œใฐใ„ใ„ใฎใ‹ๅˆ†ใ‹ใ‚‰ใšใ€ๅพนๅคœใ‚’ใ—ใฆไฝ•ๆ—ฅใ‚‚ๆŒซๆŠ˜ใ‚’ๅ‘ณใ‚ใ†ใ“ใจใ‚‚ใ‚ใ‚Šใพใ—ใŸใ€‚ใใฎๆ™‚ใ€่บซใซๆŸ“ใฟใฆๆ‚Ÿใ‚Šใพใ—ใŸใ€‚ใ€Œไป–ไบบใฎใ‚ณใƒผใƒ‰ใ‚’100ๅ›žใ‚ณใƒ”ใƒผใ™ใ‚‹ใ‚ˆใ‚Šใ‚‚ใ€่‡ชๅˆ†ใงๅŽŸ็†ใ‚’็†่งฃใ—ใฆ1่กŒๆ›ธใ„ใฆใฟใ‚‹ใ“ใจใ“ใใŒๆœฌๅฝ“ใฎๅฎŸๅŠ›ใ ใ€ใจใ„ใ†ใ“ใจใ‚’ใ€‚ ๅคšใใฎๅ…ฅ้–€่€…ใฎๆ–นใ€…ใŒใ€JavaScriptใฎ้ซ˜ใ„ๅฃใ‚’ๅ‰ใซใ“ใฎใ‚ˆใ†ใซๆ‚ฉใ‚“ใงใ„ใพใ™ใ€‚ ๐Ÿšจ "HTML/CSSใง็”ป้ขใฏ็ถบ้บ—ใซไฝœใ‚ŒใŸใ‘ใ‚Œใฉใ€ๅ‹•ใ‹ใใ†ใจใ™ใ‚‹ใจ้€”ๆ–นใซๆšฎใ‚Œใฆใ—ใพใ„ใพใ™ใ€‚" ๐Ÿšจ "ๅค‰ๆ•ฐใ‚„้–ขๆ•ฐใฎๆ–‡ๆณ•ใฏๅ…จ้ƒจ่ฆšใˆใŸใ‘ใ‚Œใฉใ€ใ“ใ‚Œใ‚’ๅฎŸๆˆฆใงใฉใ†็ต„ใฟๅˆใ‚ใ›ใ‚Œใฐใ„ใ„ใฎใ‹ๅˆ†ใ‹ใ‚Šใพใ›ใ‚“ใ€‚" ๐Ÿšจ "ใ‚คใƒ™ใƒณใƒˆใƒใƒ–ใƒชใƒณใ‚ฐใ€DOMๆ“ไฝœใจใ„ใฃใŸ็”จ่ชžใ‚’่žใใ ใ‘ใง้ ญใŒ็—›ใใชใ‚Šใพใ™ใ€‚" ใใ“ใงใ€ใ“ใฎ่ฌ›็พฉใ‚’ๆบ–ๅ‚™ใ—ใพใ—ใŸใ€‚็งใŒๆ•ฐๅคšใใฎ่ฉฆ่กŒ้Œฏ่ชคใฎๆœซใซ็ฟ’ๅพ—ใ—ใŸใ€Œๆœ€ใ‚‚็ขบๅฎŸใช่ฟ‘้“ใ€ใ ใ‘ใ‚’ๆ•ด็†ใ—ใฆใŠไผใˆใ—ใพใ™ใ€‚ ่ณ‡ๆ–™ใ‚’ๆบ–ๅ‚™ใ™ใ‚‹ใซใ‚ใŸใฃใฆใ€้›ฃใ—ใ„้–‹็™บ็”จ่ชžใ‚’ไธฆใน็ซ‹ใฆใ‚‹ใ“ใจใฏใ—ใพใ›ใ‚“ใงใ—ใŸใ€‚ๅˆ†ๅŽšใ„ๅฐ‚้–€ๆ›ธใซๅ‡บใฆใใ‚‹ใ‚ˆใ†ใชใ€ไปŠใ™ใใซใฏไฝฟใ‚ใชใ„ๆ–‡ๆณ•ใฏๆ€ใ„ๅˆ‡ใฃใฆๆจใฆใพใ—ใŸใ€‚ไปฃใ‚ใ‚Šใซใ€ๅฎŸๅ‹™ใงๅ‘ผๅธใ‚’ใ™ใ‚‹ใ‚ˆใ†ใซไฝฟใ†ๆ ธๅฟƒ็š„ใชๅŽŸ็†ใ‚’ใ€ใ€Œใƒ™ใƒซใƒˆใ‚ณใƒณใƒ™ใ‚ขใ€ใ‚„ใ€Œ็ตตใฎๅ…ทใฎใƒ‘ใƒฌใƒƒใƒˆใ€ใจใ„ใฃใŸๆ—ฅๅธธ็š„ใชๆฏ”ๅ–ฉใ‚’้€šใ—ใฆใ€็š†ใ•ใ‚“ใฎ้ ญใฎไธญใซ็›ดๆ„Ÿ็š„ใซๅฉใ่พผใฟใพใ™ใ€‚ ใ“ใฎ่ฌ›็พฉใงใฏใ€ๅ˜ใซ็†่ซ–ใ ใ‘ใ‚’ๅญฆใถใฎใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚ ็†่ซ–ใ‚’ๅญฆใ‚“ใ ใ‚‰ใ™ใใซใ€ใ‚ขใ‚ณใƒผใƒ‡ใ‚ฃใ‚ชใƒณใ€ใ‚ฟใƒ–ใƒกใƒ‹ใƒฅใƒผใ€ใƒ€ใƒผใ‚ฏใƒขใƒผใƒ‰ใฎๅˆ‡ใ‚Šๆ›ฟใˆใชใฉใ€ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใฎๅฎŸๅ‹™ใงๅฟ…ใš้ญ้‡ใ™ใ‚‹4ใคใฎๆ ธๅฟƒ็š„ใชUIใ‚’ใ€็งใจไธ€็ท’ใซใ‚ผใƒญใ‹ใ‚‰็›ดๆŽฅไฝœใฃใฆใฟใพใ™ใ€‚ ่ฌ›็พฉใ‚’ๅฎŒ่ตฐใ—ใŸๅพŒใฏใ€ใ‚‚ใ†ไป–ไบบใฎใ‚ณใƒผใƒ‰ใ‚’ใ‚ณใƒ”ใƒผใ—ใฆ็ฅˆใ‚ŠใชใŒใ‚‰ๅฎŸ่กŒใƒœใ‚ฟใƒณใ‚’ๆŠผใ™ใ‚ˆใ†ใชไบบใงใฏใชใใชใฃใฆใ„ใ‚‹ใฏใšใงใ™ใ€‚็”ป้ขใ‚’ใฉใ†ๆง‹ๆˆใ™ใ‚‹ใ‹ใ‚’่‡ชใ‚‰่จญ่จˆใ—ใ€่‡ชๅˆ†ใฎๆ„ๅ›ณ้€šใ‚ŠใซJavaScriptใฎใ‚ณใƒผใƒ‰ใ‚’ๆ›ธใ้€ฒใ‚ใฆใ„ใ‘ใ‚‹ใ€ๆœฌ็‰ฉใฎใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใ‚จใƒณใ‚ธใƒ‹ใ‚ขใธใจ็”Ÿใพใ‚Œๅค‰ใ‚ใ‚‹ใ“ใจใงใ—ใ‚‡ใ†ใ€‚ ็งใฎๅฎŸๅ‹™ใƒŽใ‚ฆใƒใ‚ฆใ‚’ใ™ในใฆ่ฉฐใ‚่พผใฟใพใ—ใŸใ€‚็œŸใฃ็™ฝใชใ‚จใƒ‡ใ‚ฃใ‚ฟใฎๅ‰ใงใ€ใ‚‚ใ†็ซ‹ใกๆญขใพใ‚‰ใชใ„ใงใใ ใ•ใ„ใ€‚ใ•ใ‚ใ€ๅง‹ใ‚ใ‚‹ๆ™‚้–“ใงใ™ใ€‚

9ๅ ใŒๅ—่ฌ›ไธญใงใ™ใ€‚

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

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

frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y
frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y
ใพใ ่ณชๅ•ใŒๆŠ•็จฟใ•ใ‚Œใฆใ„ใพใ›ใ‚“ใ€‚
ๆœ€ๅˆใฎ่ณชๅ•ใ‚’ๆŠ•็จฟใ—ใฆใ€ใ‚คใƒณใƒ•ใƒฉใƒณใจไธ€็ท’ใซๆˆ้•ทใ—ใพใ—ใ‚‡ใ†๏ผ

ๆœŸ้–“้™ๅฎšใ‚ปใƒผใƒซ

๏ฟฅ903

28%

๏ฟฅ1,264