ãã®ã¬ãã¹ã³ã§ã¯ãããŒã³ãæç¹ã®ããŒãžã§ã³ã§ããGatsby v3ã䜿çšããŠããŸãã
ãã®ãããæ°ãã«è¬çŸ©ãåè¬ããæ¹ã¯ããŒãžã§ã³ã«ã泚æãã ããïŒ
çŸåšãæ°ããããŒãžã§ã³ã䜿ã£ãè¬çŸ©ãæºåäžã§ããã
ãã®ããããã¯ãã³ãã¥ããã£ã®ç®¡çã¯è¡ãããŸããã®ã§ãåèã«ããŠãã ããã
èªåã§äœãç¬èªã®æè¡ããã°ã
React Gatsbyã§ç°¡åã§æ¥œããã§ãð§
éçºèœåãé«ãã
æè¡ããã°ã®åã
éçºè
ãªãäžåºŠãããèããããšã§ããããæè¡ããã°ãéçºã®ã¹ãã«åäžã«åœ¹ç«ã€ãšããããšã§ãã
ç§ãå®éã«åœ¹ç«ã€ãšæããŸããèªåãåŠãã å
å®¹ãæŽçããéçšã§ç¥ããªãå
容ãçºèŠããããšãã§ãããŸããããæ¢ããŠã¿ãéçšãéããŠç§ã®æè¡åãæé·ãããããšãã§ããããã§ãã
æè¡ããã°éçºãåãå·»ã
æ°å€ãã®æ©ã¿ïŒ
- éçºã¹ã¿ãã¯ã®éžæã¯ã©ã®ããã«ïŒ
- æ€çŽ¢ãšã³ãžã³æé©åïŒSEOïŒã¯ã©ã®ããã«è§£æ±ºããŸããïŒ
- ã©ã®éçºããã»ã¹ãçµãã¹ãã§ããïŒ
äœã§ãåããŠãäžçªé£ããæ³ã§ããæè¡ããã°ãåæ§ã§ãããã§ã«å€ãã®éçºè
ãæè¡ããã°ãéå¶ããŠããŸãããæ°ã«ããªããã°ãªããªãèŠçŽ ãå€ãã®ã§ãå°ãªããªãæ¹ãã©ã®ããã«ããã°ã®éçºãå§ããã®ãå¹ãéããŠããŸãã
ãããããã®ãã¹ãŠã®ã³ãŒã¹ã«åŸãããã«æããŠããããã«ããŒããããšãããã©ãã§ãããããããç°¡åã§å¿«é©ã«æè¡ããã°ãéçºã§ããªãã§ããããïŒãã®è¬çŸ©ã¯ãŸãã«ãã®ãããªæ©ã¿ããå§ãŸããŸãã
æè¿ã
ãªã¢ã¯ãã®ã£ãããŒã§äœã
ç°¡åã§è¿
éãªããã°éçºã
Gatsby.jsïŒ
ã®ã£ãããŒã¯çŸåšæã人æ°ããããŸã
ããã³ããšã³ãã©ã€ãã©ãªãªã¢ã¯ãïŒReactïŒããŒã¹ã®
éçãµã€ãçæãã¬ãŒã ã¯ãŒã¯ã§ãã
ãã®ã¬ãã¹ã³ã§ã¯ãæè¿ããã³ããšã³ãåžå Žã§æ¥éã«æé·ããŠããJAM StackããŒã¹ã®ãã¬ãŒã ã¯ãŒã¯ã®äžã§ãéçãµã€ãçæãã¬ãŒã ã¯ãŒã¯ã§ããGatsbyã§æè¡ããã°ãéçºããŠã¿ãŸãã
ããã«ãããå€ãã®ããã³ããšã³ãéçºè
ã䜿çšããŠããTypeScriptã䜿çšããŠãªã¢ã¯ãã¢ããªã±ãŒã·ã§ã³ãäœæããæ¹æ³ãåŠã¶ããšãã§ããŸãã
èªåã§äœã£ãŠã¿ãŠãã ããã
ç¬èªã®æè¡ããã°ïŒ
ãã®è¬çŸ©ã§äœã£ãŠã¿ãããã°ãããããã確èªã§ããŸããã ïŒã·ã§ãŒãã«ããïŒ
ãã®è¬çŸ©ãäœã£ã
ç¥èå
±æè
ã玹ä»ããŸãã
ãžã¥ãã§ã³ã
ããè¯ãéçºè
ã«ãªãããã«åªåãããžã¥ãã¢éçºè
ã§ãã
- éåœããžã¿ã«ã¡ãã£ã¢é«æ ¡åæ¥
- ãœãŠã«åžç«å€§åŠæ°åŠç§åšåŠäž
- ã¹ã¿ãŒãã¢ãããã¯ãã«éçºããŠã§ãããã³ããšã³ãéçºè
ïŒ2019ïŒ
- ãœãŠã«åžç«å€§åŠã®ãããããªã©ã€ãªã³ã®ãããªè¬çŸ©è
ïŒ2019ïŒ
- ã¹ã¿ãŒãã¢ããããã€ãããã³ã«ãWebããã³ããšã³ãéçºè
ïŒ2022ãïŒ
é çªã«åŠç¿ããŠã¿ãŠãã ããïŒ
ã»ã¯ã·ã§ã³0 - Gatsbyã®åŠç¿ãšéçºç°å¢ã®èšå®
Gatsbyãã¬ãŒã ã¯ãŒã¯ãšã¯äœãã調ã¹ãŠãããã°éçºç°å¢ãæŽçããŸãããã
ã»ã¯ã·ã§ã³ 1 - ç°¡åã«ããŒãžã衚瀺ãã
Gatsbyã§äœæãããããžã§ã¯ããå®è¡ããŠWebãµã€ãã衚瀺ããŸãããã
ã»ã¯ã·ã§ã³2 - æçš¿ãªã¹ãã衚瀺ããã¡ã€ã³ããŒãžã®å®è£
ããã°ã³ã³ãã³ãã®ãªã¹ãã衚瀺ãããã¡ã€ã³ããŒãžã®æ çµã¿ãèšå®ããŸãããã
ã»ã¯ã·ã§ã³3 - ã¡ã€ã³ããŒãžã«å®éã®ããŒã¿ã衚瀺ãã
GraphQLã§ã€ã³ããŒãããããŒã¿ãã¡ã€ã³ããŒãžã«è¡šç€ºããŸãããã
ã»ã¯ã·ã§ã³4 - ãã¹ãã¢ã€ãã ãªã³ã¯ãäœæããŠé©åãªæçš¿ããŒãžã«ãªã³ã¯ãã
ã¡ã€ã³ããŒãžã«è¡šç€ºãããã³ã³ãã³ããã¯ãªãã¯ãããšãããŒãžãç§»åããããã«ãªã³ã¯ããªã³ã¯ããŸãããã
ã»ã¯ã·ã§ã³5 - æçš¿ããŒãžã®å®è£
å®éã®ããã°ã³ã³ãã³ãã衚瀺ãããããŒãžãæŽçããŸãããã
ã»ã¯ã·ã§ã³6 - 404ãšã©ãŒããŒãžã®å®è£
éåžžã«éèŠãªèŠçŽ ã§ãããç°¡åã«ééã§ããéšåã§ãã404ããŒãžã远å ããŸãããã
ã»ã¯ã·ã§ã³7 - æ€çŽ¢ãšã³ãžã³ã®æé©åãšWebã¢ã¯ã»ã·ããªãã£ã®åäžå¯Ÿç
誰ã§ãå©çšã§ããããã«Webã¢ã¯ã»ã·ããªãã£æšæºãåãããŠã¿ãŠãæ€çŽ¢çµæã®äžã«æµ®ãã¶ããã«SEOäœæ¥ãé²ããŠã¿ãŸãããã
ã»ã¯ã·ã§ã³ 8 - ãµã€ãã®ãããã€ãšãŠã§ããã¹ã¿ãŒ ããŒã«ã«ãµã€ããç»é²ãã
éçºããããã°ãé
åžããæ€çŽ¢ãšã³ãžã³ãæ€çŽ¢ã§ããããã«ãŠã§ããã¹ã¿ãŒããŒã«ã«ããã°ãç»é²ããŠã¿ãŸãããã
åè¬åã«ã確èªãã ããïŒ
- æ¬è¬çŸ©ã¯ããã¹ã圢åŒã®è¬çŸ©ã§ãå¥éæ åãæäŸããŸããð