ã¬ã¬ã·ãŒãªReactã¢ããªã±ãŒã·ã§ã³ãã¢ãã³ãã¿ãŒã³ãžæ®µéçã«ã¢ããã°ã¬ãŒãããããã®å æ¬çã¬ã€ããã°ããŒãã«ãªéçºããŒã ã®ããã«ãäžæãæå°éã«æããå¹çãæå€§åããŸãã
Reactã®æ®µéçç§»è¡ïŒã¬ã¬ã·ãŒããã¢ãã³ãã¿ãŒã³ãžã®ããã²ãŒã·ã§ã³
ãŠã§ãéçºã®ãã€ãããã¯ãªäžçã§ã¯ããã¬ãŒã ã¯ãŒã¯ãã©ã€ãã©ãªã¯æ¥éã«é²åããŸãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®åºç€ã§ããReactãäŸå€ã§ã¯ãããŸããããã®ç¶ç¶çãªé©æ°ã¯ã匷åãªæ°æ©èœãæ¹åãããããã©ãŒãã³ã¹ããããŠåäžããéçºè äœéšããããããŸããããã¯ãšããµã€ãã£ã³ã°ãªããšã§ããããã®é²åã¯ãå€ãReactã®ããŒãžã§ã³ããã¿ãŒã³ã§æ§ç¯ãããå€§èŠæš¡ã§é·æã«ãããã¢ããªã±ãŒã·ã§ã³ãç¶æããŠããçµç¹ã«ãšã£ãŠã倧ããªèª²é¡ãæç€ºããŸããåé¡ã¯ãæ°ãããã®ãæ¡çšããããšã ãã§ãªããããžãã¹éå¶ãäžæããããè«å€§ãªã³ã¹ãããããããå®å®æ§ãæãªãããšãªããå€ããã®ããã©ã®ããã«ç§»è¡ããããšããããšã§ãã
ãã®ããã°èšäºã§ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®ããã®ã段éçç§»è¡ããšããéèŠãªã¢ãããŒãã«ã€ããŠæ·±ãæãäžããŸãããããã°ãã³ã¢ãããŒãããšåŒã°ããå®å šãªæžãçŽãããªããªã¹ã¯ã«æºã¡ãŠããã®ãããããŠæ®µéçã§ã€ã³ã¯ãªã¡ã³ã¿ã«ãªæŠç¥ããªãçŸå®çãªéçãªã®ããæ¢ããŸããç§ãã¡ã®æ ã¯ãæ žãšãªãååãå®è·µçãªæŠç¥ããããŠé¿ããã¹ãäžè¬çãªèœãšã穎ãã«ããŒããäžçäžã®éçºããŒã ãReactã¢ããªã±ãŒã·ã§ã³ãå¹ççãã€å¹æçã«è¿ä»£åããããã®ç¥èãæäŸããŸããããªãã®ã¢ããªã±ãŒã·ã§ã³ãæ°å¹Žåã®ãã®ã§ããããšã10å¹Žéžæã§ããããšã段éçç§»è¡ãçè§£ããããšã¯ããã®å¯¿åœãšç¶ç¶çãªæåã確å®ã«ããããã®éµã§ãã
ãªã段éçç§»è¡ãªã®ãïŒãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã«ãããå¿ é èŠä»¶
ãã©ã®ããã«ãã«é£ã³èŸŒãåã«ãããªãããçè§£ããããšãéèŠã§ããå€ãã®çµç¹ã¯ãèæœåããã³ãŒãããŒã¹ã«çŽé¢ãããšããæåã¯å šé¢çãªæžãçŽããæ€èšããŸããã¬ã¬ã·ãŒã³ãŒãã®å¶çŽããè§£æŸããããŒãããå§ãããšããé åã¯åŒ·ãã§ããããããæŽå²ã¯äºç®ãè¶ éããçŽæã«éã«åããããããã¯ææªã®å Žåãå®å šã«å€±æããæžãçŽããããžã§ã¯ãã®èŠåçãªç©èªã§æºã¡ãŠããŸããå€§èŠæš¡ãªãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠãããã°ãã³æžãçŽãã«äŒŽããªã¹ã¯ã¯ããã°ãã°æ³å€ã«é«ããã®ã§ãã
ã¬ã¬ã·ãŒReactã¢ããªã±ãŒã·ã§ã³ã«ãããå ±éã®èª²é¡
å€ãReactã¢ããªã±ãŒã·ã§ã³ã¯ãè¿ä»£åã®å¿ èŠæ§ã瀺ãããŸããŸãªå åã瀺ãããšããããããŸãïŒ
- æä»£é ãã®äŸåé¢ä¿ãšã»ãã¥ãªãã£è匱æ§ïŒã¡ã³ããã³ã¹ãããŠããªãã©ã€ãã©ãªã¯ãé倧ãªã»ãã¥ãªãã£ãªã¹ã¯ããããããæ°ãããã©ãŠã¶æ©èœãåºç€ãšãªãã€ã³ãã©ã¹ãã©ã¯ãã£ãšã®äºææ§ãæ¬ ããŠããããšããããããŸãã
- Hooks以åã®ãã¿ãŒã³ïŒã¯ã©ã¹ã³ã³ããŒãã³ããé«éã³ã³ããŒãã³ãïŒHOCïŒããŸãã¯Render Propsã«å€§ããäŸåããã¢ããªã±ãŒã·ã§ã³ã¯ãåé·ã§èªã¿ã«ãããHooksãæã€é¢æ°ã³ã³ããŒãã³ããšæ¯èŒããŠããã©ãŒãã³ã¹ãå£ãããšããããŸãã
- è€éãªç¶æ 管çïŒå ç¢ã§ã¯ãããã®ã®ãå€ãReduxã®å®è£ ãã«ã¹ã¿ã ã®ç¶æ 管çãœãªã¥ãŒã·ã§ã³ã¯é床ã«è€éã«ãªããéå°ãªãã€ã©ãŒãã¬ãŒããå°é£ãªãããã°ããããŠæ°ããéçºè ã«ãšã£ãŠæ¥ãªåŠç¿æ²ç·ã«ã€ãªããããšããããŸãã
- é ããã«ãæéãšç ©éãªããŒã«ïŒã¬ã¬ã·ãŒãªWebpackã®èšå®ãæä»£é ãã®ãã«ããã€ãã©ã€ã³ã¯ãéçºãµã€ã¯ã«ãå€§å¹ ã«é ãããéçºè ã®çç£æ§ãšãã£ãŒãããã¯ã«ãŒãã«åœ±é¿ãäžããå¯èœæ§ããããŸãã
- æé©ã§ãªãããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒäœéšïŒå€ãã³ãŒãã¯ãææ°ã®ãã©ãŠã¶APIãReactã®ææ°ã®æé©åãæŽ»çšããŠããªãå¯èœæ§ããããèªã¿èŸŒã¿æéã®é å»¶ãããã¡ãªãã¢ãã¡ãŒã·ã§ã³ããããŠå¿çæ§ã®äœããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã«ã€ãªãããŸãã
- 人æã®ç²åŸãšç¶æã®é£ããïŒéçºè ãç¹ã«æ°åè ã¯ããŸããŸãçŸä»£çãªæè¡ã§åãæ©äŒãæ±ããŠããŸããæä»£é ãã®æè¡ã¹ã¿ãã¯ã¯ãæ¡çšãå°é£ã«ããé¢è·çãé«ããå¯èœæ§ããããŸãã
- é«ãæè¡çè² åµïŒé·å¹Žã«ããã£ãŠèç©ãããæè¡çè² åµã¯ãä¿å®ãå°é£ãªã³ãŒããææžåãããŠããªãããžãã¯ããããŠå€åã«å¯Ÿããå šè¬çãªæµæãšããŠçŸããæ©èœéçºãé ããããšã©ãŒãèµ·ãããããããŸãã
段éçç§»è¡ãæ¯æããçç±
段éçç§»è¡ã¯ãå®å šãªæžãçŽããšã¯å¯Ÿç §çã«ãããçŸå®çã§äžæã®å°ãªãè¿ä»£åãžã®éãæäŸããŸããããã¯ãã¢ããªã±ãŒã·ã§ã³ããŒãããåæ§ç¯ããã®ã§ã¯ãªããé²åãããããšã§ãããããã»ãšãã©ã®ãšã³ã¿ãŒãã©ã€ãºç°å¢ã§å¥œãŸããã¢ãããŒãã§ããçç±ã¯æ¬¡ã®ãšããã§ãïŒ
- ãªã¹ã¯ãšäžæãæå°åããïŒå°ããã管çããã倿Žãè¡ãããšã§ãé倧ãªãã°ãã·ã¹ãã 忢ãåŒãèµ·ããå¯èœæ§ãæžãããŸããããžãã¹éå¶ã¯äžæãªãç¶ç¶ã§ããŸãã
- ç¶ç¶çãªããªããªãŒãå¯èœã«ããïŒç§»è¡ãé²è¡äžã§ãã£ãŠããæ°æ©èœããã°ä¿®æ£ãå±éã§ããã¢ããªã±ãŒã·ã§ã³ããŠãŒã¶ãŒã«ãšã£ãŠäŸ¡å€ãããã®ã§ããç¶ããããšãä¿èšŒããŸãã
- åŽåãæéãšãšãã«åæ£ãããïŒå€§èŠæš¡ã§ãªãœãŒã¹ã倧éã«æ¶è²»ãããããžã§ã¯ãã®ä»£ããã«ãç§»è¡ã¯éåžžã®éçºãµã€ã¯ã«ã«çµ±åãããäžé£ã®ç®¡çå¯èœãªã¿ã¹ã¯ã«ãªããŸããããã«ãããããè¯ããªãœãŒã¹é åãšäºæž¬å¯èœãªã¿ã€ã ã©ã€ã³ãå¯èœã«ãªããŸãã
- ããŒã ã®åŠç¿ãšæ¡çšãä¿é²ããïŒéçºè ã¯æ°ãããã¿ãŒã³ã段éçã«åŠã³ãé©çšããããšãã§ãããããå®å šãªæè¡ã·ããã«äŒŽãæ¥ãªåŠç¿æ²ç·ãç·©åããŸããããã«ãããå éšã®å°éç¥èãèªç¶ã«æ§ç¯ãããŸãã
- äºæ¥ç¶ç¶æ§ãç¶æããïŒã¢ããªã±ãŒã·ã§ã³ã¯ããã»ã¹å šäœãéããŠçšŒåãç¶ããåçããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ãã®æå€±ãé²ããŸãã
- æè¡çè² åµã«æ®µéçã«å¯ŸåŠããïŒé·æã«ãããæžãçŽãäžã«ããã«å€ãã®è² åµãèç©ããã®ã§ã¯ãªããæ®µéçç§»è¡ã¯ç¶ç¶çãªè¿æžãå¯èœã«ããã³ãŒãããŒã¹ãæéãšãšãã«ããå¥å šã«ããŸãã
- æ©æã®äŸ¡å€å®çŸïŒããã©ãŒãã³ã¹ã®åäžãéçºè äœéšãä¿å®æ§ãªã©ã®å©ç¹ã¯ã段éçãªããã»ã¹ã§ã¯ããã«æ©æã«å®çŸããã³å®èšŒã§ããè¯å®çãªåŒ·åãæäŸããç¶ç¶çãªæè³ãæ£åœåããŸãã
æåããæ®µéçç§»è¡ã®åºæ¬åå
æåããæ®µéçç§»è¡ã¯ãåã«æ°ããæè¡ãé©çšããããšã ãã§ã¯ãããŸãããããã¯æŠç¥çãªèãæ¹ãæ¡çšããããšã§ãããããã®åºæ¬ååã¯ã广çãªè¿ä»£åã®åãçµã¿ãæ¯ããŸãïŒ
ã€ã³ã¯ãªã¡ã³ã¿ã«ãªãªãã¡ã¯ã¿ãªã³ã°
段éçç§»è¡ã®åºç€ã¯ãã€ã³ã¯ãªã¡ã³ã¿ã«ãªãªãã¡ã¯ã¿ãªã³ã°ã®ååã§ããããã¯ãå€éšã®æ¯ãèããå€ããããšãªãã³ãŒãããŒã¹ãæ¹åãããå°ããã¢ãããã¯ãªå€æŽãè¡ãããšãæå³ããŸããåã¹ãããã¯ã管çå¯èœãªäœæ¥åäœã§ããã培åºçã«ãã¹ããããç¬ç«ããŠãããã€ãããã¹ãã§ããäŸãã°ãããŒãžå šäœãæžãçŽã代ããã«ããã®ããŒãžäžã®äžã€ã®ã³ã³ããŒãã³ããã¯ã©ã¹ã³ã³ããŒãã³ããã颿°ã³ã³ããŒãã³ãã«å€æããæ¬¡ã«å¥ã®ã³ã³ããŒãã³ãããšããããã«çŠç¹ãåœãŠãŸãããã®ã¢ãããŒãã¯ãªã¹ã¯ãæžããããããã°ã容æã«ããé »ç¹ã§åœ±é¿ã®å°ãªããããã€ãå¯èœã«ããŸãã
åé¢ããŠå æãã
ã¢ããªã±ãŒã·ã§ã³ã®äžã§æ¯èŒçç¬ç«ããŠããããŸãã¯èªå·±å®çµããŠããéšåãç¹å®ããŸãããããã®ã¢ãžã¥ãŒã«ãæ©èœããŸãã¯ã³ã³ããŒãã³ãã¯ãæ©æç§»è¡ã®çæ³çãªåè£ã§ããããããåé¢ããããšã§ã倿Žãã³ãŒãããŒã¹å šäœã«åãŒãæ³¢å广ãæå°éã«æããŸããåé床ãé«ãïŒäžç·ã«å±ããèŠçŽ ïŒãã€çµå床ãäœãïŒã·ã¹ãã ã®ä»ã®éšåãžã®äŸåãæå°éïŒé åãæ¢ããŠãã ãããäŸãã°ããã€ã¯ãããã³ããšã³ãã¯ãç°ãªãããŒã ãã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãéšåãç¬ç«ããŠãå Žåã«ãã£ãŠã¯ç°ãªãæè¡ã§äœæ¥ãããããã€ããããšãå¯èœã«ããããšã§ããã®ååãçŽæ¥ãµããŒãããã¢ãŒããã¯ãã£ãã¿ãŒã³ã§ãã
ãã¥ã¢ã«ããŒãã£ã³ã° / ãã€ã¯ãããã³ããšã³ã
ãã倧ããªã¢ããªã±ãŒã·ã§ã³ã§ã¯ãå€ãã³ãŒãããŒã¹ãšæ°ããã³ãŒãããŒã¹ãåæã«å®è¡ããããšã¯åŒ·åãªæŠç¥ã§ããããã¯ããã€ã¯ãããã³ããšã³ããŸãã¯ãã¡ãµãŒããã¿ãŒã³ã®åäžã«ããããŸããŸãªæ¹æ³ã§éæã§ããŸããã»ãšãã©ã®ã«ãŒããåŠçããäž»èŠãªã¬ã¬ã·ãŒã¢ããªã±ãŒã·ã§ã³ããããããããŸããããæ°ããã¢ãã³ãªãã€ã¯ãããã³ããšã³ããç¹å®ã®æ©èœãã»ã¯ã·ã§ã³ãåŠçããŸããäŸãã°ãæ°ãããŠãŒã¶ãŒããã·ã¥ããŒãã¯ã¢ãã³ãªReactã§æ§ç¯ãããå¥ã®URLããæäŸãããããã¬ã¬ã·ãŒã¢ããªã±ãŒã·ã§ã³å ã«ããŠã³ããããåŸã ã«ããå€ãã®æ©èœãåŒãç¶ãã§ãããŸããããã«ãããã¢ããªã±ãŒã·ã§ã³å šäœã®å®å šãªç§»è¡ãäžåºŠã«åŒ·å¶ããããšãªããã¢ãã³ãªãã¿ãŒã³ã䜿çšããŠæ°æ©èœãéçºããã³ãããã€ã§ããŸãããµãŒããŒãµã€ãã«ãŒãã£ã³ã°ãWeb ComponentsããŸãã¯ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãªã©ã®æè¡ããã®å ±åãä¿é²ã§ããŸãã
æ©èœãã©ã°ãšA/Bãã¹ã
ç§»è¡ãããæ©èœã®å±éãå¶åŸ¡ããããšã¯ããªã¹ã¯è»œæžãšãã£ãŒãããã¯åéã®ããã«äžå¯æ¬ ã§ããæ©èœãã©ã°ïŒæ©èœãã°ã«ãšãåŒã°ããïŒã䜿çšãããšãç¹å®ã®ãŠãŒã¶ãŒã»ã°ã¡ã³ãããã¹ãç®çã§ç€Ÿå åãã«æ°æ©èœã®ãªã³/ãªããåãæ¿ããããšãã§ããŸããããã¯ç§»è¡äžã«éåžžã«è²Žéã§ãããæ°ããã³ãŒããç¡å¹ç¶æ ã§æ¬çªç°å¢ã«ãããã€ãããã®åŸã瀟å ããŒã ãããŒã¿ãã¹ã¿ãŒããããŠæçµçã«ã¯å šãŠãŒã¶ãŒããŒã¹ã«å¯ŸããŠåŸã ã«æå¹ã«ããããšãã§ããŸããA/Bãã¹ãã¯ãå€ãå®è£ ãšæ°ããå®è£ ã®ããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒäœéšãæ¯èŒã§ããããã«ããããšã§ããããããã«åŒ·åããç§»è¡æŠç¥ãå°ãããã®ããŒã¿é§ååã®æŽå¯ãæäŸããŸãã
ããžãã¹äŸ¡å€ãšæè¡çè² åµã«åºã¥ãåªå é äœä»ã
ã¢ããªã±ãŒã·ã§ã³ã®ãã¹ãŠã®éšåãåæã«ç§»è¡ããå¿ èŠã¯ãªãããŸãããããçããéèŠæ§ãæã€ããã§ããããŸãããããžãã¹äŸ¡å€ãšæè¡çè² åµã®ã¬ãã«ã®çµã¿åããã«åºã¥ããŠåªå é äœãä»ããŸããé »ç¹ã«æŽæ°ãããé åãã³ã¢ããžãã¹ãªãã¬ãŒã·ã§ã³ã«äžå¯æ¬ ãªé åããŸãã¯é倧ãªããã©ãŒãã³ã¹ã®ããã«ããã¯ãæç€ºããé åã¯ããªã¹ãã®äžäœã«ããã¹ãã§ããåæ§ã«ãç¹ã«ãã°ãå€ããä¿å®ãé£ããããŸãã¯æä»£é ãã®ãã¿ãŒã³ã®ããã«æ°æ©èœéçºã劚ããŠããã³ãŒãããŒã¹ã®éšåã¯ãæ©æè¿ä»£åã®åŒ·åãªåè£ã§ããéã«ãå®å®ããŠããŠãã£ãã«è§Šããããªãã¢ããªã±ãŒã·ã§ã³ã®éšåã¯ãç§»è¡ã®åªå é äœãäœããããããŸããã
ã¢ããã€ãŒãŒã·ã§ã³ã®ããã®äž»èŠãªæŠç¥ãšãã¯ããã¯
ååã念é ã«çœ®ããReactã¢ããªã±ãŒã·ã§ã³ã®ããŸããŸãªåŽé¢ãè¿ä»£åããããã®å®è·µçãªæŠç¥ãšç¹å®ã®ãã¯ããã¯ãæ¢ããŸãããã
ã³ã³ããŒãã³ãã¬ãã«ã®ç§»è¡ïŒã¯ã©ã¹ã³ã³ããŒãã³ãããHooksãæã€é¢æ°ã³ã³ããŒãã³ããž
ã¯ã©ã¹ã³ã³ããŒãã³ãããHooksãæã€é¢æ°ã³ã³ããŒãã³ããžã®ç§»è¡ã¯ãã¢ãã³Reactã«ãããæãåºæ¬çãªå€æŽã®äžã€ã§ããHooksã¯ã`this`ã®ãã€ã³ãã£ã³ã°ãã¯ã©ã¹ã®ã©ã€ããµã€ã¯ã«ã¡ãœããã®è€éããªãã«ãç¶æ ãå¯äœçšã管çããããã®ããç°¡æœã§ãèªã¿ããããåå©çšå¯èœãªæ¹æ³ãæäŸããŸãããã®ç§»è¡ã¯ãéçºè äœéšãšã³ãŒãã®ä¿å®æ§ãå€§å¹ ã«åäžãããŸãã
Hooksã®å©ç¹ïŒ
- å¯èªæ§ãšç°¡æœãïŒHooksã䜿çšãããšãããå°ãªãã³ãŒãã§èšè¿°ã§ãããããã³ã³ããŒãã³ãã®çè§£ãšæšè«ã容æã«ãªããŸãã
- åå©çšæ§ïŒã«ã¹ã¿ã Hooksã䜿çšãããšãé«éã³ã³ããŒãã³ããRender Propsã«é Œãããšãªããè€æ°ã®ã³ã³ããŒãã³ãéã§ã¹ããŒããã«ãªããžãã¯ãã«ãã»ã«åããŠåå©çšã§ããŸãããããã¯ã©ãããŒå°çã«ã€ãªããå¯èœæ§ããããŸãã
- é¢å¿ã®åé¢ã®åäžïŒåäžã®é¢å¿äºïŒäŸïŒããŒã¿ãã§ããïŒã«é¢é£ããããžãã¯ã¯ãç°ãªãã©ã€ããµã€ã¯ã«ã¡ãœããã«åæ£ãããã®ã§ã¯ãªãã`useEffect`ãã«ã¹ã¿ã Hookã«ãŸãšããããšãã§ããŸãã
ç§»è¡ããã»ã¹ïŒ
- åçŽãªã¯ã©ã¹ã³ã³ããŒãã³ããç¹å®ããïŒäž»ã«UIãã¬ã³ããªã³ã°ããæå°éã®ç¶æ ãŸãã¯ã©ã€ããµã€ã¯ã«ããžãã¯ãæã€ã¯ã©ã¹ã³ã³ããŒãã³ãããå§ããŸãããããã¯å€æãæãç°¡åã§ãã
- ã©ã€ããµã€ã¯ã«ã¡ãœããã`useEffect`ã«å€æããïŒ`componentDidMount`ã`componentDidUpdate`ã`componentWillUnmount`ããé©åãªäŸåé åãšã¯ãªãŒã³ã¢ãã颿°ãæã€`useEffect`ã«ãããã³ã°ããŸãã
- `useState`ãš`useReducer`ã«ããç¶æ 管çïŒåçŽãªç¶æ ã«ã¯`this.state`ãš`this.setState`ã`useState`ã«ãããè€éãªç¶æ ããžãã¯ã«ã¯`useReducer`ã«çœ®ãæããŸãã
- `useContext`ã«ããContextã®å©çšïŒ`Context.Consumer`ã`static contextType`ã`useContext` Hookã«çœ®ãæããŸãã
- ã«ãŒãã£ã³ã°ã®çµ±åïŒ`react-router-dom`ã䜿çšããŠããå Žåã`withRouter` HOCã`useNavigate`ã`useParams`ã`useLocation`ãªã©ã«çœ®ãæããŸãã
- HOCãã«ã¹ã¿ã Hooksã«ãªãã¡ã¯ã¿ãªã³ã°ããïŒHOCã«ã©ãããããããè€éãªããžãã¯ã«ã€ããŠã¯ããã®ããžãã¯ãåå©çšå¯èœãªã«ã¹ã¿ã Hooksã«æœåºããŸãã
ãã®ã³ã³ããŒãã³ãããšã®ã¢ãããŒãã«ãããããŒã ã¯ã³ãŒãããŒã¹ãçå®ã«è¿ä»£åããªãããHooksã®çµéšãåŸã ã«ç©ãããšãã§ããŸãã
ç¶æ 管çã®é²åïŒããŒã¿ãããŒã®å¹çå
ç¶æ 管çã¯ãããããè€éãªReactã¢ããªã±ãŒã·ã§ã³ã®éèŠãªåŽé¢ã§ããReduxã¯æ¯é çãªãœãªã¥ãŒã·ã§ã³ã§ãããããã®ãã€ã©ãŒãã¬ãŒãã¯ãç¹ã«ãã®å šèœåãå¿ èŠãšããªãã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠã¯è² æ ã«ãªãããšããããŸããã¢ãã³ãªãã¿ãŒã³ãšã©ã€ãã©ãªã¯ãç¹ã«ãµãŒããŒãµã€ãã®ç¶æ ã«å¯ŸããŠãããã·ã³ãã«ã§å¹ççãªä»£æ¿ææ®µãæäŸããŸãã
ã¢ãã³ãªç¶æ 管çã®éžæè¢ïŒ
- React Context APIïŒé »ç¹ã«å€æŽãããªãã¢ããªã±ãŒã·ã§ã³å šäœã®ç¶æ ããŸãã¯ããããããªãªã³ã°ãªãã§ã³ã³ããŒãã³ãããªãŒã®äžã«å ±æããå¿ èŠãããããŒã«ã©ã€ãºãããç¶æ ã«é©ããŠããŸããReactã«çµã¿èŸŒãŸããŠãããããŒãããŠãŒã¶ãŒèªèšŒã¹ããŒã¿ã¹ããŸãã¯ã°ããŒãã«èšå®ã«åªããŠããŸãã
- 軜éãªã°ããŒãã«ç¶æ ã©ã€ãã©ãªïŒZustand, JotaiïŒïŒãããã®ã©ã€ãã©ãªã¯ãã°ããŒãã«ç¶æ ã«å¯Ÿããããããªã¹ããªã¢ãããŒããæäŸããŸãããããã¯ãã°ãã°ReduxãããæèŠãå°ãªããã¹ãã¢ãäœæããã³æ¶è²»ããããã®ã·ã³ãã«ãªAPIãæäŸããŸããã°ããŒãã«ãªç¶æ ãå¿ èŠã ãããã€ã©ãŒãã¬ãŒãããªãã¥ãŒãµãŒããµãŒã¬ã®ãããªè€éãªæŠå¿µãé¿ãããã¢ããªã±ãŒã·ã§ã³ã«æé©ã§ãã
- React Query (TanStack Query) / SWRïŒãããã®ã©ã€ãã©ãªã¯ããµãŒããŒç¶æ 管çãé©åœçã«å€ããŸãããããã¯ãããŒã¿ãã§ããããã£ãã·ã³ã°ãåæãããã¯ã°ã©ãŠã³ãæŽæ°ãããã³ãšã©ãŒåŠçãæšæºã§åŠçããŸãããµãŒããŒãµã€ãã®é¢å¿äºãReduxã®ãããªæ±çšç¶æ ãããŒãžã£ãŒããç§»åããããšã§ãReduxã®è€éããšãã€ã©ãŒãã¬ãŒããå€§å¹ ã«åæžãããã°ãã°ãããå®å šã«åãé€ãããçã®ã¯ã©ã€ã¢ã³ããµã€ãç¶æ ã®ã¿ã管çããããã«ç°¡çŽ åã§ããŸããããã¯å€ãã®ã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠã²ãŒã ãã§ã³ãžã£ãŒã§ãã
ç§»è¡æŠç¥ïŒ
ã©ã®ã¿ã€ãã®ç¶æ ã管çããŠããããç¹å®ããŸãããµãŒããŒç¶æ ïŒAPIããã®ããŒã¿ïŒã¯ãReact Queryã®äž»èŠãªåè£ã§ããã°ããŒãã«ãªã¢ã¯ã»ã¹ãå¿ èŠãªã¯ã©ã€ã¢ã³ããµã€ãã®ç¶æ ã¯ãContextãŸãã¯è»œéã©ã€ãã©ãªã«ç§»åã§ããŸããæ¢åã®Reduxå®è£ ã«ã€ããŠã¯ãã¹ã©ã€ã¹ãŸãã¯ã¢ãžã¥ãŒã«ãäžã€ãã€ç§»è¡ããããšã«çŠç¹ãåœãŠããã®ããžãã¯ãæ°ãããã¿ãŒã³ã«çœ®ãæããŸããããã«ã¯ãããŒã¿ããã§ãããããå Žæãç¹å®ãããã®è²¬ä»»ãReact Queryã«ç§»åãããã®åŸã察å¿ããReduxã®ã¢ã¯ã·ã§ã³ããªãã¥ãŒãµãŒãããã³ã»ã¬ã¯ã¿ãŒãç°¡çŽ åãŸãã¯åé€ããããšããã°ãã°å«ãŸããŸãã
ã«ãŒãã£ã³ã°ã·ã¹ãã ã®æŽæ°ïŒReact Router v6ã®æ¡çš
ã¢ããªã±ãŒã·ã§ã³ãReact Routerã䜿çšããŠããå ŽåãããŒãžã§ã³6ïŒãŸãã¯ãã以éïŒãžã®ã¢ããã°ã¬ãŒãã¯ãããå¹ççã§Hookãã¬ã³ããªãŒãªAPIãæäŸããŸããããŒãžã§ã³6ã¯å€§å¹ ãªå€æŽãå°å ¥ãããã¹ããããã«ãŒãã£ã³ã°ãç°¡çŽ åãã`Switch`ã³ã³ããŒãã³ãã®å¿ èŠæ§ããªãããŸããã
äž»ãªå€æŽç¹ãšå©ç¹ïŒ
- ç°¡çŽ åãããAPIïŒããçŽæçã§åé·æ§ãå°ãªãã
- ãã¹ããããã«ãŒãïŒã«ãŒãå®çŸ©å ã§çŽæ¥ãã¹ããããUIã¬ã€ã¢ãŠãã®ãµããŒããåäžã
- Hooksãã¡ãŒã¹ãïŒ`useNavigate`ã`useParams`ã`useLocation`ã`useRoutes`ã®ãããªHooksã®å®å šãªæ¡çšã
ç§»è¡ããã»ã¹ïŒ
- `Switch`ã`Routes`ã«çœ®ãæããïŒv6ã®`Routes`ã³ã³ããŒãã³ãã¯ãã«ãŒãå®çŸ©ã®æ°ããã³ã³ãããšããŠæ©èœããŸãã
- ã«ãŒãå®çŸ©ãæŽæ°ããïŒã«ãŒãã¯ã`Routes`å ã§çŽæ¥`Route`ã³ã³ããŒãã³ãã䜿çšããŠå®çŸ©ããããã°ãã°`element`ããããã䜿çšãããŸãã
- `useHistory`ãã`useNavigate`ãžã®ç§»è¡ïŒ`useNavigate`ããã¯ããããã°ã©ã ã«ããããã²ãŒã·ã§ã³ã®ããã«`useHistory`ã眮ãæããŸãã
- URLãã©ã¡ãŒã¿ãšã¯ãšãªæååãæŽæ°ããïŒãã¹ãã©ã¡ãŒã¿ã«ã¯`useParams`ããã¯ãšãªãã©ã¡ãŒã¿ã«ã¯`useSearchParams`ã䜿çšããŸãã
- é å»¶èªã¿èŸŒã¿ïŒ`React.lazy`ãš`Suspense`ãçµ±åããŠã«ãŒããã³ãŒãåå²ããåæèªã¿èŸŒã¿ããã©ãŒãã³ã¹ãåäžãããŸãã
ãã®ç§»è¡ã¯ãç¹ã«ãã€ã¯ãããã³ããšã³ãã¢ãããŒãã䜿çšããŠããå Žåã«æ®µéçã«è¡ãããšãã§ããŸããæ°ãããã€ã¯ãããã³ããšã³ããæ°ããã«ãŒã¿ãŒãæ¡çšããäžæ¹ã§ãã¬ã¬ã·ãŒã·ã§ã«ã¯ãã®ããŒãžã§ã³ãç¶æããŸãã
ã¹ã¿ã€ãªã³ã°ãœãªã¥ãŒã·ã§ã³ïŒUIçŸèгã®ã¢ããã€ãŒãŒã·ã§ã³
Reactã«ãããã¹ã¿ã€ãªã³ã°ã¯ãBEMãçšããäŒçµ±çãªCSSãããCSS-in-JSã©ã€ãã©ãªããããŠãŠãŒãã£ãªãã£ãã¡ãŒã¹ãã®ãã¬ãŒã ã¯ãŒã¯ãŸã§ã倿§ãªé²åãéããŠããŸãããã¹ã¿ã€ãªã³ã°ãè¿ä»£åããããšã§ãä¿å®æ§ãããã©ãŒãã³ã¹ããããŠéçºè äœéšãåäžãããããšãã§ããŸãã
ã¢ãã³ãªã¹ã¿ã€ãªã³ã°ã®éžæè¢ïŒ
- CSS ModulesïŒCSSã¯ã©ã¹ã®ããŒã«ã«ã¹ã³ãŒããæäŸããååã®è¡çªãé²ããŸãã
- Styled Components / EmotionïŒJavaScriptã³ã³ããŒãã³ãå ã§çŽæ¥CSSãèšè¿°ã§ããCSS-in-JSã©ã€ãã©ãªã§ãåçãªã¹ã¿ã€ãªã³ã°æ©èœãšã³ã³ããŒãã³ããšã®ã¹ã¿ã€ã«ã®å ±åãæäŸããŸãã
- Tailwind CSSïŒHTML/JSXå ã§çŽæ¥äœã¬ãã«ã®ãŠãŒãã£ãªãã£ã¯ã©ã¹ãæäŸããããšã§ãè¿ éãªUIéçºãå¯èœã«ãããŠãŒãã£ãªãã£ãã¡ãŒã¹ãã®CSSãã¬ãŒã ã¯ãŒã¯ã§ããé«åºŠã«ã«ã¹ã¿ãã€ãºå¯èœã§ãå€ãã®å Žåãã«ã¹ã¿ã CSSãèšè¿°ããå¿ èŠããªããªããŸãã
ç§»è¡æŠç¥ïŒ
ãã¹ãŠã®æ°ããã³ã³ããŒãã³ããšæ©èœã«å¯ŸããŠæ°ããã¹ã¿ã€ãªã³ã°ãœãªã¥ãŒã·ã§ã³ãå°å ¥ããŸããæ¢åã®ã³ã³ããŒãã³ãã«ã€ããŠã¯ãå€§å¹ ãªä¿®æ£ãå¿ èŠãªå Žåããå°çšã®ã¹ã¿ã€ãªã³ã°ã¯ãªãŒã³ã¢ããã¹ããªã³ããéå§ãããå Žåã«ã®ã¿ãæ°ããã¹ã¿ã€ãªã³ã°ã¢ãããŒãã䜿çšããããã«ãªãã¡ã¯ã¿ãªã³ã°ããããšãæ€èšããŸããäŸãã°ãTailwind CSSãæ¡çšããå Žåãæ°ããã³ã³ããŒãã³ãã¯ããã§æ§ç¯ãããå€ãã³ã³ããŒãã³ãã¯æ¢åã®CSSãSassãä¿æããŸããæéãçµã€ã«ã€ããŠãå€ãã³ã³ããŒãã³ããä»ã®çç±ã§è§Šãããããªãã¡ã¯ã¿ãªã³ã°ããããããéã«ããã®ã¹ã¿ã€ãªã³ã°ãç§»è¡ã§ããŸãã
ãã«ãããŒã«ã®ã¢ããã€ãŒãŒã·ã§ã³ïŒWebpackããVite/Turbopackãž
ãã°ãã°Webpackã«åºã¥ããŠããã¬ã¬ã·ãŒãªãã«ãèšå®ã¯ãæéãšãšãã«é ãè€éã«ãªãããšããããŸããViteãTurbopackã®ãããªã¢ãã³ãªãã«ãããŒã«ã¯ããã€ãã£ãESã¢ãžã¥ãŒã«ïŒESMïŒãšæé©åãããã³ã³ãã€ã«ã掻çšããããšã§ãéçºãµãŒããŒã®èµ·åæéããããã¢ãžã¥ãŒã«ãªãã¬ãŒã¹ã¡ã³ãïŒHMRïŒãããã³ãã«ãããã©ãŒãã³ã¹ã«å€§å¹ ãªæ¹åããããããŸãã
ã¢ãã³ãªãã«ãããŒã«ã®å©ç¹ïŒ
- è¶ é«éãªéçºãµãŒããŒïŒäŸãã°Viteã¯ãã»ãŒç¬æã«èµ·åããHMRã«ãã€ãã£ãESMã䜿çšãããããéçºãéåžžã«ã¹ã ãŒãºã«ãªããŸãã
- ç°¡çŽ åãããèšå®ïŒå€ãã®å Žåãåæèšå®ãæå°éã§æžã¿ãã»ããã¢ããã®è€éãã軜æžãããŸãã
- æé©åããããã«ãïŒããé«éãªæ¬çªãã«ããšããå°ããªãã³ãã«ãµã€ãºã
ç§»è¡æŠç¥ïŒ
ã³ã¢ã®ãã«ãã·ã¹ãã ãç§»è¡ããããšã¯ãã¢ããªã±ãŒã·ã§ã³å šäœã«åœ±é¿ãäžãããããæ®µéçç§»è¡ã®äžã§ãããå°é£ãªåŽé¢ã®1ã€ã«ãªãå¯èœæ§ããããŸãã广çãªæŠç¥ã®1ã€ã¯ãã¢ãã³ãªãã«ãããŒã«ïŒäŸïŒViteïŒã§æ°ãããããžã§ã¯ããäœæããæ¢åã®ã¬ã¬ã·ãŒã¢ããªã±ãŒã·ã§ã³ïŒäŸïŒWebpackïŒãšäžŠè¡ããŠå®è¡ããããã«èšå®ããããšã§ãããã®åŸããã¥ã¢ã«ããŒãã£ã³ã°ãŸãã¯ãã€ã¯ãããã³ããšã³ãã¢ãããŒãã䜿çšã§ããŸããæ°ããæ©èœãã¢ããªã±ãŒã·ã§ã³ã®åé¢ãããéšåã¯æ°ããããŒã«ãã§ãŒã³ã§æ§ç¯ãããã¬ã¬ã·ãŒéšåã¯ãã®ãŸãŸæ®ããŸããæéãçµã€ã«ã€ããŠãããå€ãã®ã³ã³ããŒãã³ããšæ©èœãæ°ãããã«ãã·ã¹ãã ã«ç§»æ€ãããŸãããããã¯ãããã·ã³ãã«ãªã¢ããªã±ãŒã·ã§ã³ã®å ŽåãWebpackãViteã®ãããªããŒã«ã§çŽæ¥çœ®ãæããããšã詊ã¿ããããããŸããããããã¯ãã«ãã·ã¹ãã èªäœã®äžã§ãããã°ãã³ãã®ãªã¹ã¯ã䌎ããŸãã
ãã¹ãæŠç¥ã®æŽç·Ž
å ç¢ãªãã¹ãæŠç¥ã¯ããããªãç§»è¡ã«ãããŠãæãéèŠã§ããããã¯ã»ãŒããã£ããããæäŸããæ°ãã倿Žãæ¢åã®æ©èœãå£ããªãããšããããŠç§»è¡ãããã³ãŒããæåŸ éãã«åäœããããšãä¿èšŒããŸãã
äž»èŠãªåŽé¢ïŒ
- ãŠããããã¹ããšçµ±åãã¹ãïŒJestãšReact Testing LibraryïŒRTLïŒãå©çšããŠãã³ã³ããŒãã³ãã®å æ¬çãªãŠããããã¹ããšçµ±åãã¹ããè¡ããŸããRTLã¯ããŠãŒã¶ãŒãã³ã³ããŒãã³ããšå¯Ÿè©±ããæ¹æ³ã§ãã¹ãããããšã奚å±ããŸãã
- ãšã³ãããŒãšã³ãïŒE2EïŒãã¹ãïŒCypressãPlaywrightã®ãããªããŒã«ã¯ãã¢ããªã±ãŒã·ã§ã³å šäœã®éèŠãªãŠãŒã¶ãŒãããŒãæ€èšŒããããã«äžå¯æ¬ ã§ãããããã®ãã¹ãã¯ãªã°ã¬ãã·ã§ã³ã¹ã€ãŒããšããŠæ©èœããç§»è¡ãããéšåãšã¬ã¬ã·ãŒéšåã®éã®çµ±åãã·ãŒã ã¬ã¹ã§ããããšãä¿èšŒããŸãã
- å€ããã¹ããç¶æããïŒã¬ã¬ã·ãŒã³ã³ããŒãã³ãã®æ¢åã®ãã¹ãã¯ããããã®ã³ã³ããŒãã³ããå®å šã«ç§»è¡ãããæ°ãããã¹ãã¹ã€ãŒãã§åŸ¹åºçã«ãã¹ãããããŸã§åé€ããªãã§ãã ããã
- ç§»è¡ãããã³ãŒãã®ããã®æ°ãããã¹ããäœæããïŒç§»è¡ãããã³ãŒãã®ãã¹ãŠã®éšåã«ã¯ãã¢ãã³ãªãã¹ãã®ãã¹ããã©ã¯ãã£ã¹ãåæ ãããæ°ããããæžããããã¹ããä»å±ããŠããã¹ãã§ãã
å æ¬çãªãã¹ãã¹ã€ãŒãã«ãããèªä¿¡ãæã£ãŠãªãã¡ã¯ã¿ãªã³ã°ã§ãã倿Žããªã°ã¬ãã·ã§ã³ãåŒãèµ·ããããã©ããã«ã€ããŠå³åº§ã«ãã£ãŒãããã¯ãåŸãããšãã§ããŸãã
ç§»è¡ããŒããããïŒã¹ããããã€ã¹ãããã®ã¢ãããŒã
æ§é åãããããŒããããã¯ãç§»è¡ãšããå°é£ãªã¿ã¹ã¯ã管çå¯èœãªäžé£ã®ã¹ãããã«å€æããŸãããã®å埩çãªã¢ãããŒãã¯ã鲿ãä¿èšŒãããªã¹ã¯ãæå°éã«æããããŒã ã®å£«æ°ãç¶æããŸãã
1. è©äŸ¡ãšèšç»
æåã®éèŠãªã¹ãããã¯ãã¢ããªã±ãŒã·ã§ã³ã®çŸç¶ãçè§£ããç§»è¡ã®æç¢ºãªç®æšãå®çŸ©ããããšã§ãã
- ã³ãŒãããŒã¹ã®ç£æ»ïŒæ¢åã®Reactã¢ããªã±ãŒã·ã§ã³ã®åŸ¹åºçãªç£æ»ã宿œããŸããæä»£é ãã®äŸåé¢ä¿ãç¹å®ããã³ã³ããŒãã³ãæ§é ïŒã¯ã©ã¹ vs. 颿°ïŒãåæããè€éãªç¶æ 管çé åãç¹å®ãããã«ãããã©ãŒãã³ã¹ãè©äŸ¡ããŸãããã³ãã«ã¢ãã©ã€ã¶ãŒãäŸåé¢ä¿ãã§ãã«ãŒãéçã³ãŒãåæããŒã«ïŒäŸïŒSonarQubeïŒãªã©ãéåžžã«åœ¹ç«ã¡ãŸãã
- æç¢ºãªç®æšã®å®çŸ©ïŒäœãéæãããã§ããïŒããã©ãŒãã³ã¹ã®åäžãéçºè äœéšã®æ¹åãã¡ã³ããã³ã¹ã®å®¹æãããã³ãã«ãµã€ãºã®åæžããŸãã¯ã»ãã¥ãªãã£ã®æŽæ°ã§ããïŒå ·äœçã§æž¬å®å¯èœãªç®æšããããªãã®æ±ºå®ãå°ããŸãã
- åªå é äœä»ããããªãã¯ã¹ïŒåœ±é¿ïŒããžãã¹äŸ¡å€ãããã©ãŒãã³ã¹åäžïŒå¯ŸåŽåïŒè€éããäŸåé¢ä¿ïŒã«åºã¥ããŠç§»è¡åè£ãåªå é äœä»ãããããã®ãããªãã¯ã¹ãäœæããŸããæ©æã®æåã瀺ãããã«ãåŽåãå°ãªã圱é¿ã®å€§ããé åããå§ããŸãã
- ãªãœãŒã¹é åãšã¿ã€ã ã©ã€ã³ïŒç£æ»ãšåªå é äœä»ãã«åºã¥ããŠãå°éã®ãªãœãŒã¹ïŒéçºè ãQAïŒãå²ãåœãŠãçŸå®çãªã¿ã€ã ã©ã€ã³ãèšå®ããŸããç§»è¡ã¿ã¹ã¯ãéåžžã®ã¹ããªã³ããµã€ã¯ã«ã«çµ±åããŸãã
- æåææšïŒäºåã«äž»èŠæ¥çžŸè©äŸ¡ææšïŒKPIïŒãå®çŸ©ããŸããç§»è¡ã®æåãã©ã®ããã«æž¬å®ããŸããïŒïŒäŸïŒLighthouseã¹ã³ã¢ããã«ãæéããã°åæžãéçºè æºè¶³åºŠèª¿æ»ïŒã
2. ã»ããã¢ãããšããŒã«
éçºç°å¢ãæºåããç§»è¡ããµããŒãããããã«å¿ èŠãªããŒã«ãçµ±åããŸãã
- ã³ã¢ããŒã«ã®æŽæ°ïŒNode.jsã®ããŒãžã§ã³ãnpm/Yarnãããã³ãã®ä»ã®ã³ã¢éçºããŒã«ãææ°ã§ãããã¢ãã³ãªReactãšäºææ§ãããããšã確èªããŸãã
- ã³ãŒãå質ããŒã«ïŒã¬ã¬ã·ãŒã³ãŒããšæ°ããã³ãŒãã®äž¡æ¹ã«å¯ŸããŠäžè²«ããã³ãŒãã¹ã¿ã€ã«ãšãã¹ããã©ã¯ãã£ã¹ã匷å¶ããããã«ãESLintãšPrettierã®èšå®ãå®è£ ãŸãã¯æŽæ°ããŸãã
- æ°ãããã«ãããŒã«ã®å°å ¥ïŒè©²åœããå ŽåïŒïŒãã¥ã¢ã«ããŒãæŠç¥ã远æ±ããå Žåãæ¢åã®Webpackèšå®ãšäžŠè¡ããŠViteãŸãã¯Turbopackãã»ããã¢ããããŸããããããå ±åã§ããããšã確èªããŸãã
- CI/CDãã€ãã©ã€ã³ã®æŽæ°ïŒç¶ç¶çã€ã³ãã°ã¬ãŒã·ã§ã³/ç¶ç¶çãããã€ã¡ã³ããã€ãã©ã€ã³ããæ®µéçãªãããã€ãæ©èœãã©ã°ãããã³å€ãã³ãŒããã¹ãšæ°ããã³ãŒããã¹ã®äž¡æ¹ã®èªåãã¹ãããµããŒãããããã«èšå®ããŸãã
- ç£èŠãšåæïŒã¢ããªã±ãŒã·ã§ã³ããã©ãŒãã³ã¹ã¢ãã¿ãªã³ã°ïŒAPMïŒããšã©ãŒãã©ããã³ã°ãããã³ãŠãŒã¶ãŒåæã®ããã®ããŒã«ãçµ±åããŠãç§»è¡ã®åœ±é¿ã远跡ããŸãã
3. å°ããªæåãšãã€ãããç§»è¡
å°ããå§ããéãåŠã³ãå¢ããã€ããŸãã
- äœãªã¹ã¯ã®åè£ãéžæããïŒæ¯èŒçå€ç«ããæ©èœãã·ã³ãã«ã§éèŠã§ãªãã³ã³ããŒãã³ãããŸãã¯é »ç¹ã«ã¢ã¯ã»ã¹ãããªãå°çšã®å°ããªããŒãžãéžæããŸããããã«ãããæœåšçãªåé¡ã®åœ±é¿ç¯å²ãæžå°ããŸãã
- å®è¡ãšææžåïŒãã®ãã€ãããåè£ã§ç§»è¡ãå®è¡ããŸãããã¹ãŠã®ã¹ããããééãããã¹ãŠã®èª²é¡ãããã³å®è£ ããããã¹ãŠã®è§£æ±ºçãææžåããŸãããã®ææžã¯ãå°æ¥ã®ç§»è¡ã®ããã®éåçãšãªããŸãã
- åŠã³ãšæ¹åïŒçµæãåæããŸããäœãããŸããããŸãããïŒäœãæ¹åã§ããŸããïŒãã®åæã®çµéšã«åºã¥ããŠãç§»è¡ã®ãã¯ããã¯ãšããã»ã¹ãæŽç·ŽãããŸãã
- æåãäŒããïŒãã®ãã€ãããç§»è¡ã®æåãããŒã ãã¹ããŒã¯ãã«ããŒãšå ±æããŸããããã«ãããèªä¿¡ãã€ããæ®µéçã¢ãããŒããæ€èšŒãããåãçµã¿ã®äŸ¡å€ãå確èªãããŸãã
4. å埩çãªéçºãšå±é
ãã€ãããããã®åŠã³ã«åºã¥ããŠç§»è¡äœæ¥ãæ¡å€§ããå埩çãªãµã€ã¯ã«ã«åŸããŸãã
- åªå é äœä»ããããååŸ©ïŒæ¬¡ã«åªå é äœä»ããããã³ã³ããŒãã³ããŸãã¯æ©èœã®ã»ããã«åãçµã¿ãŸããç§»è¡ã¿ã¹ã¯ãéåžžã®éçºã¹ããªã³ãã«çµ±åãããããäžåºŠããã®å¥ã®ãããžã§ã¯ãã§ã¯ãªããç¶ç¶çãªåãçµã¿ã«ããŸãã
- æ©èœãã©ã°ã«ãããããã€ïŒç§»è¡ãããæ©èœãæ©èœãã©ã°ã®èåŸã§ãããã€ããŸããããã«ããããã¹ãŠã®ãŠãŒã¶ãŒã«ããã«å ¬éããããšãªããã³ãŒããæ¬çªç°å¢ã«æ®µéçã«ãªãªãŒã¹ã§ããŸãã
- èªåãã¹ãïŒç§»è¡ããããã¹ãŠã®ã³ã³ããŒãã³ããšæ©èœãå³å¯ã«ãã¹ãããŸããå æ¬çãªãŠããããçµ±åãããã³ãšã³ãããŒãšã³ãã®ãã¹ãã宿œããããããã€åã«ãã¹ããããšã確èªããŸãã
- ã³ãŒãã¬ãã¥ãŒïŒåŒ·åãªã³ãŒãã¬ãã¥ãŒã®å®è·µãç¶æããŸããç§»è¡ãããã³ãŒããæ°ãããã¹ããã©ã¯ãã£ã¹ãšåè³ªåºæºã«æºæ ããŠããããšã確èªããŸãã
- 宿çãªãããã€ïŒå°ããé »ç¹ãªãããã€ã®ãªãºã ãç¶æããŸããããã«ãããã³ãŒãããŒã¹ããªãªãŒã¹å¯èœãªç¶æ ã«ä¿ããã倧ããªå€æŽã«äŒŽããªã¹ã¯ãæå°éã«æããããŸãã
5. ç£èŠãšæ¹å
ãããã€åŸãç¶ç¶çãªç£èŠãšãã£ãŒãããã¯ã¯ãæåããç§»è¡ã®ããã«äžå¯æ¬ ã§ãã
- ããã©ãŒãã³ã¹ç£èŠïŒç§»è¡ãããã»ã¯ã·ã§ã³ã®äž»èŠãªããã©ãŒãã³ã¹ææšïŒäŸïŒèªã¿èŸŒã¿æéãå¿çæ§ïŒã远跡ããŸããAPMããŒã«ã䜿çšããŠãããã©ãŒãã³ã¹ã®äœäžãæ¹åãç¹å®ãã察åŠããŸãã
- ãšã©ãŒãã©ããã³ã°ïŒç§»è¡ãããé åã§ã®æ°ãããšã©ãŒãå¢å ãããšã©ãŒçã«ã€ããŠãšã©ãŒãã°ãç£èŠããŸããåé¡ãè¿ éã«è§£æ±ºããŸãã
- ãŠãŒã¶ãŒãã£ãŒãããã¯ïŒåæã調æ»ããŸãã¯çŽæ¥ã®ãã£ãã«ãéããŠãŠãŒã¶ãŒãããã£ãŒãããã¯ãåéããŸããæ°ããäœéšãè¯å®çã§ããããšã確èªããããã«ããŠãŒã¶ãŒã®è¡åã芳å¯ããŸãã
- ååŸ©ãšæé©åïŒåéãããããŒã¿ãšãã£ãŒãããã¯ã䜿çšããŠããããªãæé©åãŸãã¯èª¿æŽã®ããã®é åãç¹å®ããŸããç§»è¡ã¯äžåºŠããã®ã€ãã³ãã§ã¯ãªããç¶ç¶çãªæ¹åã®ããã»ã¹ã§ãã
ããããèœãšã穎ãšãã®åé¿æ¹æ³
èšç»ã®è¡ãå±ããæ®µéçç§»è¡ã§ãã£ãŠãã課é¡ã¯çºçããå¯èœæ§ããããŸããäžè¬çãªèœãšã穎ãèªèããŠããããšã¯ãããããç©æ¥µçã«åé¿ããã®ã«åœ¹ç«ã¡ãŸãã
è€éæ§ã®éå°è©äŸ¡
äžèŠå°ããªå€æŽã§ãããå€§èŠæš¡ãªã¬ã¬ã·ãŒã¢ããªã±ãŒã·ã§ã³ã§ã¯äºæãã¬äŸåé¢ä¿ãå¯äœçšãæã€ããšããããŸããåºç¯ãªä»®å®ãé¿ããŠãã ãããåç§»è¡ã¿ã¹ã¯ã®ç¯å²ã培åºçã«åæããŸãã倧ããªã³ã³ããŒãã³ããæ©èœããå¯èœãªéãå°ãããç¬ç«ããŠç§»è¡å¯èœãªåäœã«åå²ããŸããç§»è¡ãéå§ããåã«äŸåé¢ä¿åæã宿œããŸãã
ã³ãã¥ãã±ãŒã·ã§ã³äžè¶³
广çãªã³ãã¥ãã±ãŒã·ã§ã³ã®å€±æã¯ãèª€è§£ãæµæããããŠæåŸ ã®ããã«ã€ãªããå¯èœæ§ããããŸãããã¹ãŠã®ã¹ããŒã¯ãã«ããŒïŒéçºããŒã ããããã¯ããªãŒããŒãQAããããŠè©²åœããå Žåã¯ãšã³ããŠãŒã¶ãŒãïŒã«æ å ±ãæäŸãç¶ããŸããç§»è¡ã®èåŸã«ããããªããããã®å©ç¹ããããŠæåŸ ãããã¿ã€ã ã©ã€ã³ãæç¢ºã«äŒããŸãããã€ã«ã¹ããŒã³ãç¥ãã宿çã«é²æãå ±æããŠãç±æãšãµããŒããç¶æããŸãã
ãã¹ãã®è»œèŠ
ç§»è¡äžã«ãã¹ãã§æãæãããšã¯ãçœå®³ãžã®è¿éã§ããç§»è¡ãããæ©èœã®åéšåã¯åŸ¹åºçã«ãã¹ããããªããã°ãªããŸãããèªåãã¹ãïŒãŠããããçµ±åãE2EïŒã¯äº€æžã®äœå°ããããŸããããããã¯ãèªä¿¡ãæã£ãŠãªãã¡ã¯ã¿ãªã³ã°ã§ããã»ãŒããã£ããããæäŸããŸããæåãããã¹ãèªååã«æè³ããç¶ç¶çãªãã¹ãã«ãã¬ããžã確ä¿ããŸãã
ããã©ãŒãã³ã¹æé©åã®å¿ã
å€ãã³ãŒããæ°ãããã¿ãŒã³ã«å€æããã ãã§ãèªåçã«ããã©ãŒãã³ã¹ã®åäžãä¿èšŒãããããã§ã¯ãããŸãããHooksãã¢ãã³ãªç¶æ 管çã¯å©ç¹ãæäŸã§ããŸãããæé©åãããŠããªãã³ãŒãã¯äŸç¶ãšããŠé ãã¢ããªã±ãŒã·ã§ã³ã«ã€ãªããå¯èœæ§ããããŸããç§»è¡äžããã³ç§»è¡åŸã«ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ãããã¡ã€ãªã³ã°ããŸããReact DevToolsãããã¡ã€ã©ããã©ãŠã¶ã®ããã©ãŒãã³ã¹ããŒã«ãããã³Lighthouseç£æ»ã䜿çšããŠãããã«ããã¯ãç¹å®ããã¬ã³ããªã³ã°ããããã¯ãŒã¯ãªã¯ãšã¹ããããã³ãã³ãã«ãµã€ãºãæé©åããŸãã
å€åãžã®æµæ
éçºè ããä»ã®èª°ããšåæ§ã«ãã¯ãŒã¯ãããŒãæ £ã芪ããã æè¡ã®å€§ããªå€åã«æµæããããšããããŸããããã«å¯ŸåŠããã«ã¯ãããŒã ãèšç»ããã»ã¹ã«åå ããããã¬ãŒãã³ã°ãšæ°ãããã¿ãŒã³ãåŠã¶ååãªæ©äŒãæäŸããè¿ä»£åã®åãçµã¿ã®å ·äœçãªå©ç¹ïŒäŸïŒããéãéçºãããå°ãªããã°ãããè¯ãä¿å®æ§ïŒã瀺ãããšã§ããåŠç¿ãšç¶ç¶çæ¹åã®æåãè²ã¿ããã¹ãŠã®å°ããªåå©ãç¥ããŸãã
æåã®æž¬å®ãšå¢ãã®ç¶æ
段éçç§»è¡ã¯ã¹ããªã³ãã§ã¯ãªããã©ãœã³ã§ããé²æãæž¬å®ããå¢ããç¶æããããšã¯ãé·æçãªæåã«ãšã£ãŠäžå¯æ¬ ã§ãã
äž»èŠæ¥çžŸè©äŸ¡ææšïŒKPIïŒ
èšç»æ®µéã§å®çŸ©ããã¡ããªã¯ã¹ã远跡ããŸãããããã«ã¯ä»¥äžãå«ãŸããå¯èœæ§ããããŸãïŒ
- æè¡çã¡ããªã¯ã¹ïŒãã³ãã«ãµã€ãºã®åæžããã«ãæéã®ççž®ãLighthouseã¹ã³ã¢ïŒCore Web VitalsïŒã®åäžãç§»è¡ãããã»ã¯ã·ã§ã³ã§ã®å ±åãã°æ°ã®æžå°ãæè¡çè² åµã¹ã³ã¢ã®åæžïŒéçåæããŒã«ã䜿çšããŠããå ŽåïŒã
- éçºè äœéšã¡ããªã¯ã¹ïŒéçºäžã®ãã£ãŒãããã¯ã«ãŒãã®ççž®ãéçºè æºè¶³åºŠã®åäžïŒäŸïŒç€Ÿå 調æ»ãéããŠïŒãæ°ããããŒã ã¡ã³ããŒã®ãªã³ããŒãã£ã³ã°ã®è¿ éåã
- ããžãã¹ã¡ããªã¯ã¹ïŒãŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ãã®åäžãã³ã³ããŒãžã§ã³çã®åäžïŒUI/UXã®æ¹åã«ãã£ãŠçŽæ¥åœ±é¿ãåããå ŽåïŒãããå¹ççãªéçºã«ããéçšã³ã¹ãã®åæžã
ãããã®KPIã宿çã«ã¬ãã¥ãŒããŠãç§»è¡ãé 調ã«é²ãã§ãããæåŸ ããã䟡å€ãæäŸããŠããããšã確èªããŸããããŒã¿ã«åºã¥ããŠå¿ èŠã«å¿ããŠæŠç¥ã調æŽããŸãã
ç¶ç¶çæ¹å
Reactãšã³ã·ã¹ãã ã¯é²åãç¶ããŠãããããªãã®ã¢ããªã±ãŒã·ã§ã³ãããããã¹ãã§ããã¢ããªã±ãŒã·ã§ã³ã®ããªãã®éšåãè¿ä»£åãããããããã§æ¢ããªãã§ãã ãããç¶ç¶çæ¹åã®æåãè²ã¿ãŸãïŒ
- 宿çãªãªãã¡ã¯ã¿ãªã³ã°ã»ãã·ã§ã³ïŒéåžžã®éçºã®äžéšãšããŠããªãã¡ã¯ã¿ãªã³ã°ãšå°èŠæš¡ãªç§»è¡ã®ããã®å°éã®æéãã¹ã±ãžã¥ãŒã«ããŸãã
- ææ°æ å ±ãç¶æããïŒææ°ã®Reactã®ãªãªãŒã¹ããã¹ããã©ã¯ãã£ã¹ãããã³ãšã³ã·ã¹ãã ã®é²æ©ã«åžžã«æ³šæãæããŸãã
- ç¥èå ±æïŒããŒã ã¡ã³ããŒãç¥èãå ±æãã瀟å ã¯ãŒã¯ã·ã§ããã宿œããã³ãŒãããŒã¹ã®é²åã«è²¢ç®ããããšã奚å±ããŸãã
- ãã¹ãŠãèªååããïŒãã¹ãããããã€ãäŸåé¢ä¿ã®æŽæ°ãããã³ã³ãŒãå質ãã§ãã¯ã®ããã®èªååãæŽ»çšããŠãã¹ã ãŒãºã§ä¿å®å¯èœãªéçºããã»ã¹ã確ä¿ããŸãã
çµè«
å€§èŠæš¡ã§ã¬ã¬ã·ãŒãªReactã¢ããªã±ãŒã·ã§ã³ãã¢ãã³ãªãã¿ãŒã³ã«ç§»è¡ããããšã¯éèŠãªåãçµã¿ã§ãããããã¯å¿ ãããæ°ã®é ããªããããªãã®ã§ããå¿ èŠã¯ãããŸãããæ®µéçç§»è¡ã®ååïŒã€ã³ã¯ãªã¡ã³ã¿ã«ãªå€æŽãåé¢ããã¥ã¢ã«ããŒãã£ã³ã°ã峿 Œãªãã¹ãïŒãåãå ¥ããããšã§ãçµç¹ã¯äºæ¥ç¶ç¶æ§ãå±éºã«ãããããšãªãã¢ããªã±ãŒã·ã§ã³ãè¿ä»£åã§ããŸãããã®ã¢ãããŒãã¯ãèæœåããã³ãŒãããŒã¹ã«æ°ããªåœãå¹ã蟌ã¿ãããã©ãŒãã³ã¹ãšä¿å®æ§ãåäžãããã ãã§ãªããéçºè äœéšãåäžãããããŒã ãããçç£çã§ç±å¿ã«ããŸãã
ã¬ã¬ã·ãŒããã¢ãã³ãžã®æ ã¯ãçæ³äž»çŸ©ãããçŸå®äž»çŸ©ã®èšŒã§ããããã¯ãç¶ç¶çãªäŸ¡å€ãæäŸããçµ¶ããå€åããæè¡çç¶æ³ã®äžã§ã¢ããªã±ãŒã·ã§ã³ãç«¶äºåãšå ç¢æ§ãç¶æããããšãä¿èšŒãããè³¢æã§æŠç¥çãªéžæãããããšã§ããå°ããå§ããç²ã匷ãç¶ãããããŠããŒã ããã®é²åãæåè£ã«ããã²ãŒãããããã®ç¥èãšããŒã«ã§åãäžããŠãã ãããããªãã®ãŠãŒã¶ãŒãããªãã®éçºè ããããŠããªãã®ããžãã¹ã¯ãééããªãé·æçãªå ±é ¬ã享åããã§ãããã