ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ãæ¢ãããã®æè¡ã¯éšåçãªHTMLãé ä¿¡ããåæèªã¿èŸŒã¿æéãæ¹åããããšã§ãäžçäžã®Reactã¢ããªã±ãŒã·ã§ã³ã«ããããŠãŒã¶ãŒäœéšãåäžãããŸãã
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ïŒéšåçãªHTMLé ä¿¡ã«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž
çµ¶ãéãªãé²åããWebéçºã®äžçã«ãããŠãããã©ãŒãã³ã¹ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãããéèŠãªèŠçŽ ã§ããç¶ããŠããŸãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®äººæ°ã®JavaScriptã©ã€ãã©ãªã§ããReactã¯ããµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ãšåŒã°ãã匷åãªæ©èœãå°å ¥ããŸããããã®æè¡ã«ããããµãŒããŒã§å©çšå¯èœã«ãªã£ãéšåçãªHTMLã³ã³ãã³ãããã©ãŠã¶ã«é ä¿¡ããããšãã§ããåæèªã¿èŸŒã¿æéã®ççž®ãšãããå¿çæ§ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãå®çŸããŸããæ¬ããã°èšäºã§ã¯ãReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®æŠå¿µããã®å©ç¹ãå®è£ æ¹æ³ããããŠã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããéçºè ã®ããã®å®è·µçãªèæ ®äºé ã«ã€ããŠæãäžããŠãããŸãã
ReactãµãŒããŒã³ã³ããŒãã³ããçè§£ãã
ã¹ããªãŒãã³ã°ã«é£ã³èŸŒãåã«ããã®åºç€ã§ããReactãµãŒããŒã³ã³ããŒãã³ãïŒRSCïŒãçè§£ããããšãäžå¯æ¬ ã§ããåŸæ¥ãReactã³ã³ããŒãã³ãã¯äž»ã«ãã©ãŠã¶ã§å®è¡ãããããŒã¿ãååŸããã¯ã©ã€ã¢ã³ããµã€ãã§ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãã¬ã³ããªã³ã°ããŠããŸãããããã¯ããã©ãŠã¶ãJavaScriptãããŠã³ããŒããè§£æãå®è¡ããã®ãåŸ ã€ãããåæã¬ã³ããªã³ã°ãé ããåå ãšãªãããšããããŸãã
äžæ¹ããµãŒããŒã³ã³ããŒãã³ãã¯ãåæã¬ã³ããªã³ã°ãã§ãŒãºã§ãµãŒããŒäžã§å®è¡ãããŸããããã«ãããããŒã¿ãœãŒã¹ã«è¿ãå Žæã§ããŒã¿ã®ååŸãšã¬ã³ããªã³ã°ãè¡ãããã¯ã©ã€ã¢ã³ãã«éä¿¡ãããJavaScriptã®éãåæžã§ããŸãããŸãããµãŒããŒã³ã³ããŒãã³ãã¯ãããŒã¿ããŒã¹ããã¡ã€ã«ã·ã¹ãã ãªã©ã®ãµãŒããŒãµã€ãã®ãªãœãŒã¹ã«ããããã®ãªãœãŒã¹ãã¯ã©ã€ã¢ã³ãã«å ¬éããããšãªãã¢ã¯ã»ã¹ã§ããŸãã
ReactãµãŒããŒã³ã³ããŒãã³ãã®äž»ãªç¹åŸŽïŒ
- ãµãŒããŒäžã§å®è¡ïŒããžãã¯ãšããŒã¿ååŸã¯ãµãŒããŒãµã€ãã§è¡ãããŸãã
- ã¯ã©ã€ã¢ã³ããµã€ãJavaScriptããŒãïŒããã©ã«ãã§ã¯ããµãŒããŒã³ã³ããŒãã³ãã¯ã¯ã©ã€ã¢ã³ããµã€ãã®ãã³ãã«ãµã€ãºãå¢å ãããŸããã
- ããã¯ãšã³ããªãœãŒã¹ãžã®ã¢ã¯ã»ã¹ïŒããŒã¿ããŒã¹ããã¡ã€ã«ã·ã¹ãã ãAPIã«çŽæ¥ã¢ã¯ã»ã¹ã§ããŸãã
- ã»ãã¥ãªãã£ã®åŒ·åïŒãµãŒããŒãµã€ãã§ã®å®è¡ã«ãããæ©å¯ããŒã¿ãããžãã¯ãã¯ã©ã€ã¢ã³ãã«å ¬éãããã®ãé²ããŸãã
ã¹ããªãŒãã³ã°ã®å
ãµãŒããŒã³ã³ããŒãã³ãã¯å€§å¹ ãªããã©ãŒãã³ã¹åäžããããããŸãããã¯ã©ã€ã¢ã³ãã«HTMLãéä¿¡ããåã«ãå¿ èŠãªãã¹ãŠã®ããŒã¿ãååŸããã³ã³ããŒãã³ãããªãŒå šäœãã¬ã³ããªã³ã°ããã®ã«ãããæéã«ãã£ãŠäŸç¶ãšããŠå¶éãããå¯èœæ§ããããŸããããã§ã¹ããªãŒãã³ã°ã圹ç«ã¡ãŸãã
ã¹ããªãŒãã³ã°ã«ããããµãŒããŒã¯HTMLã®ãã£ã³ã¯ïŒå¡ïŒãå©çšå¯èœã«ãªã£ãæç¹ã§ããã«ã¯ã©ã€ã¢ã³ãã«éä¿¡ã§ããŸããããŒãžå šäœãã¬ã³ããªã³ã°ãããã®ãåŸ ã€ä»£ããã«ããã©ãŠã¶ã¯UIã®äžéšãæ©æã«è¡šç€ºãå§ããããšãã§ããäœæçãªèªã¿èŸŒã¿é床ãšå šäœçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
ã¹ããªãŒãã³ã°ã®ä»çµã¿ïŒ
- ãµãŒããŒãReactã³ã³ããŒãã³ãããªãŒã®ã¬ã³ããªã³ã°ãéå§ããŸãã
- ãµãŒããŒã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãå®äºãããšããµãŒããŒã¯å¯Ÿå¿ããHTMLãã©ã°ã¡ã³ããã¯ã©ã€ã¢ã³ãã«éä¿¡ããŸãã
- ãã©ãŠã¶ã¯ãããã®HTMLãã©ã°ã¡ã³ããæ®µéçã«ã¬ã³ããªã³ã°ããå°çããã³ã³ãã³ãããŠãŒã¶ãŒã«è¡šç€ºããŸãã
- ã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ãïŒãã©ãŠã¶ã§å®è¡ãããåŸæ¥ã®Reactã³ã³ããŒãã³ãïŒã¯ãæåã®HTMLãé ä¿¡ãããåŸã«ãã€ãã¬ãŒã·ã§ã³ãããã€ã³ã¿ã©ã¯ãã£ãæ§ãæå¹ã«ãªããŸãã
ã³ã¡ã³ãä»ãã®ããã°èšäºãèªã¿èŸŒãã·ããªãªãæ³åããŠã¿ãŠãã ãããã¹ããªãŒãã³ã°ããªãå ŽåããŠãŒã¶ãŒã¯ããã°èšäºå šäœãšãã®ãã¹ãŠã®ã³ã¡ã³ããååŸããã¬ã³ããªã³ã°ããããŸã§ã空çœã®ç»é¢ãèŠãããšã«ãªããŸããã¹ããªãŒãã³ã°ã䜿çšãããšããŠãŒã¶ãŒã¯ãŸãããã°èšäºã®ã³ã³ãã³ããèŠãŠããã®åŸã«ã³ã¡ã³ããèªã¿èŸŒãŸããã®ã確èªã§ããŸããããã«ãããã¯ããã«é«éã§é åçãªåæäœéšãæäŸãããŸãã
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®å©ç¹
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®å©ç¹ã¯ãåã«äœæããã©ãŒãã³ã¹ãåäžããã ãã«ãšã©ãŸããŸããã以äžã«ãã®å©ç¹ã詳ããèŠãŠãããŸãã
1. åæèªã¿èŸŒã¿æéã®ççž®
ããã¯æãçŽæ¥çã§é¡èãªå©ç¹ã§ããéšåçãªHTMLãé ä¿¡ããããšã«ããããã©ãŠã¶ã¯ã³ã³ãã³ãã®ã¬ã³ããªã³ã°ãã¯ããã«æ©ãéå§ã§ãããŠãŒã¶ãŒãç»é¢ã«äœããèŠããŸã§ã®æéãççž®ããŸããããã¯ãã€ã³ã¿ãŒãããæ¥ç¶ãé ããŠãŒã¶ãŒããå°ççã«é¢ããå Žæããã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ãããŠãŒã¶ãŒã«ãšã£ãŠç¹ã«éèŠã§ãã
äŸïŒååãäžèŠ§è¡šç€ºããå€§èŠæš¡ãªeã³ããŒã¹ãµã€ããã¹ããªãŒãã³ã°ã«ãããäž»èŠãªåå詳现ïŒç»åãã¿ã€ãã«ãäŸ¡æ ŒïŒãè¿ éã«èªã¿èŸŒã¿ãéèŠåºŠã®äœãæ å ±ïŒã¬ãã¥ãŒãé¢é£ååïŒã¯ããã¯ã°ã©ãŠã³ãã§èªã¿èŸŒãããšãã§ããŸããããã«ããããŠãŒã¶ãŒã¯èå³ã®ããååæ å ±ãããã«èŠã€ããŠæäœã§ããããã«ãªããŸãã
2. äœæããã©ãŒãã³ã¹ã®åäž
å šäœã®èªã¿èŸŒã¿æéãåãã§ãã£ãŠããã¹ããªãŒãã³ã°ã¯äœæçãªããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãããŠãŒã¶ãŒã¯ã空çœã®ç»é¢ãèŠã€ããããããé²æç¶æ³ãã³ã³ãã³ããåŸã ã«è¡šç€ºãããã®ãèŠããšããŠã§ããµã€ããé¢ããå¯èœæ§ãäœããªããŸããããã¯ããšã³ã²ãŒãžã¡ã³ããšã³ã³ããŒãžã§ã³çã®åäžã«ã€ãªããå¯èœæ§ããããŸãã
äŸïŒèšäºã³ã³ãã³ããã¹ããªãŒãã³ã°ãããã¥ãŒã¹ãµã€ããèŠåºããšæåã®æ®µèœãè¿ éã«èªã¿èŸŒãŸãããŠãŒã¶ãŒã«å³åº§ã«ã³ã³ããã¹ããæäŸããŸããèšäºã®æ®ãã®éšåã¯æ®µéçã«èªã¿èŸŒãŸããã³ã³ãã³ããå©çšå¯èœã«ãªãã«ã€ããŠãŠãŒã¶ãŒã®é¢å¿ãåŒãã€ãç¶ããŸãã
3. ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž
ããé«éã§å¿çæ§ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã¯ãããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«çŽçµããŸãããŠãŒã¶ãŒã¯ããããããšå¿çæ§ã®è¯ãã¢ããªã±ãŒã·ã§ã³ã奜ãã§äœ¿çšããåŸåããããæºè¶³åºŠãšãã€ã€ã«ãã£ã®åäžã«ã€ãªãããŸãã
äŸïŒã³ã³ãã³ããã£ãŒããã¹ããªãŒãã³ã°ãããœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ããŠãŒã¶ãŒã¯ã¹ã¯ããŒã«ããã«ã€ããŠæ°ããæçš¿ãåçã«è¡šç€ºãããã®ãèŠãŠãã·ãŒã ã¬ã¹ã§é åçãªãã©ãŠãžã³ã°äœéšãåŸãããŸããããã«ããã倧éã®æçš¿ãäžåºŠã«èªã¿èŸŒãŸããã®ãåŸ ã€ãšãããã©ã¹ãã¬ãŒã·ã§ã³ãåé¿ã§ããŸãã
4. TTFBïŒTime to First ByteïŒã®åæž
TTFBã¯ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ã«ãšã£ãŠéèŠãªææšã§ããã¹ããªãŒãã³ã°ã«ããããµãŒããŒã¯HTMLããŒã¿ã®æåã®ãã€ããããæ©ãã¯ã©ã€ã¢ã³ãã«éä¿¡ã§ããTTFBãåæžããã¢ããªã±ãŒã·ã§ã³å šäœã®å¿çæ§ãåäžãããŸãã
äŸïŒã¹ããªãŒãã³ã°ã掻çšããŠããããŒãšããã²ãŒã·ã§ã³ããŒãè¿ éã«é ä¿¡ããããã°ãµã€ããããã«ãããåæã®TTFBãæ¹åãããã¡ã€ã³ã³ã³ãã³ããå®å šã«èªã¿èŸŒãŸããåã§ããŠãŒã¶ãŒããµã€ãã®ããã²ãŒã·ã§ã³ãéå§ã§ããããã«ãªããŸãã
5. ã³ã³ãã³ãé ä¿¡ã®åªå é äœä»ã
ã¹ããªãŒãã³ã°ã«ãããéçºè ã¯éèŠãªã³ã³ãã³ãã®é ä¿¡ãåªå ããããšãã§ããŸãããµãŒããŒã³ã³ããŒãã³ããæŠç¥çã«é 眮ããããããã¬ã³ããªã³ã°ãããé åºãå¶åŸ¡ããããšã§ãéçºè ã¯æãéèŠãªæ å ±ãæåã«ãŠãŒã¶ãŒã«è¡šç€ºãããããã«ã§ããŸãã
äŸïŒã¬ãã¹ã³ã³ã³ãã³ããã¹ããªãŒãã³ã°ãããªã³ã©ã€ã³æè²ãã©ãããã©ãŒã ãäž»èŠãªãããªãã¬ãŒã€ãŒãšãã©ã³ã¹ã¯ãªãããæåã«èªã¿èŸŒãŸããè£è¶³è³æïŒã¯ã€ãºããã£ã¹ã«ãã·ã§ã³ãã©ãŒã©ã ïŒã¯ããã¯ã°ã©ãŠã³ãã§èªã¿èŸŒãŸããŸããããã«ãããåŠçã¯ãã¹ãŠãèªã¿èŸŒãŸããã®ãåŸ ã€ããšãªããããã«åŠç¿ãéå§ã§ããŸãã
6. SEOã®åäž
Googleã®ãããªæ€çŽ¢ãšã³ãžã³ã¯ãããŒãžã®èªã¿èŸŒã¿é床ãã©ã³ãã³ã°èŠå ãšããŠèæ ®ããŸããã¹ããªãŒãã³ã°ã«ãã£ãŠèªã¿èŸŒã¿æéãæ¹åããããšã§ããŠã§ããµã€ãã¯æ€çŽ¢ãšã³ãžã³ã©ã³ãã³ã°ãåäžãããããå€ãã®ãªãŒã¬ããã¯ãã©ãã£ãã¯ãåŒãä»ããå¯èœæ§ããããŸããã³ã³ãã³ããæ©ãå©çšå¯èœã«ãªãã»ã©ãæ€çŽ¢ãšã³ãžã³ã®ã¯ããŒã©ãŒã¯ãããæ©ãã€ã³ããã¯ã¹ã§ããŸãã
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®å®è£
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®å®è£ ã«ã¯ããã€ãã®ã¹ããããå«ãŸããŸãã以äžã«ãã®ããã»ã¹ã®æŠèŠã瀺ããŸãã
1. ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ã®ã»ããã¢ãã
ã¹ããªãŒãã³ã°ããµããŒããããµãŒããŒãµã€ãã¬ã³ããªã³ã°ã®ã»ããã¢ãããå¿ èŠã§ããNext.jsãRemixã®ãããªãã¬ãŒã ã¯ãŒã¯ã¯ãRSCãšã¹ããªãŒãã³ã°ã®çµã¿èŸŒã¿ãµããŒããæäŸããŠããŸãããããã¯ãReactã®`renderToPipeableStream` APIã䜿çšããŠãç¬èªã®ã«ã¹ã¿ã ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ãœãªã¥ãŒã·ã§ã³ãå®è£ ããããšãã§ããŸãã
2. ãµãŒããŒã³ã³ããŒãã³ãã®å®çŸ©
ãµãŒããŒã§ã¬ã³ããªã³ã°å¯èœãªã³ã³ããŒãã³ããç¹å®ããŸãããããã¯éåžžãããŒã¿ãååŸããããµãŒããŒãµã€ãã®ããžãã¯ãå®è¡ãããããã³ã³ããŒãã³ãã§ããã¯ã©ã€ã¢ã³ããµã€ãã®ã€ã³ã¿ã©ã¯ãã£ããã£ãå«ãã³ã³ããŒãã³ãã«ã¯ `'use client'` ãã£ã¬ã¯ãã£ãã远å ããã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ããšããŠåºå¥ããŸãã
3. ããŒã¿ååŸã®å®è£
ãµãŒããŒã³ã³ããŒãã³ãå ã§ããŒã¿ååŸãå®è£ ããŸããé©åãªããŒã¿ååŸã©ã€ãã©ãªãæè¡ã䜿çšããŠãããŒã¿ããŒã¹ãAPIããŸãã¯ä»ã®ãµãŒããŒãµã€ããªãœãŒã¹ããããŒã¿ãååŸããŸããããŒã¿ååŸã®ããã©ãŒãã³ã¹ãæé©åããããã«ããã£ãã·ã¥æŠç¥ã®äœ¿çšãæ€èšããŠãã ããã
4. Suspenseå¢çã®æŽ»çš
ã¬ã³ããªã³ã°ã«æéããããå¯èœæ§ã®ãããµãŒããŒã³ã³ããŒãã³ãã<Suspense>å¢çã§ã©ããããŸããããã«ãããã³ã³ããŒãã³ãããµãŒããŒã§ã¬ã³ããªã³ã°ãããŠããéããã©ãŒã«ããã¯UIïŒäŸïŒããŒãã£ã³ã°ã¹ãããŒïŒã衚瀺ã§ããŸããSuspenseå¢çã¯ãã¹ããªãŒãã³ã°äžã«ã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«äžå¯æ¬ ã§ãã
äŸïŒ
<Suspense fallback={<p>ã³ã¡ã³ããèªã¿èŸŒã¿äž...</p>}>
<CommentList postId={postId} />
</Suspense>
5. ãµãŒããŒã§ã®ã¹ããªãŒãã³ã°ã®èšå®
HTMLãã©ã°ã¡ã³ããå©çšå¯èœã«ãªã次第ã¯ã©ã€ã¢ã³ãã«ã¹ããªãŒãã³ã°ããããã«ãµãŒããŒãèšå®ããŸããããã«ã¯éåžžããµãŒããŒãµã€ãã¬ã³ããªã³ã°ãã¬ãŒã ã¯ãŒã¯ãæäŸããã¹ããªãŒãã³ã°APIã䜿çšããããã«ã¹ã¿ã ã®ã¹ããªãŒãã³ã°ãœãªã¥ãŒã·ã§ã³ãå®è£ ããããšãå«ãŸããŸãã
6. ã¯ã©ã€ã¢ã³ããµã€ãã®ãã€ãã¬ãŒã·ã§ã³
æåã®HTMLãé ä¿¡ãããåŸããã©ãŠã¶ã¯ã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ãããã€ãã¬ãŒã·ã§ã³ããã€ã³ã¿ã©ã¯ãã£ãã«ããå¿ èŠããããŸããReactã¯ãã€ãã¬ãŒã·ã§ã³ãèªåçã«åŠçããŸãããã¹ã ãŒãºãªãã€ãã¬ãŒã·ã§ã³ããã»ã¹ã確ä¿ããããã«ãã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ãã®ããã©ãŒãã³ã¹ãæé©åããå¿ èŠãããå ŽåããããŸãã
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã«ãããå®è·µçãªèæ ®äºé
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããéã«ã¯ãæé©ãªããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããããã«ãããã€ãã®è¿œå èŠçŽ ãèæ ®ããå¿ èŠããããŸãã
1. ã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒ
CDNã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®éçã¢ã»ããïŒJavaScriptãCSSãç»åïŒãäžçäžã«é 眮ããããµãŒããŒã«é ä¿¡ããŸããããã«ãããé å»¶ãæžå°ãããŠãŒã¶ãŒã¯å Žæã«é¢ä¿ãªãè¿ éã«ã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ã§ããããã«ãªããŸãã
äŸïŒåç±³ããšãŒããããã¢ãžã¢ã«ãµãŒããŒãæã€CDNããç»åãæäŸããããšã§ãåå°åã®ãŠãŒã¶ãŒãå°ççã«è¿ããµãŒããŒããç»åãããŠã³ããŒãã§ããããã«ãªããŸãã
2. ãžãªãã±ãŒã·ã§ã³ãšå°åããŒã¿
ãžãªãã±ãŒã·ã§ã³ã䜿çšããŠãŠãŒã¶ãŒã®å Žæãç¹å®ããããã«å¿ããŠå°åããŒã¿ãé ä¿¡ããããšãæ€èšããŠãã ãããããã«ããããããã¯ãŒã¯çµç±ã§è»¢éããå¿ èŠãããããŒã¿éãåæžããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
äŸïŒãŠãŒã¶ãŒã®å°ççãªå Žæã«åºã¥ããŠãçŸå°ã®é貚ãšèšèªã§äŸ¡æ Œã衚瀺ããŸãã
3. ããŒã¿ã»ã³ã¿ãŒã®å Žæ
ã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã«ãµãŒãã¹ãæäŸããããã«æŠç¥çã«é 眮ãããããŒã¿ã»ã³ã¿ãŒã®å ŽæãéžæããŸãããããã¯ãŒã¯æ¥ç¶æ§ãã€ã³ãã©ã®ä¿¡é Œæ§ãèŠå¶éµå®ãªã©ã®èŠçŽ ãèæ ®ããŠãã ããã
äŸïŒã¢ããªã±ãŒã·ã§ã³ãç±³åœããšãŒããããã¢ãžã¢ã®ããŒã¿ã»ã³ã¿ãŒã§ãã¹ãããåå°åã®ãŠãŒã¶ãŒã«å¯ŸããŠäœé å»¶ã確ä¿ããŸãã
4. ãã£ãã·ã¥æŠç¥
ãµãŒããŒããååŸããå¿ èŠãããããŒã¿éãæå°éã«æããããã«ã广çãªãã£ãã·ã¥æŠç¥ãå®è£ ããŸããããã«ãããç¹ã«é »ç¹ã«ã¢ã¯ã»ã¹ãããã³ã³ãã³ãã®ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
äŸïŒã³ã³ãã³ããã£ãã·ã¥ã䜿çšããŠãµãŒããŒã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°æžã¿HTMLãä¿åãããµãŒããŒãã³ã³ããŒãã³ããåã¬ã³ããªã³ã°ããããšãªããªã¯ãšã¹ãã«è¿ éã«å¿çã§ããããã«ããŸãã
5. åœéåïŒi18nïŒãšå°ååïŒl10nïŒ
ã¢ããªã±ãŒã·ã§ã³ãè€æ°ã®èšèªãšå°åããµããŒãããŠããããšã確èªããŸããi18nããã³l10nã©ã€ãã©ãªã䜿çšããŠããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãšã³ã³ãã³ãããŠãŒã¶ãŒã®ãã±ãŒã«ã«é©å¿ãããŸããããã«ã¯ãããã¹ãã®ç¿»èš³ãæ¥ä»ãšæ°å€ã®ãã©ãŒããããããŸããŸãªæåã»ããã®åŠçãå«ãŸããŸãã
äŸïŒ`i18next`ã®ãããªã©ã€ãã©ãªã䜿çšããŠç¿»èš³ã管çãããŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠèšèªåºæã®ã³ã³ãã³ããåçã«èªã¿èŸŒã¿ãŸãã
6. ãããã¯ãŒã¯æ¥ç¶ã«é¢ããèæ ®äºé
ã€ã³ã¿ãŒãããæ¥ç¶ãé ãããŸãã¯äžå®å®ãªãŠãŒã¶ãŒã«é æ ®ããŸããããŒã¿è»¢éãæå°éã«æãããããã¯ãŒã¯ãšã©ãŒãé©åã«åŠçããããã«ã¢ããªã±ãŒã·ã§ã³ãæé©åããŸããé å»¶èªã¿èŸŒã¿ãã³ãŒãåå²ãªã©ã®æè¡ã䜿çšããŠãåæèªã¿èŸŒã¿æéãæ¹åããããšãæ€èšããŠãã ããã
äŸïŒç»åããããªã«é å»¶èªã¿èŸŒã¿ãå®è£ ãããã¥ãŒããŒãã«è¡šç€ºããããŸã§ããŠã³ããŒããããªãããã«ããŸãã
7. ã¢ãã¿ãªã³ã°ãšããã©ãŒãã³ã¹åæ
ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããæ¹åã®äœå°ãããé åãç¹å®ããŸããããã©ãŒãã³ã¹åæããŒã«ã䜿çšããŠãTTFBãããŒãžèªã¿èŸŒã¿æéãã¬ã³ããªã³ã°æéãªã©ã®äž»èŠãªã¡ããªã¯ã¹ã远跡ããŸããããã¯ãã°ããŒãã«ãŠãŒã¶ãŒåãã«ã¢ããªã±ãŒã·ã§ã³ãæé©åããã®ã«åœ¹ç«ã¡ãŸãã
å®éã®ã¢ããªã±ãŒã·ã§ã³ã®äŸ
ããã€ãã®äººæ°ã®ãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã«ããã§ã«ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã掻çšããŠããŸãã以äžã«ããã€ãã®äŸãæããŸãã
- eã³ããŒã¹ãµã€ãïŒã¬ãã¥ãŒãé¢é£ååãããã¯ã°ã©ãŠã³ãã§èªã¿èŸŒã¿ãªãããååãªã¹ããšè©³çްãè¿ éã«è¡šç€ºããŸãã
- ãã¥ãŒã¹ãµã€ãïŒèšäºã³ã³ãã³ããã¹ããªãŒãã³ã°ããé«éã§é åçãªèªæžäœéšãæäŸããŸãã
- ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ïŒã³ã³ãã³ããã£ãŒããšã³ã¡ã³ããåçã«èªã¿èŸŒã¿ãã·ãŒã ã¬ã¹ãªãã©ãŠãžã³ã°äœéšãåµåºããŸãã
- ãªã³ã©ã€ã³æè²ãã©ãããã©ãŒã ïŒã¬ãã¹ã³ã³ã³ãã³ããšãããªãã¹ããªãŒãã³ã°ããé«éã§å¹ççãªåŠç¿äœéšãæäŸããŸãã
- æ è¡äºçŽãµã€ãïŒç»åãã¬ãã¥ãŒãããã¯ã°ã©ãŠã³ãã§èªã¿èŸŒã¿ãªãããæ€çŽ¢çµæãšããã«ã®è©³çްãè¿ éã«è¡šç€ºããŸãã
課é¡ãšå¶çŽ
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã¯å€§ããªå©ç¹ãæäŸããŸãããããã€ãã®èª²é¡ãšå¶çŽãååšããŸãã
- è€éãïŒã¹ããªãŒãã³ã°ã®å®è£ ã¯ãåŸæ¥ã®ã¯ã©ã€ã¢ã³ããµã€ãã¬ã³ããªã³ã°ãšæ¯èŒããŠãããè€éãªã»ããã¢ãããå¿ èŠã§ãã
- ãããã°ïŒãµãŒããŒãµã€ãã¬ã³ããªã³ã°ãšã¹ããªãŒãã³ã°ã®ãããã°ã¯ãã¯ã©ã€ã¢ã³ããµã€ãã®ã³ãŒãã®ãããã°ãããé£ããå ŽåããããŸãã
- ãã¬ãŒã ã¯ãŒã¯ãžã®äŸåïŒãµãŒããŒãµã€ãã¬ã³ããªã³ã°ãšã¹ããªãŒãã³ã°ããµããŒãããã«ã¯ããã¬ãŒã ã¯ãŒã¯ãŸãã¯ã«ã¹ã¿ã ãœãªã¥ãŒã·ã§ã³ãå¿ èŠã§ãã
- ããŒã¿ååŸæŠç¥ïŒããã©ãŒãã³ã¹ã®ããã«ããã¯ãé¿ããããã«ãããŒã¿ååŸãæ éã«èšç»ããæé©åããå¿ èŠããããŸãã
- ã¯ã©ã€ã¢ã³ããµã€ãã®ãã€ãã¬ãŒã·ã§ã³ïŒé©åã«æé©åãããŠããªãå Žåãã¯ã©ã€ã¢ã³ããµã€ãã®ãã€ãã¬ãŒã·ã§ã³ãäŸç¶ãšããŠããã©ãŒãã³ã¹ã®ããã«ããã¯ã«ãªãå¯èœæ§ããããŸãã
ã¹ããªãŒãã³ã°ããã©ãŒãã³ã¹ãæé©åããããã®ãã¹ããã©ã¯ãã£ã¹
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®å©ç¹ãæå€§åããæœåšçãªæ¬ ç¹ãæå°éã«æããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãæ€èšããŠãã ããã
- ããŒã¿ååŸã®æé©åïŒãã£ãã·ã¥ããããåŠçããã®ä»ã®æè¡ã䜿çšããŠããµãŒããŒããååŸããå¿ èŠãããããŒã¿éãæå°éã«æããŸãã
- ã³ã³ããŒãã³ãã¬ã³ããªã³ã°ã®æé©åïŒäžèŠãªåã¬ã³ããªã³ã°ãé¿ããã¡ã¢åæè¡ã䜿çšããŠã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãåäžãããŸãã
- ã¯ã©ã€ã¢ã³ããµã€ãJavaScriptã®æå°åïŒã¯ã©ã€ã¢ã³ãã§ããŠã³ããŒãããã³å®è¡ããå¿ èŠãããJavaScriptã®éãåæžããŸãã
- ã³ãŒãåå²ã®äœ¿çšïŒã³ãŒããããå°ããªãã£ã³ã¯ã«åå²ããŠãåæèªã¿èŸŒã¿æéãæ¹åããŸãã
- ç»åãšãããªã®æé©åïŒç»åãšãããªãå§çž®ããŠãã¡ã€ã«ãµã€ãºãåæžããèªã¿èŸŒã¿æéãæ¹åããŸãã
- ããã©ãŒãã³ã¹ã®ç£èŠïŒã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããæ¹åã®äœå°ãããé åãç¹å®ããŸãã
çµè«
ReactãµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®åŒ·åãªæè¡ã§ãããµãŒããŒã§å©çšå¯èœã«ãªã£ãéšåçãªHTMLã³ã³ãã³ãããã©ãŠã¶ã«é ä¿¡ããããšã§ãã¹ããªãŒãã³ã°ã¯åæèªã¿èŸŒã¿æéãäœæããã©ãŒãã³ã¹ãããã³å šäœçãªå¿çæ§ãå€§å¹ ã«æ¹åã§ããŸããã¹ããªãŒãã³ã°ã®å®è£ ã«ã¯æ éãªèšç»ãšæé©åãå¿ èŠã§ããããããæäŸããå©ç¹ã¯ãã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããéçºè ã«ãšã£ãŠè²ŽéãªããŒã«ãšãªããŸããReactãé²åãç¶ããã«ã€ããŠããµãŒããŒã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã¯Webéçºã®äžçã§ãŸããŸãéèŠãªéšåã«ãªãã§ããããæ¬ããã°èšäºã§èª¬æããæŠå¿µãå©ç¹ãå®è·µçãªèæ ®äºé ãçè§£ããããšã§ãéçºè ã¯ã¹ããªãŒãã³ã°ã掻çšããŠãäžçäžã®ãŠãŒã¶ãŒã®ããã«ããéããããé åçã§ãããã¢ã¯ã»ã¹ããããWebã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã