2023幎ãâæ¯ãè¿ã
Advent Calendar é å»æ¯ åªåãã®èšäºã¯UEC2 Advent Calendar 2023ã®10æ¥ç®ã®èšäºã§ãã
ããã«ã¡ã¯ããã(@sushi_chan_sub)ã§ãã
12/10ã«èšäºãæçš¿ããã¯ãããã¹ã±ãžã¥ãŒã«ç®¡çäžè¶³ã§å®å šã«åŽ©å£ããŸããã倧å€ãè¿·æããããããŸããã
2023幎ã¯ãæãããããæ°ããããšã«ææŠããŠãããããäœã£ã幎ã§ããããã£ãããªã®ã§æ¯ãè¿ãããŠããããã玹ä»ããããšæããŸãã
åTypeScript, åContribution
ç§ã¯åç¥ãšãããªãŒãã³ã¯ãŒã«ãã²ãŒã ã倧奜ãã§ã2022幎ã®1æã«å§ããŠä»¥æ¥ãã£ãšãããç¶ããŠããŸãã ãããªåç¥ã«ã¯ãå ¬åŒã³ãã¥ããã£ã§ãããHoyoLabããšãããµã€ãããããŸãã
ãã®Webãµã€ãã®ç¹å®ããŒãžã1æ¥1åèŠããšãã°ã€ã³ããŒãã¹ãå ¥æã§ããã®ã§ãããæ¯æ¥ããããèŠãã®ã¯é¢åã§ãããã äžã«ã¯åãããšãèããè ããããããããšããããšã§ãæ¢ã«æ¯æ¥ç¹å®ã®æéã«ãã®ããŒãžãéãããã®Chromeæ¡åŒµæ©èœãååšããŠããŸããã
ç§ãäŸã«ãã£ãŠãã®æ¡åŒµæ©èœã«å©ããããŠããã®ã§ãããæ¥æ¬èªã«å¯Ÿå¿ããŠããªãããšãæ°ã«ãªã£ãŠããŸããã
ãããŠæã¯2023幎1æãè¿ãå°æ¥ã«TypeScriptãæžãäºå®ãããããŸãå°ãããŠãããããä»ã®æ¹ãäœã£ããã®ã«ContributionããŠã¿ãããšæãããã£ãç§ã¯ãæãåã£ãŠæ¥æ¬èªå¯Ÿå¿ããã£ãŠã¿ãããšã«ããŸããã
ä»èŠè¿ããšãæ±ãäžã«ãIssueããåºããã«ãããªãPRåºããŠãŠææªã§ãããæ¬åœã«ææª
ãããèªåã§èšããšãããªãã§ãããåããŠã®ããšããããšäžæããããªããã®ã§ããã ãããªåååªç©ã®ãããªã³ãŒãã§ããããŒãžããããšãã¯å°ãå¬ããã£ãã®ãèŠããŠããŸãã1
Webå¶äœãå§ãã
2023幎3æã«å ¬éããã調åžç¥å®è¡å§å¡äŒã®æ°æWebãµã€ããäœã£ãããšããã£ããã§Webç³»ã®å¶äœãå§ããŸããã æåã¯HTMLã®å±æ§ãæäœéã®CSSããããåãããªãç¶æ ã§ããããæ ¹æ°ãã調ã¹ãŠãããã¡ã«å°ããã€äœãããïŒã圢ã«ã§ããããšãå¢ããŠããŸããã
çµæçã«ä»å¹Ž1çªå¶äœãããžã£ã³ã«ã¯Webãããããªããæ軜ã«ããããããã€ã¹ã«åããŠèªå·±è¡šçŸã§ãããšããã®ã¯èªåã«ãšã£ãŠå€§ããªé åã§ãã
調åžç¥å®è¡å§å¡äŒæ°æWebãµã€ã
3æã«å¶äœããåããŠã®Webãµã€ãã§ãã
Next.js(Pages Router) + Tailwind CSSã§äœããŸããã ä»èŠããšãã³ã³ããŒãã³ãã®åå²ãçãã£ããUIã«çµ±äžæããªãã£ããã衚瀺é ã®å¶åŸ¡ãäžæãã§ããŠããªãã£ãããæ¬ ç¹ãããããèŠããŸããã
ããã§ãåããŠãããšãããããã©ãŠã¶ããèŠããããã®ãäœããããšã¯å¬ããã£ãã§ãã
å代å人ãµã€ã
6æé ã9æé ãŸã§éçšããŠããå代å人ãµã€ãã§ãã
Next.js(App Router) + SCSSã§äœããŸããã åŸã«äœã調åžç¥Webãµã€ãã®æºåãšããŠãApp Routerã«æ £ããŠããããã«äœããŸããã
æåã«å ¬éããŠããå°ããã€æ©èœã®è¿œå ããªãã¡ã¯ã¿ãªã³ã°ãç¹°ãè¿ããæåŸã«æ¢ããé ã«ã¯ããªãè¥å€§åããŠããŸããŸããã ãŸããMDXãæ±ãããã®ã©ã€ãã©ãªããã«ã¹ã¯ã©ããã§äœã£ãããããŸããã
ãããªãã«äŸ¿å©ã§ãããã°ã®æžãå³ãè¯ããªã£ãã®ã§ãããå¥ãããæ§ãµã€ãã®éçšåæ¢ã®æ±ºãæã«ãªã£ãã®ããã®èªäœã©ã€ãã©ãªã§ããã
第73å調åžç¥Webãµã€ã
9ã11æã«ãããŠNext.js(App Router) + SCSSã§äœããŸããã 詳ããããšã¯å¥ã®Advent Calendarã§æžããã®ã§ãã¡ããèªãã§ãã ããã
2代ç®å人ãµã€ã
æ§å人ãµã€ããè¥å€§åãããŸãããã°ã¡ã€ã³ã®ãµã€ãã«Next.jsã¯éå°ã§ãããšæããã®ã§10ã11æé ã«ãããŠãŒãããæžãçŽããŸããã
Astro + TailwindCSSã§äœããŸãããäžéšã®è€éãªã¹ã¿ã€ã«ãã°ããŒãã«ãªã¹ã¿ã€ã«ã¯SCSSã§æžããŠããŸãã ãŸããtailwind-variantsãå°å ¥ããŸãããããããä»åŸTailwindCSSã䜿ãéã«é »ç¹ã«äœ¿çšãããã®ã§ã¯ãšæããŸãã
å çšå代å人ãµã€ãã®éçšåæ¢ã®æ±ºãæãèªäœMDXã©ã€ãã©ãªãšæžããŸããããããã¯Astroã®Content Collectionãå®å šãªäžäœäºæã ã£ãããã§ãã éæ¹é ãéããèªäœã©ã€ãã©ãªã«ã¯ãç¹å®ãã£ã¬ã¯ããªä»¥äžã®æ¢çŽ¢+URLåççæãããã³ããã¿ãŒã®æ€èšŒãå®è£ ããŠããŸãããããã¹ãŠContent Collectionã«ãã«ãã€ã³ãããŠããŸããã
åœç¶ã²ãã£ããäœã£ããã®ããå®æ床ãé«ãã®ã§ããã®MDXããã°æ©èœã倧åã ã£ãæ§ãµã€ããæ¢ããŠç§»è¡ããããšã決ããŸããã ãŸããCloudflareãªã©ã®ãšããžç°å¢ã§ã®åäœãSSRãå«ããŠå®å šãµããŒãããŠããã®ãé åçãªç¹ã§ããã
以åãããç°¡åã«ããã°ãç¶æã§ããããã«ãªããæžãçŽããŠããã£ããšæããŸãã
ãŸãããã®é 倧åŠã®å 茩ãåŸèŒ©ãã¯ããŸãé³æ¥œçéã®ãšã³ãžãã¢ã®ãã©ãã¯ãŒã®æ¹ãªã©ã«ãªããžããªãèŠãããŠããããšãçºèŠããã®ã§ãä»ãŸã§ãããã£ãšæ°ãã€ããªããæžãããã«ãªããŸããã 人ã«åèãšããŠèŠãããã®ã£ãŠãªãã ãå¬ããã§ãããã
Discord Botãæ¹åãããã©ã€ãã©ãªãæžããããã
2幎ã»ã©åãç§ãããã°ã©ãã³ã°ã«è¶³ãèžã¿å ¥ãããã£ããã«ãªã£ãã®ã¯Discordã®Botå¶äœã§ãã 2023幎ãçžãã£ãŠBotå¶äœãç¶ããŠãããããã€ãã®å£äœã§å©çšããŠããã ããŠããŸãã ãããªBotå¶äœã§ã¯éçºèšèªãšããŠPythonãå©çšããŠããŸãããä»å¹Žã¯åºç€ã®èšèšã1ããèŠçŽããŸããã
ã¢ãžã¥ãŒã«ãžã®åå²ã»çµ±åã«ãããŠWebããã³ããã¬ãŒã ã¯ãŒã¯ã«è¿ãçºæ³ãåãå ¥ããããLinterã®èšå®ã®èŠçŽããå€§å¹ ãªãªãã¡ã¯ã¿ãªã³ã°ãè¡ã£ããããŸããã ãŸãã以åããé²ããŠããåä»ããå®äºããããªãå®å šãã€è£å®ã®æ©æµãåããããæžãæ¹ãã§ããããã«ãªããŸããã
ãŸããDiscord Message ComponentsãšåŒã°ããããŠãŒã¶ãŒãBotã«å¯ŸããŠæäœãè¡ããUIãæ§ç¯ããããã®æ©èœã®å°å ¥ãé²ããŸããã ããã«ãããåŸæ¥ã®ããã¹ãããŒã¹ãããçŽæçãªæäœãã§ããããã«ãªããUXãåäžããŸãã
å®éã«Botãå®è£ ããéãPythonã§ã¯discord.pyãšåŒã°ããWrapper Libraryãå©çšããã®ãäžè¬çã§ãã ãããããã®ã©ã€ãã©ãªã§ã¯UIã®åŠçãæç¶ãçã«æžãå¿ èŠãããããŠãŒã¶ãŒã®æäœã«äŒŽã£ãŠå€åããUIã®å®è£ ãèŠè¡ã«ãªãåŸåããããŸããã
ãããå æããŠãŠãŒã¶ãŒã«åªããUIã»UXãå®çŸãã€ã€å¹çããå®è£ ããããã«ãReactã®ãããªå®£èšçUIãæžããã©ã€ãã©ãªãèªäœãããããŸããã ãŸã å·®åæ€ç¥ãªã©ãå®è£ ããŠããªãã®ã§ããéå°ã«APIãå©ããŠããŸãã®ãé£ç¹ã§ãããç°¡çŽ ã«æäœæ§ã®é«ãBotãæžããããã«ãªãæºè¶³ããŠããŸãã å°æ¥çã«ã¯ããªããŒã·ã§ã³ãªã©ã®è¿œå ãèŠéã«å ¥ããŠããŸãã
å人çã«äžçªäœã£ãŠããã£ãä»æ§ã¯ãViewå ã§å¥ã®Viewãéã£ãŠãŠãŒã¶ãŒã®æäœçµæãååŸããããšããåŠçãéåæé¢æ°ã®åŒã³åºãã«åž°çµã§ãããã®ã§ãã ããã«ãã£ãŠã確èªçšãã¿ã³ãå¥ã«è¡šç€ºãããªã©ã®åŠçãç°¡åã«æžããããã«ãªããŸããã
å®è£ ããâã©ã€ãã©ãªã®â䜿çšäŸãâèŠã
Reactã§ç°¡åãªã«ãŠã³ã¿ãŒãäœæããäŸ
Python補Discord Botã«èªäœã©ã€ãã©ãªãå°å ¥ããåããããªã«ãŠã³ã¿ãŒãäœæããäŸ
DiscordåŽã®ã¡ãã»ãŒãžãžã®UIåæ ã¯ãStateãå€åãããšèªåçã«è¡ãããŸãã
ãã ããã®å€æŽãªã©ã®å®è£ ã¯Reactãšå€§ããç°ãªããŸãããã®ãã¡ã¡ãããšReactã®ã³ãŒããªãŒãã£ã³ã°ããããã§ãã
ãã®ã©ã€ãã©ãªã¯GitHubã§å ¬éããŠããã®ã§ãããdiscord.pyã䜿ã£ãŠDiscord Botãäœã£ãŠããæ¹ãããã£ããã£ãããã²äœ¿ã£ãŠã¿ãŠãã ããã IssueãPRããåŸ ã¡ããŠãããŸãã
Cloudflareã䜿ãåã
ä»å¹Žæããäžè©±ã«ãªãããŸãåŠãã ãã©ãããã©ãŒã ã§ãã
ããšããšå人ã§CDNãšããŠå©çšããŠãããä»å¹Žã¯äžéšå€§åŠå£äœã«ãCloudflareãå°å ¥ããŸããã ãã£ãã·ã¥æ©æ§ãéåžžã«åŒ·åã§ãæ£ããèšå®ããã°Webãµã€ãã®ãã£ãã·ã¥ãããçã75%ãè¶ ããããšãçãããããŸããã 調åžç¥ã®Webãµã€ããéçšããéã¯å€§å€å©ããããŸããã
ãŸããTypeScriptãããçšåºŠæžããããã«ãªã£ãã®ã§ãCloudflare WorkersãPagesãKVãR2ããã«æŽ»çšã§ããããã«ãªããŸããã
WorkersãPagesã¯ãCDNäžã§åŠçããããµãŒããŒã¬ã¹ãªã³ã³ãã¥ãŒãã£ã³ã°ãµãŒãã¹ã§ãã Cloudflareã®ãã£ãã·ã¥æ©æ§ãS3äºæã¹ãã¬ãŒãžã®R2ãªã©ã«ã¢ã¯ã»ã¹ã§ããAPIãæŽåãããŠããã éåžžã«ç°¡çŽ ãªèšå®ã§é«æ©èœãã€é«éãªAPIã»Webãµã€ããæ§ç¯ã§ããŸããã¡ãªã¿ã«ãã®ãµã€ããCloudflare Pagesã§ãã¹ãã£ã³ã°ããŠããŸãã
ä»ã«ãèªåå°çšã®APIãããã€ãéçšããŠããŸãã ããšãã°å®æçã«ãã€ãŒãããŠãã#NowPlayingã®ãã€ãŒãã¯ã楜æ²urlãæãããšãã®æ¥œæ²ã®æ å ±ãè¿ãAPIãCloudflare Workersäžã«å®è£ ããŠããŸãã
Workersã®ãããªãšããžäžã§å®è¡ã§ãããã®ã¯æ¥é²ææ©ã§å¢ãç¶ããŠãããä»åŸããšããžã³ã³ãã¥ãŒãã£ã³ã°ã®ååã¯è¿œã£ãŠãããããšæã£ãŠããŸãã
Dockerã»GitHub Actionsãã¯ããã
ä»å¹Žã¯ãå»å¹ŽãŸã§ãµãŒããŒã«çŽæ¥èŒããŠããã³ãŒãããã¹ãŠDockeråããå¯èœãªéãGitHub Actionsã§èªåãããã€ãè¡ãããã«ããŸããã ããã«ãã£ãŠããããã€å ã®å€æŽãªã©ããã£ãŠãç°¡åã«å¯Ÿå¿ã§ããããã«ãªãããããã€æéã®ççž®ã«ãã€ãªãããŸããã
ãŸãããã®éçšã§Dockerfileãªãã¡ã¬ã³ã¹ãšCompose Fileãªãã¡ã¬ã³ã¹ãnåãããç©ŽãéããŸã§èªãã ã®ã§ãDockerfileãå®å šã«ç解â»ããŸããã ã¿ãªãããDockerã觊ãæã¯ãªãã¡ã¬ã³ã¹ãããèªã¿ãŸãããã
調åžç¥å®è¡å§å¡äŒã®ã€ã³ãã©å·æ°
第73å調åžç¥å®è¡å§å¡äŒã«ãããŠãWebãµã€ãã®å¶äœãšæè¡ã€ã³ãã©ã®å·æ°ã»ç®¡çãè¡ããŸããã Webãµã€ããã®ãã®ã®å¶äœã«é¢ããŠã¯ Webå¶äœãå§ãã ã Advent Calendarã®èšäºã«æžããã®ã§ããã§ã¯ãã以å€ã®è©±ãããŸãã
æšå¹ŽãŸã§ã®èª¿åžç¥Webãµã€ãã¯ããªãããã®ãã¬ãŒã ã¯ãŒã¯ããã«ããããã®ãåŠå WebãµãŒããŒã«æåãããã€ãã圢ã§å ¬éãããŠããŸããã ä»å¹Žã¯ããããã¥ãŒãã³ãšã©ãŒãèµ·ããã«ããããã€é«éãªç°å¢ã®æ§ç¯ãç®æããŠã€ã³ãã©ã®ç·å ¥ãæ¿ããè¡ãããšã決æããŸããã
ãŸãã2023å¹ŽåºŠå ¥åŠã®åŸèŒ©ãéåžžã«åªç§ã ã£ãã®ã§ã圌ããæ¬æ¥èŠããŸãªããŠããéšåã«èŠããŸãªãåºç€ãæŽåããããšããæãããããŸããã
åæ£ããŠããå©çšãµãŒãã¹ã®éçŽãšæŽçãVercelãCloudflareã®å°å ¥ãGitHubã®æ¬æ Œå©çšãGitHub Actionsã®å°å ¥ãªã©è¡ã£ãããšãæžãåºããšããªããªãã»ã©ã®å€æŽãè¡ããŸããã çµæãšããŠãWebãµã€ããã®ãã®ã®å¶äœã«éäžã§ãããããããã€ã®æéãå€§å¹ ã«æžã£ãããWebãµã€ãã®è¡šç€ºé床ãåäžããããšãã£ãææããããŸããã
ãããããã®åºç€ã¯æ¥å¹ŽåºŠä»¥éã䜿ãããâŠã¯ãã§ãã掻çšããŠããããšå¬ãããªã
ãããã«
ãããã£ãŠæžãåºããŠã¿ããšãããªãããããã®åŠã³ãçµæãåºãŠããŠå¬ããã§ãããèªå·±è¯å®æã¢ããã æ¢ã«æ¥å¹Žã«åããå¶äœãéçºãããã€ãã¹ã¿ãŒãããŠããã2024幎ã¯ä»å¹Žä»¥äžã«ææŠããããããã幎ã«ãªããšæããŸãã
æ¥å¹Žãé¢çœããã®ã圹ã«ç«ã€ãã®ãäœããããªãšæããŸããããã§ã¯ããã幎ãã
-
PRèªäœã¯2022幎12æã ã£ããã§ãããChrome Web StoreåŽã§ã¢ããããŒããããã®ã2023幎ã ã£ãã®ã§2023幎ã®è©±ã«ãããŠãã ããã â©