ï¼æããæ°ããè·å ´ã§åãã¦ããã®ã§ãããããåå¹´ãæ´çã®ããã«è¿æ³ã綴ã£ã¦ã¿ãã以ä¸ã¯å人çãªè©±ã§ä¼ç¤¾ã®ç´¹ä»ã¨ãã¯ããªãã®ã§ãæ°ã«ãªã£ã人ã¯ãã¼ã ãã¼ã¸ãè¦ã¦ã»ããã
åè·ã«å¼ãç¶ããè·ç¨®ã¨ãã¦ã¯ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã¨ããä½ç½®ä»ãã
æ¥åã¨ãã¦æ¸ã React
åè·ã§ã¯æ¥å㧠Elm ãæ¸ãã¦ããã®ã§ React ã¯å°ããªããã¸ã§ã¯ãã趣å³ã§è§¦ã£ã¦ããç¨åº¦ããªã®ã§å¤§è¦æ¨¡ã¢ããªã±ã¼ã·ã§ã³ã§å¿ è¦ã¨ãªããã㪠React ã®ç¥è¦ã¯å½ç¶ãªãã Suspense ã¨ããã¡ãã£ã¨èãããã¨ããç¨åº¦ã§ããããä½ãªã®ãããåãã£ã¦ããªãã£ãããã¨ã¯ Next.js ã¨ã Storybook ã¨ã Jest ã¨ã MSW ã¨ã Recoil ã¨ã TanstackQuery ã¿ãããªãã¬ã¼ã ã¯ã¼ã¯ã»ã©ã¤ãã©ãªãæªçµé¨ã®ãã®ãå¤ããä½ãããã£ããã¢ããããã°ããã®ããéæ¹ã«æ®ãããããæµç³ã«åå¹´ã触ã£ã¦ããã®ã§ã ãã¶åãã£ã¦ããã
ããã¾ã§è§¦ã£ã¦ãã Elm ã¯ã·ã³ãã«ã§ç¶ºéºãªå¯ä¸ã®æ¹æ³ãæä¾ããä¸æ¹ã§ãç¦æ¬²çã¨ãããããããªç¡çãã¦è¤éãªäºããããªããã¤ã©ã¼ãã¬ã¼ããæ¸ãã¦ãæ¹ããã·ã§ãããã¿ãããªã¨ããããããReact ï¼ã¨ãããããã³ãã¨ã³ãã¯å¤§ä½ããï¼ã¯çéã§ã大å¢ãã¨ã«ããç©åãã¨ãã«ã®ã¼ã¨ã³ã¹ããæãã¦çæ³ã追æ±ãã¦ãããèªåã¯ããããªã¹ãæ°è³ªãªã®ããã£ã¦åè ã§æºè¶³ãã¦ããã®ã ããæ£ç´ãã«ã¼ãªã¼ã·ã£ã³ããã¦ï¼å¹´ãããã¨ãããã¨ãç¡ããªã£ã¦ãã¾ã£ãï¼ããã¯è¯ããã¨ã§ãããï¼ãç¾è·ã¯ React ãããªããªããæããªã®ã§æ£ç´ã¤ãã¦ãããã®ãã¨ããä¸å®ã¯ãã£ããã®ã®ãä»ã«ãããããªè¦å ãéãªããããä¸åº¦ããã³ãã¨ã³ãããç´ãã¦ã¿ããããã¨ããæ°æã¡ã«ãªã£ãã
ããããããã§ãããã¾ã§æ¨ªç®ã§ã¦ã©ãããã¦ããæ°å¹´åã®ããã³ãã¨ã³ãæè¡ãä¸æ°ã«ãã£ããã¢ãããããã¨ã¨ãªã£ããå¿é ãã¦ããã®ã¯ããã£ã¨ Elm ããã£ã¦ãããã㧠React ã®ããæ¹ã«æå¦åå¿ãåºã¦ãElm ã§ã¯ãããªé¢¨ã«æ¸ããã ãã©ãªããã¿ãããªäºãã¤ãå£èµ°ã£ã¦ç ãããããªãããã¨ããã¨ããã ã£ãããèãéãããå ¨ç¶ãããªãã¨ã¯ãªãã¦å®å¿ãã¦ãããã¢ã³ã©ã¼ã³ã¯ç¹ã«æèãã¦ããã®ã§é 調ã«åºæ¥ããããããããããªæ°ããæ¸ãæ¹ãè¦ãã¦çºæ³ã®å¹ ãåºãã£ãã転è·åã®ææéãã¨ã«ããå¦ã³ãå¤ãã
ããã³ãã¨ã³ãã¬ãå¢ã®éã
ãããã転è·ã®ãã£ããã¯ç¾è·ã®ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ãããèªããåãããã¨ããã®æ¹ã¯çéã§ãæåãªæ¹ã ã¨ãããã¨ã¯ç¥ã£ã¦ããã®ã ããå ¥ç¤¾ãã¦ä¸ç·ã«ä»äºããã¦ã¿ãã¨ãã£ã±ãåããããã³ãã¨ã³ãã¬ãå¢ã¯ CSS ã®ææãã¨ã«ããå¤ããå¤ãæã¯ç¥ããªãææ³ãï¼ãï¼åè¦ã¤ããæ¥ããã£ãã»ã©ããããåçã®å®åè ãä½äººããããããã
åè·ã§ã¯ããã³ãã¨ã³ããå®è³ªçã«èªåä¸äººã®ãããªç¶æ ã ã£ãã®ã§ãè¨è¨ãã¼ããã好ãåæã«åºæ¥ãä¸æ¹ã§ä»ã®äººããå¦ã¶ãã¨ãé£ããã£ããããããã¨ãèªåã®çºæ³ã®å¹ ã®ä¸ã§åé¡ã解決ããã®ã ãããªããªãææãå¢ãã¦ãããªãã70 ç¹ãæ±ããããä»äºã§ 80 ç¹ã®è§£æ±ºçãæãã¤ãããããã§çµãã£ã¦ãã¾ãã90 ç¹ä»¥ä¸ã®è§£æ±ºçã¯ä¸çç¥ããã¨ãã§ããªãã
人ã«ãã£ã¦å¾æåéã¨ä¸å¾æåéããã£ã¦ãã©ã¡ã¼ã¿ãä¸æãå¸å¹ã«ãªã£ã¦ããã®ãé¢ç½ãããã人㯠CSS ãå¾æãå¥ã®äººã¯ã©ã¤ãã©ãªã«ãã¡ã詳ãããFigma ã使ãããªã人ãããã°ã¢ã¯ã»ã·ããªãã£ã«å¼·ããã ãããæã£ã¦ãã人ãããããªã®ã§ãäºãã«å¦ã³åããããããããéåç¥ã«ãªã£ã¦ããã®ãè¯ãã
è·ç¨®ã®å¤ãéçºçµç¹
ããã³ãã¨ã³ãå ã§ãå¤ç¨®å¤æ§ãªã¹ãã«ãæã£ã人ãå± ãã®ã ããéçºçµç¹å ¨ä½ã§ãåããã¨ãè¨ããããã¶ã¤ãã¼ã»PdM ãå¤æ°å¨ç±ããã»ããã¹ã¿ã¼ãã¢ããã«ã¯çãã QA çµç¹ï¼å 製ï¼ãããããã¨ã»ãã¥ãªãã£ã¨ãã¤ãã¼ãã«ã¡ã³ããããã°ã«ã¼ãããã£ããããããã¯ãã®éçºè ã¯ããã³ãã¨ã³ãã¨ããã¯ã¨ã³ããæ確ã«åããã¦ããããã¡ãããã«ã¹ã¿ãã¯ãªã¹ãã«ãæã£ãã¡ã³ãã¼ãå± ãããçãããã§ããããã¯ãããããå°éæ§ãæ´»ãããæ¹ãè¯ãã¨ããææ³ãæ ¹åºã«ããã
åè·ã§ã¯ã¨ã³ã¸ãã¢ã®ã¬ãã«ãç·ãã¦é«ãã£ãããè·ç¨®ã®ããªã¨ã¼ã·ã§ã³ã¯å°ãªãã£ãããªã®ã§ãæ¬ãªã©ã§ãä¸ã®ä¸ã«ã¯ããããè·ç¨®ï¼ä¾ãã° PdM ã¨ããã¶ã¤ãã¼ã¨ã QA ã¨ã...ãã ãæ£ç¤¾å¡ã§ï¼ãåå¨ããããããã¨ãããã¨ã¯ç¥ã£ã¦ãããå®éã«è¦ããã¨ã¯ãªãã£ãã®ã§ããããã人ã ã®ããç°å¢ã«èå³ããã£ããèªåã¯ã©ã£ã¡ãã¨ããã¨ã誰ãå¨ç¨ãªäººãçæéã«ãã£ãã大å¢ããã¾ã«éã¾ã£ã¦ä½ãããããããããå°éé åãã¬ãããªè¦ã人ãå± ãæ¹ãä¸æãåãã ããã¨ä¿¡ãã¦ããã®ã§ããã®è¾ºã®ææ³ã¨ããããããã
ã¨ããããã§ãè²ããªäººãå± ã¦é¢ç½ãããã ãããã®ã¶ãéçºããã»ã¹ãæ´ããã®ã¯é£ãããããã¯ããæ¬å½ã«ã
æè¿ã®èå³
æè¿ããã³ãã¨ã³ãã®ä¸ã§æ å½åéã決ããåãããã£ãã®ã§ããã¹ãï¼ã¦ããã, çµå, E2Eï¼ãã®æ å½ã«ãªã£ã¦ã¿ããçç±ã¨ãã¦ã¯ãç¸å¯¾çã«æèãã¤ä»ã«ãããã人ãå± ãªãã£ããããè¨è¨ã¨ã UI ã³ã³ãã¼ãã³ãã¨ããèå³ãªãã¯ãªããã©ãä»ã«ãããã人ã»å¾æãªäººã沢山ãããããããã¨ããæãããã¹ãã¯æ¸ãæ £ãã¦ããªãã¨ã©ãã©ãè °ãéããªãã®ã§ãæ¸ãã®ãé¢åãããªå ´æãéæãã¦ãã¼ãã«ãä¸ãã¦ããããã