Skip to content

React / Next.js ๅ…ฅ้–€

React (React.js) ใจใฏใ€Meta (ๆ—ง Facebook) ใŒ้–‹็™บใ—ใŸ JavaScript ใฎ UI ๆง‹็ฏ‰ใƒฉใ‚คใƒ–ใƒฉใƒชใงใ‚ใ‚‹ใ€‚

Overview

React

Web ใฎใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰ใ‚’ HTML, CSS, JavaScript ใฎใฟใง้–‹็™บใ™ใ‚‹ใจใ€DOM ๆ“ไฝœใ‚’่กŒใ†ๅฟ…่ฆใŒใ‚ใ‚Šใ€ใ‚ณใƒผใƒ‰ใŒ้•ทใใชใฃใŸใจใใซ้›ฃ่งฃใซใชใ‚‹ไธŠใซใƒฌใƒณใƒ€ใƒชใƒณใ‚ฐ (ๆ็”ป) ใฎๅŠน็އใŒๆ‚ชใใชใ‚‹ใ€‚ ใใ“ใงใ€React ใงใฏใ€ใ€Œใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใ€ใจใ€ŒไปฎๆƒณDOMใ€ใจใ„ใ†๏ผ’ใคใซใ‚ˆใฃใฆ็›ดๆ„Ÿ็š„ใช้–‹็™บใ‚’่กŒใˆใ‚‹ใ‚ˆใ†ใซใ—ใฆใ„ใ‚‹ใ€‚

  • ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆ : ใƒ˜ใƒƒใƒ€ใƒผใ‚„ใƒ•ใƒƒใ‚ฟใƒผใ€ใƒกใ‚คใƒณใฎใ‚ณใƒณใƒ†ใƒณใƒ„ใจใ„ใฃใŸ Web ใƒšใƒผใ‚ธใ‚’ๆง‹ๆˆใ™ใ‚‹ใƒ‘ใƒผใƒ„ใ‚’ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใจใ„ใ†ๅ˜ไฝใงๆ‰ฑใ„ใ€ใใ‚Œใ‚‰ใ‚’็ต„ใฟๅˆใ‚ใ›ใ‚‹ใ“ใจใงใƒšใƒผใ‚ธใ‚’ๆง‹็ฏ‰ใ™ใ‚‹
  • ไปฎๆƒณ DOM (Virtual DOM) : ็”ป้ขใ‚’ๅŠน็އ็š„ใซๆ็”ปใƒปๆ›ดๆ–ฐใ™ใ‚‹ใŸใ‚ใฎไป•็ต„ใฟใงใ€Web ใƒšใƒผใ‚ธใฎ DOM ใ‚’ JavaScript ใ‹ใ‚‰็›ดๆ„Ÿ็š„ใซๆ‰ฑใˆใ‚‹ใ‚ˆใ†ใซไปฎๆƒณ็š„ใซ็”Ÿๆˆใ—ใŸ DOM

Web ใฎใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บใ‚’่กŒใ†้š›ใซใ€React ใจใ„ใ† UI ๆง‹็ฏ‰ใƒฉใ‚คใƒ–ใƒฉใƒชใ‚’ๅฐŽๅ…ฅใ™ใ‚‹ใ“ใจใงใ€HTML, CSS, JavaScript ใ ใ‘ใงๆ›ธใใ‚ˆใ‚Šใ‚‚ๅŠน็އ็š„ใซ้–‹็™บใงใใ‚‹ใ‚ˆใ†ใซใชใ‚‹ใ€‚่ฉณใ—ใใฏ React ๅ…ฌๅผใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ‚’ๅ‚็…งใ™ใ‚‹ใ€‚

Next.js

็พๅœจใ€React ใ‚’ๅฐŽๅ…ฅใ™ใ‚‹้š›ใซใฏใ€React ใฎ็ดฐใ‹ใ„่จญๅฎšใ‚„่ค‡้›‘ใชไป•็ต„ใฟใ‚’็œ็•ฅใ™ใ‚‹ใŸใ‚ใซใ€Œใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใ€ใ‚’ไฝฟใ†ใ“ใจใŒๅ…ฌๅผใงๆŽจๅฅจใ•ใ‚Œใฆใ„ใ‚‹ใ€‚ React ใฎใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใซใ‚‚ๆง˜ใ€…ใชใ‚‚ใฎใŒใ‚ใ‚‹ใŒใ€ใ“ใฎใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใงใฏไปฃ่กจ็š„ใช React ใฎใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใงใ‚ใ‚‹ Next.js ใ‚’ๅˆฉ็”จใ™ใ‚‹ใ€‚

Contents

1Next.js ็’ฐๅขƒๆง‹็ฏ‰React ใฎใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใงใ‚ใ‚‹ Next.js ใ‚’ๅฐŽๅ…ฅใ—ใ€็ฐกๅ˜ใช UI ใฎๆง‹็ฏ‰ใ‚’่กŒใ†ใ€‚
2
3
4
5