é«åºŠãªæ€èšŒæŠç¥ãå¹ççãªç¶æ 管çããããŠå ç¢ã§äœ¿ãããããã©ãŒã äœæã®ãã¹ããã©ã¯ãã£ã¹ã«é¢ããå æ¬çãªã¬ã€ãã§ãããã³ããšã³ããã©ãŒã ã¢ãŒããã¯ãã£ããã¹ã¿ãŒããŸãããã
ã¢ãã³ããã³ããšã³ããã©ãŒã ã®èšèšïŒæ€èšŒãšç¶æ 管çã®è©³çް
ãã©ãŒã ã¯ãã€ã³ã¿ã©ã¯ãã£ããªWebã¢ããªã±ãŒã·ã§ã³ã®èŠã§ããç°¡åãªãã¥ãŒã¹ã¬ã¿ãŒã®ãµã€ã³ã¢ãããããè€éãªè€æ°ã¹ãããã®éèã¢ããªã±ãŒã·ã§ã³ãŸã§ããŠãŒã¶ãŒãã·ã¹ãã ã«ããŒã¿ãäŒããããã®äž»èŠãªãã£ãã«ã§ãããããããã®éåšæ§ã«ãããããããå ç¢ã§ããŠãŒã¶ãŒãã¬ã³ããªãŒã§ãä¿å®å¯èœãªãã©ãŒã ãæ§ç¯ããããšã¯ãããã³ããšã³ãéçºã«ãããæãéå°è©äŸ¡ãããŠãã課é¡ã®1ã€ã§ãã
ã¢ãŒããã¯ãã£ãäžååãªãã©ãŒã ã¯ãäžé£ã®åé¡ãåŒãèµ·ããå¯èœæ§ããããŸããããã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®äžæºããããã°ãå°é£ãªèãã³ãŒããããŒã¿ã®æŽåæ§ã®åé¡ããããŠå€å€§ãªã¡ã³ããã³ã¹ãªãŒããŒãããã«ã€ãªãããŸããéã«ãé©åã«èšèšããããã©ãŒã ã¯ããŠãŒã¶ãŒã«ãšã£ãŠã¯ç°¡åã«æããããéçºè ã«ãšã£ãŠã¯ã¡ã³ããã³ã¹ã容æã«ãªããŸãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãã¢ãã³ãã©ãŒã ã¢ãŒããã¯ãã£ã®2ã€ã®åºæ¬çãªæ±ãç¶æ 管çãšæ€èšŒã«ã€ããŠæ¢æ±ããŸããããŸããŸãªãã¬ãŒã ã¯ãŒã¯ãã©ã€ãã©ãªã«é©çšãããäžæ žçãªæŠå¿µãèšèšãã¿ãŒã³ãããã³ãã¹ããã©ã¯ãã£ã¹ãæãäžããäžçäžã®ãªãŒãã£ãšã³ã¹åãã«ãããã§ãã·ã§ãã«ã§ã¹ã±ãŒã©ãã«ã§ã¢ã¯ã»ã¹å¯èœãªãã©ãŒã ãæ§ç¯ããããã®ç¥èãæäŸããŸãã
ã¢ãã³ãã©ãŒã ã®è§£å
ã¡ã«ããºã ã«å ¥ãåã«ããã©ãŒã ããã®ã³ã¢ã³ã³ããŒãã³ãã«åè§£ããŠã¿ãŸãããããã©ãŒã ãåãªãå ¥åã®éåãšããŠã§ã¯ãªãããã倧ããªã¢ããªã±ãŒã·ã§ã³å ã®ããã¢ããªã±ãŒã·ã§ã³ãšããŠèããããšããããè¯ãã¢ãŒããã¯ãã£ãžã®æåã®ã¹ãããã§ãã
- UIã³ã³ããŒãã³ãïŒãããã¯ããŠãŒã¶ãŒã察話ããèŠèŠçãªèŠçŽ ã§ããå ¥åãã£ãŒã«ããããã¹ããšãªã¢ããã§ãã¯ããã¯ã¹ãã©ãžãªãã¿ã³ãã»ã¬ã¯ãããã¿ã³ãªã©ã§ãããã®èšèšãšã¢ã¯ã»ã·ããªãã£ã¯éåžžã«éèŠã§ãã
- ç¶æ ïŒããã¯ãã©ãŒã ã®ããŒã¿å±€ã§ããããã¯ãå ¥åã®å€ã ãã§ãªããã©ã®ãã£ãŒã«ããè§Šããããããç¡å¹ãªãã£ãŒã«ããå šäœçãªéä¿¡ã¹ããŒã¿ã¹ãããã³ãšã©ãŒã¡ãã»ãŒãžãªã©ã®ã¡ã¿ããŒã¿ã远跡ããçãããªããžã§ã¯ãã§ãã
- æ€èšŒããžãã¯ïŒåãã£ãŒã«ããšãã©ãŒã å šäœã«å¯ŸããŠæå¹ãªããŒã¿ãå®çŸ©ããäžé£ã®ã«ãŒã«ããã®ããžãã¯ã¯ãããŒã¿ã®æŽåæ§ãä¿èšŒãããŠãŒã¶ãŒãæ£åžžãªéä¿¡ã«å°ããŸãã
- éä¿¡åŠçïŒãŠãŒã¶ãŒããã©ãŒã ãéä¿¡ããããšãããšãã«çºçããããã»ã¹ãããã«ã¯ãæçµæ€èšŒã®å®è¡ãããŒãã£ã³ã°ç¶æ ã®è¡šç€ºãAPIåŒã³åºãã®å®è¡ããµãŒããŒããã®æåãšãšã©ãŒã®äž¡æ¹ã®å¿çã®åŠçãå«ãŸããŸãã
- ãŠãŒã¶ãŒãã£ãŒãããã¯ïŒããã¯ã³ãã¥ãã±ãŒã·ã§ã³å±€ã§ããã€ã³ã©ã€ã³ãšã©ãŒã¡ãã»ãŒãžãããŒãã£ã³ã°ã¹ãããŒãæåéç¥ãããã³ãµãŒããŒåŽã®ãšã©ãŒãµããªãŒãå«ãŸããŸããæç¢ºã§ã¿ã€ã ãªãŒãªãã£ãŒãããã¯ã¯ãåªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ç¹åŸŽã§ãã
ãããããã©ãŒã ã¢ãŒããã¯ãã£ã®ç©¶æ¥µã®ç®æšã¯ããããã®ã³ã³ããŒãã³ããã·ãŒã ã¬ã¹ã«ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ããŠããŠãŒã¶ãŒã«ãšã£ãŠæç¢ºã§å¹ççã§ãšã©ãŒã®ãªããã¹ãäœæããããšã§ãã
æ±1ïŒç¶æ ç®¡çæŠç¥
æ¬è³ªçã«ããã©ãŒã ã¯ã¹ããŒããã«ãªã·ã¹ãã ã§ãããã®ç¶æ ãã©ã®ããã«ç®¡çããããããã©ãŒã ã®ããã©ãŒãã³ã¹ãäºæž¬å¯èœæ§ãããã³è€éããæ±ºå®ããŸããçŽé¢ããäž»ãªæ±ºå®äºé ã¯ãã³ã³ããŒãã³ãã®ç¶æ ãšãã©ãŒã ã®å ¥åãã©ã®çšåºŠå¯æ¥ã«çµåãããã§ãã
å¶åŸ¡ã³ã³ããŒãã³ããšéå¶åŸ¡ã³ã³ããŒãã³ã
ãã®æŠå¿µã¯Reactã«ãã£ãŠæ®åããŸããããååã¯æ®éçã§ããããã¯ããã©ãŒã ã®ããŒã¿ã®ãåäžã®ä¿¡é Œã§ããæ å ±æºããã©ãã«ååšããã®ããæ±ºå®ããããšã§ããã³ã³ããŒãã³ãã®ç¶æ 管çã·ã¹ãã å ããDOMèªäœå ãã
å¶åŸ¡ã³ã³ããŒãã³ã
å¶åŸ¡ã³ã³ããŒãã³ãã§ã¯ããã©ãŒã å ¥åã®å€ã¯ã³ã³ããŒãã³ãã®ç¶æ ã«ãã£ãŠé§åãããŸããå ¥åãžã®ãã¹ãŠã®å€æŽïŒããšãã°ãããŒãæŒãïŒã¯ãç¶æ ãæŽæ°ããã€ãã³ããã³ãã©ãŒãããªã¬ãŒããããã«ããã³ã³ããŒãã³ããåã¬ã³ããªã³ã°ãããæ°ããå€ãå ¥åã«æž¡ãããŸãã
- é·æïŒç¶æ ã¯åäžã®ä¿¡é Œã§ããæ å ±æºã§ããããã«ããããã©ãŒã ã®åäœã¯éåžžã«äºæž¬å¯èœã«ãªããŸãã倿Žã«å³åº§ã«åå¿ããåçæ€èšŒãå®è£ ããããå ¥åå€ããã®å Žã§æäœãããã§ããŸããã¢ããªã±ãŒã·ã§ã³ã¬ãã«ã®ç¶æ 管çãšã·ãŒã ã¬ã¹ã«çµ±åã§ããŸãã
- çæïŒãã¹ãŠã®å ¥åã«ç¶æ 倿°ãšã€ãã³ããã³ãã©ãŒãå¿ èŠãªãããåé·ã«ãªãå¯èœæ§ããããŸããéåžžã«å€§ãããè€éãªãã©ãŒã ã®å Žåããã¹ãŠã®ããŒã¹ãããŒã¯ã§é »ç¹ã«åã¬ã³ããªã³ã°ãçºçãããšãããã©ãŒãã³ã¹äžã®åé¡ã«ãªãå¯èœæ§ããããŸãããææ°ã®ãã¬ãŒã ã¯ãŒã¯ã¯ããã«å¯ŸããŠé«åºŠã«æé©åãããŠããŸãã
æŠå¿µçãªäŸïŒReactïŒïŒ
const [name, setName] = useState('');
setName(e.target.value)} />
éå¶åŸ¡ã³ã³ããŒãã³ã
éå¶åŸ¡ã³ã³ããŒãã³ãã§ã¯ãDOMèªäœãå ¥åãã£ãŒã«ãã®ç¶æ ã管çããŸããã³ã³ããŒãã³ãã®ç¶æ ãéããŠãã®å€ã管çããããšã¯ãããŸããã代ããã«ãå¿ èŠãªãšãã«ïŒéåžžã¯ãã©ãŒã éä¿¡äžã«ïŒãDOMã«å€ãç §äŒããŸããå€ãã®å Žåãåç §ïŒReactã®`useRef`ãªã©ïŒã䜿çšããŸãã
- é·æïŒã·ã³ãã«ãªãã©ãŒã ã®å Žåãã³ãŒããå°ãªããŠæžã¿ãŸãããã¹ãŠã®ããŒã¹ãããŒã¯ã§åã¬ã³ããªã³ã°ãåé¿ãããããããã©ãŒãã³ã¹ãåäžããå¯èœæ§ããããŸãããã¬ãŒã ã¯ãŒã¯ããŒã¹ã§ã¯ãªãããã©JavaScriptã©ã€ãã©ãªãšã®çµ±åã容æã«ãªãããšããããããŸãã
- çæïŒããŒã¿ãããŒãæç¢ºã§ã¯ãªãããããã©ãŒã ã®åäœã®äºæž¬å¯èœæ§ãäœããªããŸãããªã¢ã«ã¿ã€ã æ€èšŒãæ¡ä»¶ä»ãæžåŒèšå®ãªã©ã®æ©èœãå®è£ ãããšãããè€éã«ãªããŸããDOMããããŒã¿ãååŸããã®ã§ã¯ãªããç¶æ ã«ããã·ã¥ããå¿ èŠããããŸãã
æŠå¿µçãªäŸïŒReactïŒïŒ
const nameRef = useRef(null);
// On submit: console.log(nameRef.current.value)
æšå¥šäºé ïŒã»ãšãã©ã®ææ°ã®ã¢ããªã±ãŒã·ã§ã³ã§ã¯ãå¶åŸ¡ã³ã³ããŒãã³ããæšå¥šãããã¢ãããŒãã§ããæ€èšŒããã³ç¶æ 管çã©ã€ãã©ãªãšã®äºæž¬å¯èœæ§ãšçµ±åã®å®¹æãã¯ãããããªåé·æ§ãããéèŠã§ããéå¶åŸ¡ã³ã³ããŒãã³ãã¯ãéåžžã«ã·ã³ãã«ã§åé¢ããããã©ãŒã ïŒæ€çŽ¢ããŒãªã©ïŒããããããæåŸã®åã¬ã³ããªã³ã°ãæé©åããŠããããã©ãŒãã³ã¹ã¯ãªãã£ã«ã«ãªã·ããªãªã§ã¯æå¹ãªéžæè¢ã§ããReact Hook Formã®ãããªå€ãã®ææ°ã®ãã©ãŒã ã©ã€ãã©ãªã¯ããã€ããªããã¢ãããŒããå·§ã¿ã«äœ¿çšããéå¶åŸ¡ã³ã³ããŒãã³ãã®ããã©ãŒãã³ã¹äžã®å©ç¹ãšå¶åŸ¡ã³ã³ããŒãã³ãã®éçºè ãšã¯ã¹ããªãšã³ã¹ãæäŸããŠããŸãã
ããŒã«ã«ç¶æ ãšã°ããŒãã«ç¶æ 管ç
ã³ã³ããŒãã³ãæŠç¥ã決å®ããããæ¬¡ã®è³ªåã¯ããã©ãŒã ã®ç¶æ ãã©ãã«ä¿åãããã§ãã
- ããŒã«ã«ç¶æ ïŒç¶æ ã¯ããã©ãŒã ã³ã³ããŒãã³ããŸãã¯ãã®èŠªã³ã³ããŒãã³ãå ã§å®å šã«ç®¡çãããŸããReactã§ã¯ã`useState`ãŸãã¯`useReducer`ããã¯ã䜿çšããããšã«ãªããŸããããã¯ããã°ã€ã³ãç»é²ããŸãã¯é£çµ¡å ãã©ãŒã ãªã©ã®èªå·±å®çµåãã©ãŒã ã«æé©ãªã¢ãããŒãã§ããç¶æ ã¯äžæçã§ãããã¢ããªã±ãŒã·ã§ã³å šäœã§å ±æããå¿ èŠã¯ãããŸããã
- ã°ããŒãã«ç¶æ ïŒãã©ãŒã ã®ç¶æ ã¯ãReduxãZustandãVuexããŸãã¯Piniaãªã©ã®ã°ããŒãã«ã¹ãã¢ã«ä¿åãããŸããããã¯ããã©ãŒã ã®ããŒã¿ãã¢ããªã±ãŒã·ã§ã³ã®ä»ã®ãé¢é£ã®ãªãéšåããã¢ã¯ã»ã¹ãŸãã¯å€æŽãããå¿ èŠãããå Žåã«å¿ èŠã§ããå žåçãªäŸã¯ããŠãŒã¶ãŒèšå®ããŒãžã§ãããã©ãŒã ã®å€æŽã¯ãããããŒã®ãŠãŒã¶ãŒã®ã¢ãã¿ãŒã«å³åº§ã«åæ ãããå¿ èŠããããŸãã
ãã©ãŒã ã©ã€ãã©ãªã®æŽ»çš
ãã©ãŒã ã®ç¶æ ãæ€èšŒãããã³éä¿¡ããžãã¯ãæåãã管çããããšã¯ãéå±ã§ãšã©ãŒãçºçãããããªããŸãããããããã©ãŒã 管çã©ã€ãã©ãªã倧ããªäŸ¡å€ãæäŸããçç±ã§ãããããã¯åºæ¬ãçè§£ããããã®ä»£æ¿ç©ã§ã¯ãªããããããå¹ççã«å®è£ ããããã®åŒ·åãªããŒã«ã§ãã
- ReactïŒReact Hook Formã¯ãããã©ãŒãã³ã¹ãæåªå ããã¢ãããŒãã§é«ãè©äŸ¡ãããŠãããäž»ã«éå¶åŸ¡å ¥åãããã¯ã°ã©ãŠã³ãã§äœ¿çšããŠãåã¬ã³ããªã³ã°ãæå°éã«æããŠããŸããFormikã¯ãå¶åŸ¡ã³ã³ããŒãã³ããã¿ãŒã³ã«ããã«äŸåããããã1ã€ã®æçãã人æ°ã®ããéžæè¢ã§ãã
- VueïŒVeeValidateã¯ãæ€èšŒã«ãã³ãã¬ãŒãããŒã¹ããã³ã³ã³ããžã·ã§ã³APIã¢ãããŒããæäŸãããæ©èœè±å¯ãªã©ã€ãã©ãªã§ããVuelidateã¯ããã1ã€ã®åªããã¢ãã«ããŒã¹ã®æ€èšŒãœãªã¥ãŒã·ã§ã³ã§ãã
- AngularïŒAngularã¯ããã³ãã¬ãŒãé§åãã©ãŒã ãšãªã¢ã¯ãã£ããã©ãŒã ã䜿çšããŠã匷åãªçµã¿èŸŒã¿ãœãªã¥ãŒã·ã§ã³ãæäŸããŸãããªã¢ã¯ãã£ããã©ãŒã ã¯ããã®æç€ºçã§äºæž¬å¯èœãªæ§è³ªãããè€éã§ã¹ã±ãŒã©ãã«ãªã¢ããªã±ãŒã·ã§ã³ã§äžè¬çã«æšå¥šãããŠããŸãã
ãããã®ã©ã€ãã©ãªã¯ãå€ãã¿ãããããç¶æ ããšã©ãŒãããã³éä¿¡ã¹ããŒã¿ã¹ã®è¿œè·¡ã®å®åçãªäœæ¥ãæœè±¡åããããžãã¹ããžãã¯ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«éäžã§ããããã«ããŸãã
æ±2ïŒæ€èšŒã®èžè¡ãšç§åŠ
æ€èšŒã¯ãåçŽãªããŒã¿å ¥åã¡ã«ããºã ããŠãŒã¶ãŒåãã®ã€ã³ããªãžã§ã³ããªã¬ã€ãã«å€ããŸãããã®ç®çã¯2ã€ãããŸããããã¯ãšã³ãã«éä¿¡ãããããŒã¿ã®æŽåæ§ã確ä¿ããããšããããŠåããããéèŠãªããšãšããŠããŠãŒã¶ãŒããã©ãŒã ãæ£ããèªä¿¡ãæã£ãŠå ¥åã§ããããã«ããããšã§ãã
ã¯ã©ã€ã¢ã³ããµã€ãæ€èšŒãšãµãŒããŒãµã€ãæ€èšŒ
ããã¯éžæã§ã¯ãããŸãããããŒãããŒã·ããã§ããåžžã«äž¡æ¹ãå®è£ ããå¿ èŠããããŸãã
- ã¯ã©ã€ã¢ã³ããµã€ãæ€èšŒïŒããã¯ãŠãŒã¶ãŒã®ãã©ãŠã¶ã§çºçããŸãããã®äž»ãªç®æšã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã§ããå³åº§ã«ãã£ãŒãããã¯ãæäŸãããŠãŒã¶ãŒãåçŽãªãã¹ã«æ°ã¥ãããã«ãµãŒããŒãšã®ã©ãŠã³ãããªãããåŸ ã€å¿ èŠããªãããŸããæªæã®ãããŠãŒã¶ãŒã«ãã£ãŠãã€ãã¹ãããå¯èœæ§ããããããã»ãã¥ãªãã£ãããŒã¿ã®æŽåæ§ãä¿¡é Œããã¹ãã§ã¯ãããŸããã
- ãµãŒããŒãµã€ãæ€èšŒïŒããã¯ããã©ãŒã ãéä¿¡ãããåŸããµãŒããŒã§çºçããŸããããã¯ãã»ãã¥ãªãã£ãšããŒã¿ã®æŽåæ§ã®åäžã®ä¿¡é Œã§ããæ å ±æºã§ããããã³ããšã³ããéä¿¡ããå 容ã«é¢ä¿ãªããããŒã¿ããŒã¹ãç¡å¹ãªããŒã¿ãæªæã®ããããŒã¿ããä¿è·ããŸããã¯ã©ã€ã¢ã³ãã§å®è¡ããããã¹ãŠã®æ€èšŒãã§ãã¯ãåå®è¡ããå¿ èŠããããŸãã
ã¯ã©ã€ã¢ã³ããµã€ãæ€èšŒããŠãŒã¶ãŒã®åœ¹ç«ã€ã¢ã·ã¹ã¿ã³ããšããŠããµãŒããŒãµã€ãæ€èšŒãã²ãŒãã§ã®æçµçãªã»ãã¥ãªãã£ãã§ãã¯ãšèããŠãã ããã
æ€èšŒããªã¬ãŒïŒãã€æ€èšŒãããïŒ
æ€èšŒãã£ãŒãããã¯ã®ã¿ã€ãã³ã°ã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«åçã«åœ±é¿ããŸããé床ã«ç©æ¥µçãªæŠç¥ã¯ã€ã©ã€ã©ããå¯èœæ§ããããååçãªæŠç¥ã¯åœ¹ã«ç«ããªãå¯èœæ§ããããŸãã
- 倿޿/å ¥åæïŒæ€èšŒã¯ããã¹ãŠã®ããŒã¹ãããŒã¯ã§å®è¡ãããŸããããã¯æã峿çãªãã£ãŒãããã¯ãæäŸããŸãããå§åãããå¯èœæ§ããããŸããæåã«ãŠã³ã¿ãŒãåçŽãªãã¿ãŒã³ã«å¯Ÿããæ€èšŒïŒäŸïŒãç¹æ®æåãªãããªã©ïŒãªã©ãåçŽãªæžåŒèšå®ã«ãŒã«ã«æé©ã§ãããŠãŒã¶ãŒãå ¥åãçµãããŸã§ç¡å¹ã«ãªãã¡ãŒã«ã®ãããªãã£ãŒã«ãã§ã¯ãã€ã©ã€ã©ããå¯èœæ§ããããŸãã
- ãã©ãŒã«ã¹ãå€ãããšãïŒæ€èšŒã¯ããŠãŒã¶ãŒããã£ãŒã«ããããã©ãŒã«ã¹ãå€ãããšãã«å®è¡ãããŸããããã¯ãå€ãã®å Žåãæè¯ã®ãã©ã³ã¹ãšèŠãªãããŸãããŠãŒã¶ãŒããšã©ãŒã確èªããåã«æèãçµããããšãã§ããäŸµå ¥æ§ãäœããšæããããŸããéåžžã«äžè¬çã§å¹æçãªæŠç¥ã§ãã
- éä¿¡æïŒæ€èšŒã¯ããŠãŒã¶ãŒãéä¿¡ãã¿ã³ãã¯ãªãã¯ãããšãã«ã®ã¿å®è¡ãããŸããããã¯æå°éã®èŠä»¶ã§ããæ©èœããŸããããŠãŒã¶ãŒãé·ããã©ãŒã ã«å ¥åããéä¿¡ããŠãä¿®æ£ããäžé£ã®ãšã©ãŒã«çŽé¢ããããšã«ãªããããã€ã©ã€ã©ããå¯èœæ§ããããŸãã
æŽç·ŽãããããŠãŒã¶ãŒãã¬ã³ããªãŒãªæŠç¥ã¯ãå€ãã®å Žåããã€ããªããã§ããæåã¯`onBlur`ãæ€èšŒããŸãããã ãããŠãŒã¶ãŒãæåã«ãã©ãŒã ãéä¿¡ããããšãããšãç¡å¹ãªãã£ãŒã«ãã«å¯ŸããŠããç©æ¥µçãª`onChange`æ€èšŒã¢ãŒãã«åãæ¿ããŸããããã«ããããŠãŒã¶ãŒã¯ãåãã£ãŒã«ãããåã³ã¿ããç§»åããããšãªããééãããã°ããä¿®æ£ã§ããŸãã
ã¹ããŒãããŒã¹ã®æ€èšŒ
ææ°ã®ãã©ãŒã ã¢ãŒããã¯ãã£ã§æã匷åãªãã¿ãŒã³ã®1ã€ã¯ãæ€èšŒã«ãŒã«ãUIã³ã³ããŒãã³ãããåé¢ããããšã§ããã³ã³ããŒãã³ãå ã§æ€èšŒããžãã¯ãèšè¿°ãã代ããã«ããã¹ããŒãããšåŒã°ããæ§é åããããªããžã§ã¯ãã§å®çŸ©ããŸãã
ZodãYupãããã³Joiã®ãããªã©ã€ãã©ãªã¯ãããã«åªããŠããŸããããŒã¿ã®åãå¿ é ãã£ãŒã«ããæååã®é·ããæ£èŠè¡šçŸãã¿ãŒã³ãããã«ã¯è€éãªã¯ãã¹ãã£ãŒã«ãäŸåé¢ä¿ãªã©ããã©ãŒã ããŒã¿ã®ã圢ç¶ããå®çŸ©ã§ããŸãã
æŠå¿µçãªäŸïŒZodã®äœ¿çšïŒïŒ
import { z } from 'zod';
const registrationSchema = z.object({
fullName: z.string().min(2, { message: "ååã¯2æå以äžã§ããå¿
èŠããããŸã" }),
email: z.string().email({ message: "æå¹ãªã¡ãŒã«ã¢ãã¬ã¹ãå
¥åããŠãã ãã" }),
age: z.number().min(18, { message: "18æ³ä»¥äžã§ããå¿
èŠããããŸã" }),
password: z.string().min(8, { message: "ãã¹ã¯ãŒãã¯8æå以äžã§ããå¿
èŠããããŸã" }),
confirmPassword: z.string()
}).refine((data) => data.password === data.confirmPassword, {
message: "ãã¹ã¯ãŒããäžèŽããŸãã",
path: ["confirmPassword"], // ãšã©ãŒãæ·»ä»ãããã£ãŒã«ã
});
ãã®ã¢ãããŒãã®å©ç¹ïŒ
- åäžã®ä¿¡é Œã§ããæ å ±æºïŒã¹ããŒãã¯ãããŒã¿ã¢ãã«ã®æ£æºå®çŸ©ã«ãªããŸãã
- åå©çšæ§ïŒãã®ã¹ããŒãã¯ãã¯ã©ã€ã¢ã³ããµã€ããšãµãŒããŒãµã€ãã®äž¡æ¹ã®æ€èšŒã«äœ¿çšã§ããäžè²«æ§ã確ä¿ããã³ãŒãã®éè€ãæžãããŸãã
- ã¯ãªãŒã³ãªã³ã³ããŒãã³ãïŒUIã³ã³ããŒãã³ãã¯ãè€éãªæ€èšŒããžãã¯ã§ç ©éã«ãªãããšã¯ãããŸãããæ€èšŒãšã³ãžã³ãããšã©ãŒã¡ãã»ãŒãžãåãåãã ãã§ãã
- ã¿ã€ãã»ãŒãïŒZodã®ãããªã©ã€ãã©ãªã¯ãã¹ããŒãããçŽæ¥TypeScriptã®åãæšæž¬ã§ãããããã¢ããªã±ãŒã·ã§ã³å šäœã§ããŒã¿ãã¿ã€ãã»ãŒãã§ããããšãä¿èšŒããŸãã
æ€èšŒã¡ãã»ãŒãžã«ãããåœéåïŒi18nïŒ
äžçäžã®ãªãŒãã£ãšã³ã¹ã«ãšã£ãŠãè±èªã§ãšã©ãŒã¡ãã»ãŒãžãããŒãã³ãŒãã£ã³ã°ããããšã¯ãªãã·ã§ã³ã§ã¯ãããŸãããæ€èšŒã¢ãŒããã¯ãã£ã¯ãåœéåããµããŒãããå¿ èŠããããŸãã
ã¹ããŒãããŒã¹ã®ã©ã€ãã©ãªã¯ãi18nã©ã€ãã©ãªïŒ`i18next`ãŸãã¯`react-intl`ãªã©ïŒãšçµ±åã§ããŸããéçãªãšã©ãŒã¡ãã»ãŒãžæååã®ä»£ããã«ã翻蚳ããŒãæäŸããŸãã
æŠå¿µçãªäŸïŒ
fullName: z.string().min(2, { message: "errors.name.minLength" })
ããªãã®i18nã©ã€ãã©ãªã¯ããŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠããã®ããŒãé©åãªèšèªã«è§£æ±ºããŸããããã«ãæ€èšŒã«ãŒã«èªäœã¯å°åã«ãã£ãŠå€ããå¯èœæ§ãããããšã«æ³šæããŠãã ãããéµäŸ¿çªå·ãé»è©±çªå·ãããã«ã¯æ¥ä»ã®åœ¢åŒã§ãããäžçäžã§å€§ããç°ãªããŸããããªãã®ã¢ãŒããã¯ãã£ã¯ãå¿ èŠã«å¿ããŠãã±ãŒã«åºæã®æ€èšŒããžãã¯ãèš±å¯ããå¿ èŠããããŸãã
é«åºŠãªãã©ãŒã ã¢ãŒããã¯ãã£ãã¿ãŒã³
ãã«ãã¹ããããã©ãŒã ïŒãŠã£ã¶ãŒãïŒ
é·ããè€éãªãã©ãŒã ãè€æ°ã®ãæ¶åããããã¹ãããã«åå²ããããšã¯ãåªããUXãã¿ãŒã³ã§ããã¢ãŒããã¯ãã£çã«ãããã¯ç¶æ 管çãšæ€èšŒã«ãããŠèª²é¡ãæç€ºããŸãã
- ç¶æ 管çïŒãã©ãŒã å šäœã®ç¶æ ã¯ã芪ã³ã³ããŒãã³ããŸãã¯ã°ããŒãã«ã¹ãã¢ã«ãã£ãŠç®¡çãããå¿ èŠããããŸããåã¹ãããã¯ããã®äžå€®ã®ç¶æ ããèªã¿åããæžã蟌ã¿ãè¡ãåã³ã³ããŒãã³ãã§ããããã«ããããŠãŒã¶ãŒãã¹ãããéãç§»åãããšãã«ããŒã¿ã®æ°žç¶æ§ã確ä¿ãããŸãã
- æ€èšŒïŒãŠãŒã¶ãŒããæ¬¡ãžããã¯ãªãã¯ãããšãçŸåšã®ã¹ãããã«ååšãããã£ãŒã«ãã®ã¿ãæ€èšŒããå¿ èŠããããŸããä»åŸã®ã¹ãããããã®ãšã©ãŒã§ãŠãŒã¶ãŒãå§åããªãã§ãã ãããæçµçãªéä¿¡ã§ã¯ãå®å šãªã¹ããŒãã«å¯ŸããŠããŒã¿ãªããžã§ã¯ãå šäœãæ€èšŒããå¿ èŠããããŸãã
- ããã²ãŒã·ã§ã³ïŒèŠªã³ã³ããŒãã³ãå ã®ã¹ããŒããã·ã³ãŸãã¯åçŽãªç¶æ 倿°ïŒ`currentStep`ãªã©ïŒã¯ãçŸåšè¡šç€ºãããŠããã¹ããããå¶åŸ¡ã§ããŸãã
åçãã©ãŒã
ãããã¯ããŠãŒã¶ãŒãè€æ°ã®é»è©±çªå·ãè·åçµéšãªã©ããã£ãŒã«ãã远å ãŸãã¯åé€ã§ãããã©ãŒã ã§ããäž»ãªèª²é¡ã¯ããã©ãŒã ã®ç¶æ ã«ãããªããžã§ã¯ãã®é åã管çããããšã§ãã
ã»ãšãã©ã®ææ°ã®ãã©ãŒã ã©ã€ãã©ãªã¯ããã®ãã¿ãŒã³ïŒReact Hook Formã®`useFieldArray`ãªã©ïŒã®ãã«ããŒãæäŸããŠããŸãããããã®ãã«ããŒã¯ãé åå ã®ãã£ãŒã«ãã®è¿œå ãåé€ãäžŠã¹æ¿ãã®è€éãã管çããæ€èšŒç¶æ ãšå€ãæ£ãããããã³ã°ããŸãã
ãã©ãŒã ã«ãããã¢ã¯ã»ã·ããªãã£ïŒa11yïŒ
ã¢ã¯ã»ã·ããªãã£ã¯æ©èœã§ã¯ãããŸããããããã§ãã·ã§ãã«ãªWebéçºã®åºæ¬çãªèŠä»¶ã§ããã¢ã¯ã»ã¹ã§ããªããã©ãŒã ã¯ãå£ãããã©ãŒã ã§ãã
- ã©ãã«ïŒãã¹ãŠã®ãã©ãŒã ã³ã³ãããŒã«ã«ã¯ã`for`ããã³`id`屿§ãä»ããŠãªã³ã¯ããã察å¿ãã`
- ããŒããŒãããã²ãŒã·ã§ã³ïŒãã¹ãŠã®ãã©ãŒã èŠçŽ ã¯ãããŒããŒãã®ã¿ã䜿çšããŠããã²ãŒãããã³æäœå¯èœã§ããå¿ èŠããããŸãããã©ãŒã«ã¹é åºã¯è«ççã§ããå¿ èŠããããŸãã
- ãšã©ãŒãã£ãŒãããã¯ïŒæ€èšŒãšã©ãŒãçºçããå Žåããã£ãŒãããã¯ã¯ã¹ã¯ãªãŒã³ãªãŒããŒã§ã¢ã¯ã»ã¹å¯èœã§ããå¿ èŠããããŸãã`aria-describedby`ã䜿çšããŠããšã©ãŒã¡ãã»ãŒãžã察å¿ããå ¥åã«ããã°ã©ã çã«ãªã³ã¯ããŸãããšã©ãŒç¶æ ã瀺ãããã«ãå ¥åã§`aria-invalid="true"`ã䜿çšããŸãã
- ãã©ãŒã«ã¹ç®¡çïŒãšã©ãŒã®ãããã©ãŒã ãéä¿¡ãããåŸãæåã®ç¡å¹ãªãã£ãŒã«ããŸãã¯ãã©ãŒã ã®äžéšã«ãããšã©ãŒã®æŠèŠã«ããã°ã©ã çã«ãã©ãŒã«ã¹ãç§»åããŸãã
åªãããã©ãŒã ã¢ãŒããã¯ãã£ã¯ãèšèšã«ãã£ãŠã¢ã¯ã»ã·ããªãã£ããµããŒãããŸããé¢å¿äºãåé¢ããããšã§ãã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ãçµã¿èŸŒãŸããåå©çšå¯èœãª`Input`ã³ã³ããŒãã³ããäœæããã¢ããªã±ãŒã·ã§ã³å šäœã§äžè²«æ§ã確ä¿ã§ããŸãã
ãã¹ãŠããŸãšããïŒå®è·µçãªäŸ
React Hook FormãšZodã䜿çšããŠããããã®ååã«åºã¥ããŠç»é²ãã©ãŒã ãæ§ç¯ããããšãæŠå¿µåããŠã¿ãŸãããã
ã¹ããã1ïŒã¹ããŒããå®çŸ©ãã
Zodã䜿çšããŠãããŒã¿åœ¢ç¶ãšæ€èšŒã«ãŒã«ã®åäžã®ä¿¡é Œã§ããæ å ±æºãäœæããŸãããã®ã¹ããŒãã¯ãããã¯ãšã³ããšå ±æã§ããŸãã
ã¹ããã2ïŒç¶æ 管çãéžæãã
React Hook Formã®`useForm`ããã¯ã䜿çšããŠããªãŸã«ããŒãä»ããŠZodã¹ããŒããšçµ±åããŸããããã«ãããã¹ããŒããåºç€ãšããç¶æ 管çïŒå€ããšã©ãŒïŒãšæ€èšŒãåŸãããŸãã
const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(registrationSchema) });
ã¹ããã3ïŒã¢ã¯ã»ã¹å¯èœãªUIã³ã³ããŒãã³ããæ§ç¯ãã
`label`ã`name`ã`error`ãããã³`register`颿°ãåãå
¥ããåå©çšå¯èœãª`
ã¹ããã4ïŒéä¿¡ããžãã¯ãåŠçãã
ã©ã€ãã©ãªã®`handleSubmit`颿°ã¯ãZodæ€èšŒãèªåçã«å®è¡ããŸããå¿ èŠãªã®ã¯ãæ€èšŒæžã¿ã®ãã©ãŒã ããŒã¿ã§åŒã³åºããã`onSuccess`ãã³ãã©ãŒãå®çŸ©ããã ãã§ãããã®ãã³ãã©ãŒå ã§ãAPIåŒã³åºããè¡ããããŒãã£ã³ã°ç¶æ ã管çãããµãŒããŒããè¿ãããå¯èœæ§ã®ãããšã©ãŒïŒäŸïŒãã¡ãŒã«ã¯ãã§ã«äœ¿çšãããŠããŸããïŒãåŠçã§ããŸãã
çµè«
ãã©ãŒã ã®æ§ç¯ã¯äºçްãªäœæ¥ã§ã¯ãããŸããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãéçºè ãšã¯ã¹ããªãšã³ã¹ãããã³ã¢ããªã±ãŒã·ã§ã³ã®æŽåæ§ã®ãã©ã³ã¹ããšãææ ®æ·±ãã¢ãŒããã¯ãã£ãå¿ èŠã§ãããã©ãŒã ãããã¢ããªã±ãŒã·ã§ã³ãšããŠæ±ãããšã§ãå ç¢ãªãœãããŠã§ã¢èšèšååããããã®æ§ç¯ã«é©çšã§ããŸãã
äž»ãªãã€ã³ãïŒ
- ç¶æ ããå§ããïŒæå³çãªç¶æ ç®¡çæŠç¥ãéžæããŸããã»ãšãã©ã®ææ°ã¢ããªã§ã¯ãã©ã€ãã©ãªãæ¯æŽããå¶åŸ¡ã³ã³ããŒãã³ãã®ã¢ãããŒããæé©ã§ãã
- ããžãã¯ãåé¢ããïŒã¹ããŒãããŒã¹ã®æ€èšŒã䜿çšããŠãæ€èšŒã«ãŒã«ãUIã³ã³ããŒãã³ãããåé¢ããŸããããã«ãããããã¯ãªãŒã³ã§ãããä¿å®çã§ãåå©çšå¯èœãªã³ãŒãããŒã¹ãäœæãããŸãã
- ã€ã³ããªãžã§ã³ãã«æ€èšŒããïŒã¯ã©ã€ã¢ã³ããµã€ããšãµãŒããŒãµã€ãã®æ€èšŒãçµã¿åãããŸãããŠãŒã¶ãŒãã€ã©ã€ã©ãããããšãªããæ€èšŒããªã¬ãŒïŒ`onBlur`ã`onSubmit`ïŒãæ éã«éžæããŠã¬ã€ãããŸãã
- ãã¹ãŠã®äººã®ããã«æ§ç¯ããïŒæåããã¢ã¯ã»ã·ããªãã£ïŒa11yïŒãã¢ãŒããã¯ãã£ã«çµã¿èŸŒã¿ãŸããããã¯ããããã§ãã·ã§ãã«ãªéçºã®äº€æžã®äœå°ã®ãªãåŽé¢ã§ãã
é©åã«èšèšããããã©ãŒã ã¯ããŠãŒã¶ãŒã«ã¯èŠããŸãããåã«æ©èœããããã§ããéçºè ã«ãšã£ãŠãããã¯ããã³ããšã³ããšã³ãžãã¢ãªã³ã°ã«å¯Ÿããæçããããããã§ãã·ã§ãã«ã§ããŠãŒã¶ãŒäžå¿ã®ã¢ãããŒãã®èšŒã§ããç¶æ 管çãšæ€èšŒã®æ±ããã¹ã¿ãŒããããšã§ãæœåšçãªäžæºã®åå ããã¢ããªã±ãŒã·ã§ã³ã®ã·ãŒã ã¬ã¹ã§ä¿¡é Œæ§ã®é«ãéšåã«å€ããããšãã§ããŸãã