TypeScriptã¯ãããã³ããšã³ããšããã¯ãšã³ãã®äž¡æ¹ã®ç°å¢ã§ã¹ã±ãŒã©ãã«ãã€ä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®éžæè¢ãšããŠåºãæ¡çšãããŠããŸããJavaScriptã«éââçåä»ããå°å ¥ããããšã§ãã³ãŒãã®æçæ§ãåäžããããŒã«ã®ãµããŒãã匷åãããããå®å šã§äºæž¬å¯èœãªéçºã¯ãŒã¯ãããŒãå®çŸããŸããTypeScriptã®åã·ã¹ãã ã¯ãéçºè ãå€ãã®åé¡ãæ©æã«çºèŠããã®ã«åœ¹ç«ã¡ãããã¯ãªãŒã³ãªã³ãŒããšããŒã éã®é£æºåŒ·åã«ã€ãªãããŸãã
TypeScriptã®åãã§ãã¯ã¯åªããç¹ããããã®ã®ãå®å šãªå®å šçãšã¯èšããŸãããç¹ã«éåæããžãã¯ãå ±æç¶æ ãåçãªå ¥åãªã©ãå«ãè€éãªã¢ããªã±ãŒã·ã§ã³ã§ã¯ãããããããžãã¯ãšã©ãŒãå®è¡æé害ãã»ãã¥ãªãã£äžã®æžå¿µäºé ãæ€åºã§ããããã§ã¯ãããŸããããããžã§ã¯ãã®èŠæš¡ã倧ãããªãã«ã€ããŠãåã«ãã¬ããžãšåé©çšã®éçã衚é¢åãå§ããå®è¡æããšããžã³ã³ãã£ã·ã§ã³ã§ã®ã¿çºçããå¯èœæ§ã®ãããã°ã«ããŒã ããããããå¯èœæ§ããããŸãã
éçè§£æ ãã®ã®ã£ãããåããããã«ãã³ãŒããå®è¡ããã«è§£æããŸããããã«ãããã³ã³ãã€ã©ããŠããããã¹ãã§ã¯æ€åºã§ããªãå¯èœæ§ã®ããåé¡ãçºèŠã§ããŸããéçè§£æã¯ãã¢ãŒããã¯ãã£ã«ãŒã«ã®é©çšãå°éäžå¯èœãªã³ãŒãã®æ€åºãå®å šã§ãªããã¿ãŒã³ã®ç¹å®ãã³ãŒãããŒã¹å šäœã®äžæŽåã®æ€åºã«åœ¹ç«ã¡ãŸãããŸããã»ãã¥ã¢éçºã«ãããŠããŸããŸãéèŠãªåœ¹å²ãæãããŠããã èåŒ±æ§ å±éåã«é«ãªã¹ã¯ã®æäœãç¹å®ããå¿ èŠããããŸãã
广çã«é©çšãããšãéçè§£æã¯æ¹åãããŸã ã³ãŒãå質ä¿å®æ§ãåäžãããé·æçãªã¹ã±ãŒã©ããªãã£ããµããŒãããŸããç¹ã«ãäžè²«æ§ãšã³ã³ãã©ã€ã¢ã³ã¹ãäžå¯æ¬ ãªãå€§èŠæš¡ãªåæ£ããŒã ãèŠå¶ã®å³ããç°å¢ã§ã¯ã倧ããªã¡ãªãããšãªããŸããTypeScriptéçºè ã«ãšã£ãŠãéçè§£æãžã®é©åãªã¢ãããŒããæ¡çšããããšã§ãèšèªã«çµã¿èŸŒãŸããå®å šçãè£å®ãããããé«åºŠãªæŽå¯ãšå¶åŸ¡ãå¯èœã«ãªããŸãã
ãã®åºç€ã¯è©äŸ¡ã«äžå¯æ¬ ã§ã ææ°ã®éçè§£æãœãªã¥ãŒã·ã§ã³ TypeScript ããµããŒãããåŸæ¥ã®ããŒã«ãšç°ãªãé«åºŠãªãã©ãããã©ãŒã ã®ç¹åŸŽãçè§£ããã®ã«åœ¹ç«ã¡ãŸãã
SMART TS XL
å€ãã®éçè§£æããŒã«ã¯ãã«ãŒã«ã®åŒ·å¶ãã¹ã¿ã€ã«ã®æ€èšŒãšãã£ã䟿å©ãªæ©èœãæäŸããŠããŸããã SMART TS XL é«åºŠãªã³ãŒãçè§£ãã¹ã±ãŒã©ãã«ãªåæããããŠæ·±ãã·ã¹ãã ã€ã³ãµã€ããå®çŸããããã«æ§ç¯ãããããšã³ã¿ãŒãã©ã€ãºã°ã¬ãŒãã®ãã©ãããã©ãŒã ãšããŠéç«ã£ãŠããŸããããã¯ãåã«ãªã³ããåé¡ã®ãã©ã°ä»ããè¡ãã ãã§ãªããããŒã ãé ãããªã¹ã¯ãçºèŠããã¢ãŒããã¯ãã£ã®æŽåæ§ã匷åããå€§èŠæš¡ãªTypeScriptã¢ããªã±ãŒã·ã§ã³ã®é·æçãªä¿å®æ§ãåäžãããããšãæ¯æŽããããã«èšèšãããŠããŸãã
å æ¬çãªéçè§£ææ©èœ
SMART TS XL è€éãªTypeScriptã³ãŒãããŒã¹åãã«ã«ã¹ã¿ãã€ãºããããå æ¬çãªéçè§£æãæäŸããŸããæ§æãã§ãã¯ãã«ãŒã«æ€èšŒã ãã§ãªãã以äžã®æ©èœãåããŠããŸãã
- æ§é ãšæå³ã®åæ: ã³ãŒãã®æ§æãã¢ãžã¥ãŒã«ã®çžäºäœçšãã¢ããªã±ãŒã·ã§ã³å ã§ã®å¶åŸ¡ãšããŒã¿ã®ãããŒã«ã€ããŠçè§£ããŸãã
- ã³ãŒãäŸåé¢ä¿ãããã³ã°: ãã¡ã€ã«ãã¢ãžã¥ãŒã«ããµãŒãã¹éã®äŸåé¢ä¿ã°ã©ããèªåçã«æ§ç¯ããé ããçµåãå±éºãªçžäºæ¥ç¶ãæããã«ããŸãã
- ããŒã¿ãããŒã𿱿åæ: ã³ãŒãããŒã¹å šäœã®å€ã远跡ããä¿¡é Œã§ããªãå ¥åãæ©å¯æäœã«å°éãããã»ãã¥ãªãã£äžã®åé¡ãåŒãèµ·ããããããå¯èœæ§ãããå Žæãæ€åºããŸãã
- é«åºŠãªåã·ã¹ãã æ€æ»: TypeScript ã®ã³ã³ãã€ã©ãšé£æºããŠããžã§ããªãã¯ã®èª€çšãäžé©åãªå匷å¶ãäžå®å šãª null åŠçããžãã¯ãæ€åºããŸãã
ã»ãã¥ãªãã£ãšã³ã³ãã©ã€ã¢ã³ã¹æ©èœ
SMART TS XL ã»ãã¥ãªãã£ãšã³ã³ãã©ã€ã¢ã³ã¹ã®ãã§ãã¯ãåæããã»ã¹ã«çµã¿èŸŒãããšã§ãéçºããŒã ãšã»ãã¥ãªãã£ããŒã ã®é£æºãæ¯æŽããŸãã以äžã®ããšãå¯èœã§ãã
- å®å šã§ãªãå ¥ååŠçãæ€èšŒãããŠããªã APIãå®å šã§ãªããã·ãªã¢ã©ã€ãŒãŒã·ã§ã³ãç¹å®ãã
- XSSãã€ã³ãžã§ã¯ã·ã§ã³ãèªèšŒãã€ãã¹ãªã©ã®è匱æ§ã«é¢é£ããäžè¬çãªã³ãŒãã£ã³ã°ãã¿ãŒã³ãæ€åºããŸãã
- å éšã³ãŒãã£ã³ã°æšæºãšèŠå¶äžã®å¶çŽïŒOWASPã¬ã€ãã©ã€ã³ãå éšç£æ»ã«ãŒã«ãªã©ïŒã宿œãã
- ç£æ»ãšã¬ãã¥ãŒã®ããã«è¿œè·¡å¯èœãªã»ãã¥ãªãã£çµæãèªåçã«çæããŸã
å€§èŠæš¡ããŒã åãã®ã¹ã±ãŒã©ããªãã£ãšããã©ãŒãã³ã¹
SMART TS XL å€§èŠæš¡ã«éçšã§ããããã«èšèšãããŠãããæ¬¡ã®ãããªçµç¹ããµããŒãããŸãã
- å€§èŠæš¡ãªã¢ããªããžããªãšã¢ãžã¥ãŒã«åã¢ãŒããã¯ãã£
- ãã€ã¯ããµãŒãã¹ããŒã¹ã®ããã³ããšã³ãã»ããã¯ãšã³ãTypeScriptã·ã¹ãã
- ãã«ããã©ã³ã CI/CD ãã€ãã©ã€ã³
- ã³ãŒãæææš©ã®å¢çãè¶ããŠäœæ¥ãã忣ããŒã
æ¢åã®DevOpsãã€ãã©ã€ã³ã«ã·ãŒã ã¬ã¹ã«çµ±åãããèªåã¹ãã£ã³ãå¢ååæãå±¥æŽãã¬ã³ãã¬ããŒãããµããŒãããŸããæ°åãã®ãã¡ã€ã«ã管çããŠããå Žåã§ããè€æ°ã®ãããžã§ã¯ãã«ãŸãããããŒã åºæã®ã«ãŒã«ãé©çšããŠããå Žåã§ãã SMART TS XL ã¯ãŒã¯ãããŒã«é©å¿ããŸãã
ã¹ããŒããªã«ã¹ã¿ãã€ãºãšã¬ããŒã
ããäžã€ã®åŒ·ã¿ã¯ã SMART TS XL 匷åãªã«ã¹ã¿ãã€ãºãšã³ãžã³ã§ããããŒã ã¯ä»¥äžã®ããšãå¯èœã§ãã
- çŽæçãªãã³ãã¬ãŒããã¹ã¯ãªããã䜿çšããŠç¬èªã®åæã«ãŒã«ãå®çŸ©ãã
- ç°å¢ã«å¿ããããžãã¯ãæ§æããïŒäŸïŒNode.js ãšãã©ãŠã¶åºæã®åŠçïŒ
- ããžãã¹ã®åªå é äœãã¢ããªã±ãŒã·ã§ã³é åã«åºã¥ããŠèª¿æ»çµæãã¿ã°ä»ãããŠåé¡ãã
- éçºè ãã¢ãŒããã¯ããã»ãã¥ãªãã£æ åœè åãã«ã«ã¹ã¿ãã€ãºãããã¬ããŒããçæãã
è±å¯ãªããã·ã¥ããŒããå±¥æŽåæã®æ¯èŒã圹å²å¥ã®ãã¥ãŒãªã©ã SMART TS XL é©åãªäººãé©åãªã¿ã€ãã³ã°ã§é©åãªæŽå¯ãåŸãããããã«ãªããŸãã
ãšã³ã¿ãŒãã©ã€ãºã°ã¬ãŒãã®TypeScriptéçºã«æé©
SMART TS XL ã¯åãªãéçã³ãŒãã¢ãã©ã€ã¶ãŒã§ã¯ãããŸãããããã·ã§ã³ã¯ãªãã£ã«ã«ãªTypeScriptã·ã¹ãã ã®æ§é å質ãã»ãã¥ãªãã£äœå¶ãä¿å®æ§ã管çããããã®ãã©ãããã©ãŒã ã§ããèŠå¶ã®å³ããæ¥çããæ¥éã«çºå±ãããã¯ãããžãŒäŒæ¥ãŸã§ãå€ãã®ããŒã ãå©çšããŠããŸãã SMART TS XL ã³ãŒããžã®ä¿¡é Œãç²åŸãããªã¹ã¯ã軜æžããå¶åŸ¡ãç ç²ã«ããããšãªãéçºé床ãå éããŸãã
ããŒã ãæé·ããã³ãŒãããŒã¹ãé²åããããžãã¹ãå®å®ããå®å šãªJavaScriptã€ã³ãã©ã¹ãã©ã¯ãã£ã«äŸåããŠããå Žåã SMART TS XL çŸä»£ã®éçè§£æã«æ±ããããæ·±ããšæè»æ§ãæäŸããŸã
ESLint
ESLintã¯æãåºãæ¡çšãããŠãããã®ã®äžã€ã§ã JavaScriptã®éçè§£æããŒã« TypeScriptãšã³ã·ã¹ãã ããµããŒãããŸããäž»ã«ãªã³ã¿ãŒãšããŠèšèšãããŠãããéçºè
ãã³ãŒãã£ã³ã°èŠçŽãå®çŸ©ã»é©çšããã¹ã¿ã€ã«ã®éžè±ãé²ããéçºäžã«ããããæ§æãšã©ãŒãããžãã¯ãšã©ãŒãææã§ããããã«ããŸããTypeScriptã®ãµããŒã㯠@typescript-eslint ãã©ã°ã€ã³ã¯ãã»ãšãã©ã®ææ°ã®ããã³ããšã³ãããã³ãã«ã¹ã¿ãã¯ã¯ãŒã¯ãããŒã®å®çªã§ãã
匷ã¿ãšæŽ»çšäºäŸ
- å ±æã«ãŒã«ã»ããã䜿çšããŠããŒã éã§äžè²«ããã³ãŒãã¹ã¿ã€ã«ã匷å¶ããŸã
- VSCodeãªã©ã®ãšãã£ã¿ãŒãGitHub Actionsãªã©ã®CIããŒã«ãšç°¡åã«çµ±åã§ããŸã
- çµã¿èŸŒã¿ã«ãŒã«ãšã³ãã¥ããã£ãã©ã°ã€ã³ã®å€§èŠæš¡ãªãšã³ã·ã¹ãã ã®äž¡æ¹ããµããŒã
- 宣èšãããŠããªã倿°ãæªäœ¿çšã®ã€ã³ããŒããã»ãã³ãã³ã®æ¬ èœãªã©ãæ€åºããŸã
- ãã¬ãŒã ã¯ãŒã¯åºæã®æšæºã«åãããŠãããžã§ã¯ãããšã«æ§æå¯èœ
ESLintã¯ããŒã ã¬ãã«ã®ã³ãŒãè¡ç管çã«åªããŠããŸããçµ±äžããããã©ãŒããããåºæ¬çãªå質管çããããŠã¯ãªãŒã³ãªGitå±¥æŽãç¶æããããããžã§ã¯ãã«ç¹ã«å¹æçã§ããéçºåææ®µéãUIãå€çšããã³ãŒãããŒã¹ã§ã¯ãã³ãŒãã®èªã¿ããããšä¿å®æ§ãç¶æããäžã§éèŠãªåœ¹å²ãæãããŸãã
ESLintãããæ·±ãéçè§£æã«äžååãªç¹
ESLintã¯æçšã§ãããå æ¬çãªéçè§£æãœãªã¥ãŒã·ã§ã³ã§ã¯ãããŸãããå®å šãªããŒã¿ãããŒæ€æ»ãã¢ãŒããã¯ãã£æ€èšŒããããã¯ãã£ãŒãã»ãã¥ãªãã£ã¹ãã£ã³ãå®è¡ããããã«èšèšããããã®ã§ã¯ãããŸãããäž»ãªå¶éäºé ã¯æ¬¡ã®ãšããã§ãã
1. æµ
ãã³ã³ããã¹ãèªè
ESLintã¯äž»ã«ãã¡ã€ã«ã¬ãã«ã§ã³ãŒããè©äŸ¡ããã¢ãžã¥ãŒã«ããµãŒãã¹ã颿°éã§ããŒã¿ãã©ã®ããã«æµããããå®å
šã«çè§£ããããšã¯ã§ããŸãããä¿¡é Œã§ããªãå
¥åãæ©å¯æ§ã®é«ãæäœã«ã©ã®ããã«äŒæãããããããã¯é¢æ°ãäžæµã®ããžãã¯ã§ã©ã®ããã«äœ¿çšããããã远跡ããããšã¯ã§ããŸããã
2. å¶åŸ¡ãããŒãããŒã¿ãããŒã®åæããªã
ããé«åºŠãªã¢ãã©ã€ã¶ãŒãšã¯ç°ãªããESLintã¯ããã·ãŒãžã£éè§£æãå®è¡ããŸãããå®è¡æã®æ¡ä»¶ãæ¡ä»¶ä»ãããžãã¯ã®åå²ãã¹ã³ãŒãéã§ã®å€ã®å€æŽãåãæž¡ãã«ã€ããŠæšè«ããããšã¯ã§ããŸããããã®ãããå€ãã®è«ççãŸãã¯ã»ãã¥ãªãã£é¢é£ã®ãã°ãèŠéãããŠããŸããŸãã
3. éå®çãªåã®çè§£
ESLintã¯ããŒãµãŒãä»ããŠTypeScriptã®åã«ã¢ã¯ã»ã¹ã§ããŸããã詳现ãªåè©äŸ¡ã¯è¡ããŸãããäŸãã°ãnull蚱容åããžã§ããªãã¯å¶çŽãè€éãªåã®çµã蟌ã¿ãšã©ãŒãªã©ã誀ã£ãä»®å®ãæ€åºã§ããªãå ŽåããããŸãã
4. å€§èŠæš¡ãªããã©ãŒãã³ã¹å¶çŽ
å€§èŠæš¡ãªã¢ãã¬ããžããªãã¢ãžã¥ãŒã«åãããTypeScriptã³ãŒãããŒã¹ã§ã¯ãESLintã®ããã©ãŒãã³ã¹ã«åé¡ãçããããšããããããŸããã«ãŒã«ã®è©äŸ¡ã¯èŠæš¡ã«å¿ããŠå€§å¹
ã«é
ããªããããŒã éã§å
±æèšå®ãç¶æããã®ãå°é£ã«ãªãå¯èœæ§ããããŸãã
5. 建ç¯äžã®åŒ·å¶åãªã
ESLintã¯ãããžã§ã¯ãæ§é ã®ã¢ããªã³ã°ããã€ãã£ãã«ãµããŒãããŠããŸãããããã¡ã€ã³ã¢ãžã¥ãŒã«ã¯UIã³ã³ããŒãã³ãããã€ã³ããŒãããŠã¯ãªããªããããAPIããžãã¯ã¯ãã¬ãŒã³ããŒã·ã§ã³å±€ããåé¢ãããªããã°ãªããªãããšãã£ãã¢ãŒããã¯ãã£ã«ãŒã«ãæ€èšŒããã«ã¯ãå€§èŠæš¡ãªã«ã¹ã¿ã ã«ãŒã«ã®éçºãä»ã®ããŒã«ãšã®é£æºãå¿
èŠã§ãã
6. ã»ãã¥ãªãã£ãšã³ã³ãã©ã€ã¢ã³ã¹ã®ç£æ»ã«ã¯äžåå
ESLintã¯ã»ãã¥ãªãã£ããŒã«ã§ã¯ãããŸãããããããªã³ãŒãã£ã³ã°ã®é²æ¢ã«ã¯åœ¹ç«ã¡ãŸãããã€ã³ãžã§ã¯ã·ã§ã³ã®ãªã¹ã¯ãå®å
šã§ãªããªããžã§ã¯ãã®æäœãå®å
šã§ãªãäŸåé¢ä¿ã®äœ¿çšãæ€åºããããšã¯ã§ããŸãããã³ã³ãã©ã€ã¢ã³ã¹ã¢ããªã³ã°ãç£æ»äººåãã®è¿œè·¡å¯èœãªã¬ããŒãäœæããµããŒãããŠããŸããã
TSLint
TSLintã¯TypeScriptå°çšã«éçºãããæåã®ãªã³ã¿ãŒã§ãESLintãTypeScriptã«å®å šå¯Ÿå¿ããåã«ãã«ãŒã«ããŒã¹ã®éçè§£ææ©èœãæäŸããŠããŸãããTypeScriptããŒã ãšã³ãã¥ããã£ã«ãã£ãŠæ°å¹Žéã¡ã³ããã³ã¹ãããåæã®TypeScriptãããžã§ã¯ãã«ãããŠåºç€çãªå質ãã§ãã¯ãšãã©ãŒããã匷å¶ãæäŸããŠããŸãããTSLintã¯Angular CLIãã«ã¹ã¿ã ããŒã«ãã§ãŒã³ãä»ããŠéçºã¯ãŒã¯ãããŒã«ãã³ãã«ãããããšãå€ãã£ãããã廿¢ããããŸã§å€ãã®ãããžã§ã¯ãã§ããã©ã«ãã®éžæè¢ãšãªã£ãŠããŸããã
ç®çãšåææ©èœ
- TypeScriptã®æ§æãšèšèªæ©èœã«å®å šã«çŠç¹ãåœãŠãŠããŸã
- TypeScriptã³ã³ãã€ã©ãšã®çµ±åã«ããåèªèã«ãŒã«ã®è¿œå ïŒ
ts.Program) - ã·ã³ãã«ãªãã©ã°ã€ã³éçºã«ããã«ã¹ã¿ã ã«ãŒã«ã®ãµããŒã
- å³å¯ãª null ãã§ãã¯ãå®å šã§ãªãå²ãåœãŠãã¯ã©ã¹ããŒã¹ã®ãã©ã¯ãã£ã¹ã®åŒ·å¶ãæäŸããŸãã
- GulpãWebpackãã³ãã³ãã©ã€ã³ ã¹ã¯ãªãããªã©ã®ãã«ã ããŒã«ãšç°¡åã«çµ±åã§ããŸã
TSLintã¯ãTypeScriptããã©ãããã©ãŒã ãšããŠæçãã以åããããªã¹ã¯ã®é«ããã¿ãŒã³ãç¹å®ããäžè²«æ§ã匷åãã匷ãåä»ããæ¡çšããããã®ããŒã«ã»ãããããŒã ã«æ©æã«æäŸããŸãããæ£ç¢ºæ§ãšèŠåŸæ§ã«éç¹ã眮ããå°èŠæš¡ããã³äžèŠæš¡ã®ã³ãŒãããŒã¹ã§å€§ããªå¹æãçºæ®ããŸããã
廿¢ã«è³ã£ãå¶é
1. ãããžã§ã¯ãã®æŸæ£ãšãšã³ã·ã¹ãã ã®éžè±
TypeScriptãæ¥éã«é²åããã«ã€ããTSLintã®ã«ãŒã«ãšã³ãžã³ãšçµ±åã®ç¶æã¯ãŸããŸãå°é£ã«ãªã£ãŠããŸãããããŒã«ã¯TypeScriptã®æ§æãã³ã³ãã€ã©æ©èœããããŠæ°ããªãã¹ããã©ã¯ãã£ã¹ã®å€æŽã«å¯Ÿå¿ã§ããªããªã£ãŠããŸãããTypeScriptããŒã ã¯TSLintãæ£åŒã«å»æ¢ããããåºç¯ãªã³ãã¥ããã£ãµããŒããšããŒã«ã®æè»æ§ãæäŸããESLintãæ¡çšããŸããã
2. é·æçãªãã©ã°ã€ã³ãµããŒãã®æ¬ åŠ
TSLintã«ã¯ãã©ã°ã€ã³ãšã³ã·ã¹ãã ããããŸããããESLintãæçµçã«éçºãããã®ãšæ¯ã¹ããšããã®ç¯å²ã¯éãããŠããŸãããéçºè
ã®ããŒãºããã¬ãŒã ã¯ãŒã¯åºæã®ã«ãŒã«ãããã©ãŒãã³ã¹æé©åããããŠã¯ãã¹ã©ã³ã²ãŒãžãã§ãã¯ãžãšç§»è¡ããã«ã€ããTSLintã¯å¿
èŠãªæ¡åŒµæ§ããµããŒãã§ããªããªããŸããã
3. å®éã®ã¢ãŒããã¯ãã£ã詳现ãªåææ©èœããªã
TSLintã¯ESLintãšåæ§ã«ãã¹ã¿ã€ã«ãšæ§é ã®æ£ç¢ºæ§ãéèŠããŠãããè©³çŽ°ãªæ€æ»ã¯è¡ããŸãããããŒã¿ãããŒã®è¿œè·¡ãã»ãã¥ãªãã£ã«ãŒã«ã®é©çšãã¢ãŒããã¯ãã£å¢çã®æ€èšŒã¯å«ãŸããŠããŸããã§ããããã¡ã€ã«éã®å€æ°ã®ãã¬ãŒã¹ãå®è¡æã®åäœæ¡ä»¶ã®æ€èšŒæ©èœãæ¬ ããŠããŸããã
4. ææ°ããŒã«ãšã®çžäºéçšæ§ãäœã
çŸä»£ã®TypeScriptãããžã§ã¯ãã¯ãBabelãWebpackãã«ã¹ã¿ã ã³ã³ãã€ã©ãšãã£ããšã³ã·ã¹ãã ããŒã«ã«äŸåããããšããããããŸããTSLintã¯ãç¹ã«ESLintã®ãã©ã°å¯èœãªç°å¢ãžã®ãµããŒããæ¡å€§ããŠããã®ãšæ¯ã¹ããšããããã®ã¯ãŒã¯ãããŒã«ã·ãŒã ã¬ã¹ã«çµ±åããããã®æ¡åŒµæ§ãäžè¶³ããŠããŸããã
5. ã«ãŒã«çå®ã®åæ»
廿¢ãçºè¡šãããåŸãã³ãã¥ããã£ããã®è²¢ç®ãšã¢ããããŒãã¯å€§å¹
ã«æžéããŸãããå€ãã®ã«ãŒã«ãæä»£é
ãã«ãªã£ãããæè¿ã®TypeScriptããŒãžã§ã³ãšäºææ§ããªããªã£ãããããããã«ã¹ã¿ã ã«ãŒã«ã»ããã®éçºãç©æ¥µçã«ç¶ç¶ããŠããçµç¹ã¯ã»ãšãã©ãããŸããã§ããã
6. ç§»è¡ã®ãªãŒããŒããã
TSLintã¯å€ãã®ãããžã§ã¯ãã§ããŸãæ©èœããŸãããããã®ãµããŒããçµäºãããããããŒã ã¯ç§»è¡ããŒã«ãªã©ã䜿çšããŠESLintã«ç§»è¡ããå¿
èŠããããŸããã tslint-to-eslint-configãã®ããã»ã¹ã¯å€ãã®å Žåæåã§è¡ãããã«ã¹ã¿ã ã«ãŒã«ã¯åå®è£
ããã«è»¢éã§ãããšã¯éããŸããã§ããã
Rome
Romeã¯JavaScriptãšTypeScriptã®ãšã³ã·ã¹ãã ã«ãããæ¯èŒçæ°ããããŒã«ã§ããªã³ãã£ã³ã°ããã©ãŒãããããã³ãã«ãªã©ãå«ããªãŒã«ã€ã³ã¯ã³ãœãªã¥ãŒã·ã§ã³ãšããŠèšèšãããŠããŸããããã©ãŒãã³ã¹ãšã·ã³ãã«ãã念é ã«çœ®ããŠéçºãããRomeã¯ãããŒã«ãåäžã®ãã€ããªã«çµ±åããäžè¬çãªWebéçºã¹ã¿ãã¯ã«ãããè€æ°ã®äŸåé¢ä¿ãæé€ããããšãç®æããŠããŸãã
TypeScriptãããžã§ã¯ãåãã«ãRomeã¯æ§ææ€èšŒãã¹ã¿ã€ã«ãªã³ãã£ã³ã°ããã©ãŒãããã®çµã¿èŸŒã¿ãµããŒããæäŸããŸããã¢ãã¬ããææ°ã®ããã³ããšã³ãã¢ããªã±ãŒã·ã§ã³å šäœã§æå°éã®èšå®ãšè¿ éãªããŒã«ã»ããã¢ãããæ±ããããŒã ã«ãšã£ãŠç¹ã«é åçã§ãã
ããŒãããããããã®
- çµ±åããããªã³ã¿ãŒãšãã©ãŒããã¿ãŒã«ãããESLintãPrettierãªã©ã®åå¥ã®ããŒã«ãäžèŠã«ãªããŸãã
- å€éšãã©ã°ã€ã³ãã«ã¹ã¿ã æ§æã«äŸåããã«ãã€ãã£ã TypeScript ããµããŒã
- RustããŒã¹ã®ã³ã¢ãšã³ãžã³ã«ããé«ããã©ãŒãã³ã¹
- ã³ãŒãããŒã¹å šäœã§äžè²«æ§ã匷åããæç¢ºã§æç¢ºãªã«ãŒã«ã»ãã
- çŽ æ©ãã¹ãã£ãã©ãŒã«ãã£ã³ã°ããã©ãŒãããã蚺æã®ããã® CLI ããŒã«
Romeã®é åã¯ããã®ã¢ãã³ãªã¢ãŒããã¯ãã£ãåäžäŸåé¢ä¿ã¢ãã«ããããŠéçºè ãã¬ã³ããªãŒãªã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ãŒã¹ã«ãããŸããç¹ã«ãè€éãªèšå®ãå¿ èŠãšãããçµ±åãããããŒã«ãã§ãŒã³ãæ±ããäžå°èŠæš¡ã®ããŒã ã«ãšã£ãŠæçšã§ãã
å€§èŠæš¡éçè§£æã®éç
1. 確ç«ãããããŒã«ã«æ¯ã¹ãŠæªçãªãšã³ã·ã¹ãã
çŸæç¹ã§ã¯ãRomeã®ãšã³ã·ã¹ãã ã¯ãŸã çºå±éäžã§ããã³ã¢æ©èœã¯ããã«äœ¿ããç¶æ
ã§æäŸãããŠããŸãããããæçããããŒã«ã«èŠããããããªåºç¯ãªã«ãŒã«ã©ã€ãã©ãªãã³ãã¥ããã£ãã©ã°ã€ã³ããããŠã«ã¹ã¿ãã€ãºæ§ã¯æ¬ ããŠããŸããè€éãªããŒãºããã¬ãŒã ã¯ãŒã¯åºæã®ãã¿ãŒã³ãæã€çµç¹ã«ãšã£ãŠãRomeã®æ©èœã¯å¶éãå€ããããšæãããããããŸããã
2. éå®çãªã«ãŒã«ã»ãããšæ¡åŒµæ§
Romeã«ã¯ãåºå®ã®ãªã³ãã£ã³ã°ããã³ãã©ãŒãããã«ãŒã«ãä»å±ããŠããŸãããããã¯ã»ãšãã©ã®ãããžã§ã¯ãã«ãšã£ãŠé©åãªããã©ã«ãèšå®ã§ãããçŸç¶ã§ã¯è©³çްãªã«ã¹ã¿ãã€ãºãã«ã¹ã¿ã ã«ãŒã«ã®äœæããµããŒãããŠããŸããããã®ããããã¡ã€ã³åºæã®ããžãã¯ã瀟å
ã³ãŒãã£ã³ã°æšæºã匷å¶ããããŒã ã«ãšã£ãŠå¶çŽãšãªãå¯èœæ§ããããŸãã
3. é«åºŠãªéçè§£ææè¡ããµããŒãããŠããªã
Romeã¯ãå¶åŸ¡ãããŒã¢ããªã³ã°ããã¡ã€ã«éããŒã¿ãããŒè¿œè·¡ãã¢ãŒããã¯ãã£å¢çã®åŒ·å¶ãšãã£ã詳现ãªéçè§£æã¯è¡ããŸããããªã¹ã¯ã¢ããªã³ã°ãã»ãã¥ãªãã£æ€æ»ã§ã¯ãªãã衚é¢çãªã³ãŒãæ€èšŒãšãã©ãŒãããã«éç¹ã眮ããŠããŸãã
4. åãèæ
®ãããªã³ãã£ã³ã°ã®æ·±ãã®æ¬ åŠ
Romeã¯TypeScriptæ§æããµããŒãããŠããŸãããTypeScriptã³ã³ãã€ã©ã«çŽæ¥çµ±åãããããŒã«ãšåçã®é«åºŠãªåèªèã«ãŒã«ã¯æäŸããŠããŸãããå®å
šã§ãªãå倿ãnull蚱容ã®èª€çšãæœè±¡åã¬ã€ã€ãŒéã®åãªãŒã¯ãæ€åºã§ããªãå¯èœæ§ããããŸãã
5. å€§èŠæš¡ã³ãŒãããŒã¹ã§ã¯ãŸã æ¬çªç°å¢ã§å®èšŒãããŠããªã
Romeã¯ãŸã éçºã®åææ®µéã«ããããããšã³ã¿ãŒãã©ã€ãºèŠæš¡ã®ãããžã§ã¯ãã§åºãæ¡çšãããŠããŸãããå€§èŠæš¡ãªã¢ããªããžããªãæ·±ããã¹ããããã¢ãŒããã¯ãã£ã«ãããããã©ãŒãã³ã¹ãšå®å®æ§ã¯ãåŸæ¥ã®ããŒã«ã»ã©åŸ¹åºçã«æ€èšŒãããŠããŸããã
6. CI/CDãšIDEãšã³ã·ã¹ãã ã®æç床äžè¶³
Romeã¯CLIããå®è¡ã§ããŸãããCI/CDãã€ãã©ã€ã³ãGitããã¯ãIDEãšã®çµ±åã¯ãŸã çºå±éäžã§ããESLintæ¡åŒµæ©èœããã®ãªãããªãã£ãŒãããã¯ããã«ãã·ã¹ãã ããã®ç¶ç¶çãªãã£ãŒãããã¯ã«æ
£ããŠããéçºè
ã¯ãRomeã®çŸåšã®ããŒã«ãµããŒãã«éçãæããå¯èœæ§ããããŸãã
ããã»ãªã³ã
Deno Lintã¯ãRustã§èšè¿°ãããDenoã©ã³ã¿ã€ã ã®å ¬åŒãªã³ã¿ãŒã§ãTypeScriptããã³JavaScriptãããžã§ã¯ãåãã«é«éãã€èšå®äžèŠã®ã³ãŒããã§ãã¯ãæäŸããããã«èšèšãããŠããŸããDenoã¯ã»ãã¥ãªãã£ãšææ°ã®éçºãã©ã¯ãã£ã¹ã念é ã«çœ®ããŠæ§ç¯ãããŠãããããDeno Lintã¯ããã®ç°å¢åãã«äœæããããããžã§ã¯ãå šäœã§ã¯ãªãŒã³ã§å®å šãã€äžè²«æ§ã®ããã³ãŒããå®è¡ããäžã§éèŠãªåœ¹å²ãæãããŸãã
Denoãšã³ã·ã¹ãã ã®äžéšãšããŠãDeno Lintã¯ç·å¯ã«çµ±åãããããã©ãŒãã³ã¹ãæé©åãããŠããŸããã©ã³ã¿ã€ã ã«ããã©ã«ãã§å梱ãããŠããã远å ã®èšå®ã¯äžèŠã§ãããã®ããã軜éã§äžè²«æ§ã®ããã³ãŒãããŒã¹ãç¶æãããéçºè ã«ãšã£ãŠäŸ¿å©ãªããŒã«ãšãªããŸãã
äž»ãªæ©èœ
- 远å ãã©ã°ã€ã³ãªãã§TypeScriptããã€ãã£ããµããŒã
- 髿§èœãªRustã³ã¢ã«ããé«éå®è¡
- åççãªããã©ã«ãã«ãŒã«ã§ããã«äœ¿ãããŒãèšå®
- DenoããŒã¹ã®ã¯ãŒã¯ãããŒãšããŒã«ãã§ãŒã³ãžã®ã·ã³ãã«ãªçµ±å
- å€ãã®ã«ãŒã«éåãèªåä¿®æ£ããéçºãå¹çåããŸã
Deno Lint ã¯ãã·ã³ãã«ããã¹ããŒããããã«äœ¿ãã䜿ãããããæåªå ããããDeno ãšã³ã·ã¹ãã å ã§å®å šã«èšè¿°ããããããžã§ã¯ãã«ç¹ã«é©ããŠããŸãã
ããåºç¯ãªéçè§£æã³ã³ããã¹ãã«ãããéç
1. ç¹å®ã®éºäŒåã«çŠç¹ãåœãŠã
Deno Lintã¯Denoã©ã³ã¿ã€ã ãšãã®èŠçŽã«å¯æ¥ã«çµåããŠããŸããæšæºçãªTypeScriptããµããŒãããŠããŸãããã«ãŒã«ã®èšèšãšé©çšã¯Denoã®ãã¹ããã©ã¯ãã£ã¹ãäžå¿ã«è¡ãããŠããŸãããã®ãããæ±çšçãªNode.jsãããžã§ã¯ãããã€ããªããTypeScriptãããžã§ã¯ãã§ã®äœ¿çšã«ã¯é©ããŠããŸããã
2. äžè¬çãªãªã³ã¿ãŒã«æ¯ã¹ãŠã«ãŒã«ã»ãããæµ
ã
ãã®ããŒã«ã¯äž»ã«æäœãšæ§æã®ã«ãŒã«ã«çŠç¹ãåœãŠãŠããŸããããæçãããªã³ãã£ã³ã°ãšã³ã·ã¹ãã ã§å©çšå¯èœãªãèšå®å¯èœãªãªãã·ã§ã³ãã«ãŒã«ã«ããŽãªã®åºç¯ãã¯æäŸããŠããŸãããäŸãã°ãã¢ãŒããã¯ãã£ã®å¢çããããžã§ã¯ãåºæã®èŠåãé©çšãããããŒã ã«ãšã£ãŠãçµã¿èŸŒã¿ã«ãŒã«ã®å¶éã¯å€§ãããšæãããããããŸããã
3. ã«ã¹ã¿ã ã«ãŒã«ã¯ãµããŒããããŠããŸãã
Deno Lintã¯çŸåšãã«ã¹ã¿ã ã«ãŒã«ã®äœæããµããŒãããŠããŸããããã®ããã瀟å
éçºããªã·ãŒãã³ãŒãåãããããã¡ã€ã³åºæã®éçãã§ãã¯ãé©çšãããããå¿
èŠãããçµç¹ã§ã¯ãæ¡åŒµæ§ãå¶éãããŸãã
4. åãèæ
®ããéçè§£æãäžè¶³ããŠãã
Denoã¯TypeScriptããµããŒãããŠããŸãããDeno Lintã¯TypeScriptã³ã³ãã€ã©ãšçŽæ¥çµ±åãããŠããªããããå®å
šãªåèªèè§£æã¯è¡ããŸãããåã®äžäžèŽãäžé©åãªãžã§ããªãã¯ã®äœ¿çšãè€éãªåæšè«ã·ããªãªã«ãããéåãæ€åºããããšã¯ã§ããŸããã
5. ããŒã¿ãŸãã¯å¶åŸ¡ãããŒåæãªã
Deno Lintã¯ã³ãŒãæ§é ãšæ§æã®è¡šé¢ã¬ãã«ã§åäœããŸãã倿°ã®å²ãåœãŠããã¬ãŒã¹ãããã颿°ã®æåãã¢ãã«åããããåçãŸãã¯éåæã®ããŒã¿ãããŒããçããè«ççãªåé¡ãæ€åºãããããããšã¯ã§ããŸãããã»ãã¥ãªãã£åæãå®è¡ææ€èšŒã«å¿
èŠãªããè©³çŽ°ãªæ€æ»ã¯å¯Ÿè±¡å€ã§ãã
6. Denoãšã³ã·ã¹ãã å€ã§ã®äœ¿çšã®å¶é
Deno Lintã¯Denoå°çšã«éçºãããŠãããããããåºç¯ãªTypeScriptãŸãã¯JavaScriptã¢ããªã±ãŒã·ã§ã³åãã®ã¹ã¿ã³ãã¢ãã³ãªã³ã¿ãŒãšããŠã®äœ¿çšã¯æ³å®ãããŠããŸãããã©ã³ã¿ã€ã ãšã®å¯æ¥ãªçµåã«ãããä»ã®ç°å¢ãžã®ç§»æ€æ§ãšåå©çšæ§ãå¶éãããŸãã
TypeScript ã³ã³ãã€ã©
TypeScriptã³ã³ãã€ã©ïŒtscïŒã¯TypeScriptèšèªã®ã³ã¢ã³ã³ããŒãã³ãã§ããJavaScriptãžã®ãã©ã³ã¹ãã€ã«ãšéçåãã§ãã¯ã®äž¡æ¹ãå®è¡ãããããããããTypeScriptéçºè
ã®ããŒã«ãã§ãŒã³ã®åºç€ãšãªã£ãŠããŸããåã¢ãããŒã·ã§ã³ã®è§£æãåã®æšè«ããããŠå³å¯æ§èšå®ã®é©çšã«ãããã³ã³ãã€ã©ã¯å®è¡åã«å€ãã®äžè¬çãªã³ãŒãã£ã³ã°ãšã©ãŒãæ€åºããŸãã
çµã¿èŸŒã¿ããŒã«ã§ããTypeScriptã³ã³ãã€ã©ã¯ãé«éã§ä¿¡é Œæ§ãé«ããææ°ã®éçºç°å¢ããšãã£ã¿ãšç·å¯ã«çµ±åãããŠããŸããå¢åã³ã³ãã€ã«ããããžã§ã¯ãåç
§ãã«ã¹ã¿ã èšå®ãªã©ããµããŒãããŠããŸãã tsconfig.jsonããããèŠæš¡ã®ãããžã§ã¯ãã«æè»æ§ãæäŸããŸãã
TypeScriptã³ã³ãã€ã©ã®åªããç¹
- 倿°ã颿°ãã¯ã©ã¹å šäœã§åŒ·åãªåä»ããšåæšè«ã匷å¶ããŸã
- åã®äžäžèŽãããããã£ã®æ¬ èœã颿°ã®èª€ã£ã䜿çšãèå¥ããŸã
- å°éäžå¯èœãªã³ãŒããæªäœ¿çšã®å€æ°ãåæåãããŠããªããã£ãŒã«ããæ€åºããŸã
- å®å
šæ§ãé«ããããã®å³å¯ã¢ãŒããªãã·ã§ã³ããµããŒãïŒäŸïŒ
strictNullChecks,noImplicitAny) - ã€ã³ã©ã€ã³ãã£ãŒãããã¯ã®ããã«VSCodeãªã©ã®ãšãã£ã¿ãŒãšã·ãŒã ã¬ã¹ã«çµ±åããŸã
å€ãã®ããŒã ã«ãšã£ãŠãã³ã³ãã€ã©ã¯äžè¬çãªã³ãŒãã£ã³ã°ãã¹ã«å¯Ÿãã第äžç·ã®é²åŸ¡ãšããŠæ©èœããéçºããã»ã¹ã®æ©ã段éã§åé¢é£ã®ãã°ãæããã«ããããšã§éçºè ã®ä¿¡é Œãé«ããŸãã
ããåºç¯ãªéçè§£æã®éç
1. ã¿ã€ãã¬ãã«ã®åé¡ã®ã¿ã«éå®
ã³ã³ãã€ã©ã®ã¹ã³ãŒãã¯åã®æ£ç¢ºæ§ã®ã¿ã«çŠç¹ãåœãŠãããŠããŸããããžãã¹ããžãã¯ãå®è¡æã®åäœãã¢ããªã±ãŒã·ã§ã³ã¢ãŒããã¯ãã£ã¯è©äŸ¡ããŸãããããŒã¿ãããŒãå¶åŸ¡æ§é ãå¯äœçšã«é¢é£ãããšã©ãŒã¯ãã³ã³ãã€ã©ã®å¯Ÿè±¡å€ã§ãã
2. åãè¶
ããæå³ã®çè§£ããªã
ã³ã³ãã€ã©ã¯ããŒã¿åã®åœ¢ç¶ãšå¶çŽãçè§£ããŸãããã¢ããªã±ãŒã·ã§ã³å
ã§ã®ããŒã¿ãããŒãã¢ãã«åããããšã¯ã§ããŸãããäŸãã°ããŠãŒã¶ãŒå
¥åããã§ãã¯ãããã«æ©å¯æ§ã®é«ãæäœã«æž¡ãããå ŽåãèŠåãçºããããæ¡ä»¶åå²ã«ãããè«çãšã©ãŒãæ€åºãããããããšã¯ãããŸããã
3. ã»ãã¥ãªãã£ããªã¹ã¯æ€åºæ©èœããªã
ã³ã³ãã€ã©ã¯ãã€ã³ãžã§ã¯ã·ã§ã³ãã€ã³ããå®å
šã§ãªãã¢ã¯ã»ã¹ãã¿ãŒã³ãäžé©åãªæ€èšŒããžãã¯ãšãã£ãæœåšçãªè匱æ§ãæ€åºããŸããã远å ã®ããŒã«ãªãã§ã¯ãã»ãã¥ã¢éçºã©ã€ããµã€ã¯ã«ïŒSDLïŒãã³ã³ãã©ã€ã¢ã³ã¹èŠä»¶ãæºããããã«äœ¿çšããããšã¯ã§ããŸããã
4. ã³ãŒãã£ã³ã°æšæºã®ã«ãŒã«åŒ·å¶ããªã
ãªã³ã¿ãŒãšã¯ç°ãªããã³ã³ãã€ã©ã¯ã¹ã¿ã€ã«ã®äžè²«æ§ããããžã§ã¯ãåºæã®ã³ãŒãå質ã«ãŒã«ã匷å¶ããŸãããåœåèŠåãã€ã³ããŒãæ§é ãçŠæ¢APIã®äœ¿çšãšãã£ãåé¡ã¯ããªã³ã¿ãŒãã«ã¹ã¿ã ããŒã«ãšçµã¿åãããªãéããã³ã³ãã€ã©ã®å¯Ÿè±¡å€ãšãªããŸãã
5. ã¢ããªã±ãŒã·ã§ã³å±€éã®ã³ã³ããã¹ãã®æ¬ åŠ
ã³ã³ãã€ã©ã¯ã¢ããªã±ãŒã·ã§ã³ã¢ãŒããã¯ãã£ãå¢çãè¶ããã€ã³ã¿ã©ã¯ã·ã§ã³ãã¢ãã«åããŸãããUIã³ã³ããŒãã³ããããã¯ãšã³ãããžãã¯ã«çŽæ¥ã¢ã¯ã»ã¹ãããããã¡ã€ã³å±€ã®æœè±¡åããã€ãã¹ãããããŠãèŠåãçºããŸããããã®ãããéå±€åã¢ãŒããã¯ãã£ã®æŽåæ§ãç¶æããäžã§ã®æçšæ§ãå¶éãããŸãã
6. ã¬ããŒããã¯ãŒã¯ãããŒã®çµ±åããªã
ã³ã³ãã€ã©ã¯ã³ã³ãœãŒã«ããŒã¹ã®ãšã©ãŒã¬ããŒããšãšãã£ã¿çµ±åæ©èœãæäŸããŸãããããŒã å
šäœã®ã¬ããŒãæ©èœãå±¥æŽãã¬ã³ãåææ©èœãDevSecOpsã¯ãŒã¯ãããŒãžã®çµ±åæ©èœã¯åããŠããŸãããããåºç¯ãªå¯èŠæ§ãåŸãã«ã¯ãå€éšããŒã«ãšçµã¿åãããå¿
èŠããããŸãã
ts-morph
ts-morphã¯ãTypeScriptã³ã³ãã€ã©APIãããŒã¹ã«æ§ç¯ãããéçºè åãã©ã€ãã©ãªã§ããã³ã³ãã€ã©ã®æœè±¡æ§ææšïŒASTïŒãé«ã¬ãã«ã§æœè±¡åããããšã§ãTypeScriptããã³JavaScriptã®ãœãŒã¹ã³ãŒãã«å¯Ÿããããã°ã©ã ã«ããæäœãç°¡çŽ åããŸããã³ãŒãçæã倿ãããŒã«éçºã§åºãå©çšãããŠããts-morphã¯ãéçºè ãæè»ãã€ã¢ã¯ã»ã¹ããããæ¹æ³ã§ã³ãŒãæ§é ã«ãã现ããã¢ã¯ã»ã¹ã§ããããã«ããŸãã
ts-morphã¯ãåŸæ¥ã®æå³ã§ã®éçè§£æããŒã«ã§ã¯ãªããéçè§£æããŒã«ãã«ã¹ã¿ã ã«ãŒã«ãšã³ãžã³ããŸãã¯ç§»è¡ãŠãŒãã£ãªãã£ãæ§ç¯ããããã®åºç€ãæäŸããŸããéçºè ã¯ãTypeScriptã®åæ å ±ã«å®å šã«ã¢ã¯ã»ã¹ããªãããå€§èŠæš¡ãªã³ãŒãæ§é ã®èªã¿åããããã²ãŒãã倿Žãè¡ãããšãã§ããŸãã
äž»ãªæ©èœãšäœ¿çšäŸ
- ãœãŒã¹ãã¡ã€ã«ãæ§æããªãŒãã·ã³ãã«ãžã®ããã°ã©ã ã«ããã¢ã¯ã»ã¹
- æ£ç¢ºãªæ å ±ååŸã®ããã®TypeScriptåãã§ãã«ãŒãšã®çµ±å
- æŽæ°ãããã³ãŒãã®åæã倿Žãçºè¡ã®ãµããŒã
- ã«ã¹ã¿ã ã®éçè§£æãã³ãŒãã¢ããããªãã¡ã¯ã¿ãªã³ã°ããŒã«ã®æ§ç¯ã«åœ¹ç«ã¡ãŸã
- çã®ã³ã³ãã€ã© API ãããå°ãªãå®åã³ãŒãã§ãAST ã®èµ°æ»ãšæäœã现ããå¶åŸ¡ã§ããŸãã
ts-morph ã¯ãTypeScript ã³ãŒãããŒã¹ãäœç³»çã«æ€æ»ãŸãã¯æŽæ°ããå¿ èŠãããå éšéçºããŒã«ãcodemod ãã¬ãŒã ã¯ãŒã¯ãèªååã¹ã¯ãªããã§ãã䜿çšãããŸãã
éçè§£æããŒã«ãšããŠã®éç
1. ã¹ã¿ã³ãã¢ãã³ã¢ãã©ã€ã¶ãŒã§ã¯ãªã
ts-morphã¯ãããã«äœ¿ããéçè§£æãœãªã¥ãŒã·ã§ã³ã§ã¯ãããŸãããè§£æã¿ã¹ã¯ãå®è¡ããã«ã¯ã«ã¹ã¿ã ã³ãŒããå¿
èŠãšãªãã©ã€ãã©ãªã§ãããã®ãŸãŸã§ã¯ããã°æ€åºãã«ãŒã«é©çšãèŠåçæãªã©ã®æ©èœã¯ãããŸãããéçºè
ã¯ããªã¹ã¯ãéåãã¹ãã£ã³ããããã®ç¬èªã®ããžãã¯ãå®è£
ããå¿
èŠããããŸãã
2. çµã¿èŸŒã¿ã®ã«ãŒã«ã»ãããããªã·ãŒããªã
åŸæ¥ã®åæããŒã«ãšã¯ç°ãªããts-morph ã«ã¯äºåå®çŸ©ãããã«ãŒã«ãããªã·ãŒãå質ãã§ãã¯ã¯å«ãŸããŠããŸããããã¹ãŠã®æ€èšŒããžãã¯ã¯æåã§èšè¿°ããå¿
èŠãããããããªãŒããŒããããçºçããããŒã éã§äžè²«æ§ã®ãªãé©çšãè¡ãããå¯èœæ§ãé«ãŸããŸãã
3. ã»ãã¥ãªãã£ãã³ã³ãã©ã€ã¢ã³ã¹æ©èœããªã
ts-morphã¯ãã»ãã¥ã¢ã³ãŒãã£ã³ã°ãã©ã¯ãã£ã¹ãå
¥åæ€èšŒãã³ã³ãã©ã€ã¢ã³ã¹èŠä»¶ãèªèããŸããããŸããæ±æåæãèåŒ±æ§æ€åºãã³ãŒãã«ããæ©å¯ããŒã¿ã®è¿œè·¡ããµããŒãããŠããŸããããããã®æ©èœãå®è£
ããã«ã¯ãå€§èŠæš¡ãªã«ã¹ã¿ã éçºãå¿
èŠã§ãã
4. ãšã³ã·ã¹ãã çµ±åã®æ¬ åŠ
ts-morphã¯éçºè
åããŠãŒãã£ãªãã£ã§ãããããCI/CDãã€ãã©ã€ã³ãã¬ããŒãããã·ã¥ããŒããIDEãšçŽæ¥çµ±åã§ããããã«ã¯èšèšãããŠããŸãããéçè§£æã«äœ¿çšããå Žåã¯ãã¬ããŒããå¯èŠåãé©çšã®ããã®è¿œå ã€ã³ãã©ã¹ãã©ã¯ãã£ãæ§ç¯ããå¿
èŠããããŸãã
5. ã³ã³ãã€ã©ã®å°éå®¶ã§ãªã人ã«ãšã£ãŠã¯åŠç¿æ²ç·ãæ¥å³»
ts-morphã¯APIãç°¡çŽ åãããŠããã«ãããããããTypeScriptã®åã·ã¹ãã ãã³ã³ãã€ã©ã®æåããããŠASTæ§é ããã£ãããšçè§£ããŠããå¿
èŠããããŸããã³ã³ãã€ã©ã®çµéšããªãããŒã ã«ãšã£ãŠãéçè§£æã«ts-morphã广çã«æŽ»çšããããšã¯éå£ãšãªãå¯èœæ§ããããŸãã
6. å€§èŠæš¡ã³ãŒãããŒã¹ã«å¯Ÿããããã©ãŒãã³ã¹æé©åã®å¶é
ts-morph ã¯äžèŠæš¡ãããžã§ã¯ãã§ã¯é©åãªããã©ãŒãã³ã¹ãæäŸããŸãããè€éãªåã®äŸåé¢ä¿ãæã€éåžžã«å€§èŠæš¡ãªã¢ããªããžããªãåæãããšãåæããžãã¯ãæ
éã«èšèšãããŠããªãéããã¡ã¢ãªãŸãã¯å®è¡ã®ããã«ããã¯ãçºçããå¯èœæ§ããããŸãã
ãœããŒãã¥ãŒã
SonarQubeã¯ãã³ãŒãå質ã®ç¶ç¶çãªæ€æ»ã«åºãæ¡çšãããŠãããã©ââãããã©ãŒã ã§ããTypeScriptãå«ãå¹ åºãããã°ã©ãã³ã°èšèªããµããŒãããéçºããŒã ãäŒæ¥ã§ãã°ãã³ãŒãèãã»ãã¥ãªãã£è匱æ§ãä¿å®æ§ã®åé¡ã®æ€åºã«æŽ»çšãããŠããŸããSonarQubeã¯CI/CDãã€ãã©ã€ã³ãšçµ±åãããããã·ã¥ããŒãããã¬ã³ãåæãã²ãŒãã£ã³ã°æ©èœãæäŸããããšã§ããœãããŠã§ã¢éçºã©ã€ããµã€ã¯ã«å šäœãéããŠåè³ªåºæºãéµå®ããŸãã
TypeScriptãããžã§ã¯ãåãã«ãSonarQubeã¯ã¹ã¿ã€ã«ãéè€ãè€éããã»ãã¥ãªãã£é¢é£ã®ãã§ãã¯ãã«ããŒããã«ãŒã«ã»ãããæäŸããŸããããŒã ããªããžããªå šäœã«ãããã³ãŒãå質ãããªã·ãŒäž»å°ã§äžå 管çãããçµç¹ã«å€ãæ¡çšãããŠããŸãã
TypeScriptã®äž»ãªæ©èœ
- ããã«äœ¿ããTypeScriptã®éçè§£æã«ãŒã«ã®ãµããŒã
- ä¿å®æ§ã®åé¡ãéè€ã³ãŒããè€éãã®ãããã¹ãããã®æ€åº
- OWASP ããã³ CWE ã¬ã€ãã©ã€ã³ã«æºæ ããã»ãã¥ãªãã£éèŠã®ãã§ãã¯
- GitHubãGitLabãJenkinsãAzure DevOpsããã®ä»ã®CIããŒã«ãšã®çµ±å
- éäžåãããå質ã²ãŒãæ§æãšããŒã ããŒã¹ã®æš©é管ç
- å±¥æŽææšãšãããžã§ã¯ãã®å¥å šæ§ææšãåããè±å¯ãªããã·ã¥ããŒã
SonarQube ã¯ãã³ã³ãã©ã€ã¢ã³ã¹ãç£èŠãããŒã éã®èª¿æŽãéèŠãªå€§èŠæš¡çµç¹ã§é·æçãªå質ã¬ããã³ã¹ãç¶æããã®ã«ç¹ã«åœ¹ç«ã¡ãŸãã
TypeScript éçè§£æã®å¶é
1. TypeScriptã®è¡šé¢çãªçè§£
SonarQube 㯠TypeScript ããµããŒãããŠããŸããããã®ã«ãŒã«ãšã³ãžã³ã¯ TypeScript ã®é«åºŠãªåã·ã¹ãã ãååã«æŽ»çšããŠããŸãããæ·±ãåæšè«ãã³ã³ãã€ã©çµ±ååã®æšè«ã§ã¯ãªããäž»ã«æ§æãšéçãã¿ãŒã³ã«åºã¥ããŠåæãå®è¡ããŸãããã®çµæããžã§ããªãã¯ã®èª€çšã埮åŠãªå匷å¶ãäžå®å
šãª null å®å
šæ§ã®é©çšã«é¢é£ããåé¡ãèŠéãå¯èœæ§ããããŸãã
2. éå®çãªå¶åŸ¡ãšããŒã¿ãããŒè§£æ
SonarQube ã¯ãTypeScript ç¹æã®é«åºŠãªå¶åŸ¡ãããŒãããŒã¿ãããŒã¢ããªã³ã°ãå®è¡ããŸããã颿°ãã¢ãžã¥ãŒã«éã§ããŒã¿ãã©ã®ããã«äŒæãããã远跡ã§ãããä¿¡é Œã§ããªãå
¥åãæ©å¯æ§ã®é«ãæäœã API ã«å°éããŠããªããã©ãããåæããæ©èœãåããŠããŸããã
3. TypeScriptã®æè»æ§ã®ãªãã«ãŒã«ã«ã¹ã¿ãã€ãº
SonarQube ã¯ã«ã¹ã¿ã ã«ãŒã«æ¡åŒµããµããŒãããŠããŸãããTypeScript åãã®ã«ãŒã«ã®äœæã調æŽã¯å®¹æã§ã¯ãããŸãããã«ã¹ã¿ãã€ãºã¯äž»ã« Java ããã®ä»ã®ã³ã¢èšèªã«éç¹ã眮ãããŠãããTypeScript ã®åäœã調æŽããããã®æè»æ§ãããã¥ã¡ã³ãã¯éãããŠããŸãã
4. IDEããŒã¹ã®ããŒã«ã«æ¯ã¹ãŠãã£ãŒãããã¯ãé
ãã
SonarQube ã®åæã¯éåžžãCI äžãŸãã¯å€éãžã§ãã®äžéšãšããŠå®è¡ããããããåé¡ã®æ€åºãã³ãŒãã®ããã·ã¥åŸãŸã§é
ããå¯èœæ§ããããŸããããã¯ããšãã£ã¿ãŒå
ãŸãã¯ã³ãããæã®ããã¯äžã«éçºè
ã«å³æãã£ãŒãããã¯ãæäŸããããŒã«ãšã¯å¯Ÿç
§çã§ãã
5. å€§èŠæš¡ãããžã§ã¯ãã§ã¯ãªãœãŒã¹éçŽç
SonarQube ãå€§èŠæš¡ã«éçšããã«ã¯ãå°çšãµãŒããŒãŸãã¯ã¯ã©ãŠãã€ã³ãã©ã¹ãã©ã¯ãã£ãå¿
èŠã§ããå€§èŠæš¡ãª TypeScript ã¢ãã¬ããžããªããã«ããããžã§ã¯ããã€ãã©ã€ã³ã§ã¯ãåæãã¬ããŒãäœææã®é床äœäžãåé¿ããããã«ããã¥ãŒãã³ã°ãããã©ãŒãã³ã¹èª¿æŽãå¿
èŠã«ãªãå ŽåããããŸãã
6. ãªã¢ã«ã¿ã€ã éçºè
çµ±åã®å¶é
SonarLintã¯SonarQubeãšã®IDEçµ±åãæäŸããŠããŸãããTypeScriptã®ãµããŒãã¯Javaãªã©ã®èšèªã«æ¯ã¹ãŠéå®çã§ããIDEã§çŽæ¥äœæ¥ããå Žåãå°çšã®ãªã³ã¿ãŒãéçã¢ãã©ã€ã¶ãŒãšæ¯èŒããŠããã£ãŒãããã¯ã«ãŒãã®å¿çæ§ãæ
å ±éãå°ãªããšæããéçºè
ããããããããŸããã
7. äžè¬åãããéçè§£æã¢ãããŒã
SonarQubeã®åŒ·ã¿ã¯ãå¹
åºãèšèªæšªæçãªã³ãŒãå質ãã©ããã³ã°ã«ãããŸãããã³ã¬ãŒã¿ãé«åºŠãªãžã§ããªãã¯ããã¬ãŒã ã¯ãŒã¯åºæã®ã¢ãŒããã¯ãã£ïŒAngularãNestJSãªã©ïŒãããã³ããšã³ããšããã¯ãšã³ãã®å
±éã¢ãã«ãšãã£ããææ°ã®TypeScriptéçºãã¿ãŒã³ã«ç¹åããŠæé©åãããŠããããã§ã¯ãããŸããããã®æ±çšçãªã¢ãããŒãã¯ãæ·±ãçµ±åãããTypeScriptã³ãŒãããŒã¹ããéåžžã«æ
£çšçãªTypeScriptã³ãŒãããŒã¹ã§ã¯ãç²ç¹ãšãªãå¯èœæ§ããããŸãã
ã¹ããã¯ã³ãŒã
Snyk Codeã¯ãéçºè åãã®éçã¢ããªã±ãŒã·ã§ã³ã»ãã¥ãªãã£ãã¹ãïŒSASTïŒããŒã«ã§ããœãŒã¹ã³ãŒãå ã®è匱æ§ãçŽæ¥ç¹å®ããããã«èšèšãããŠããŸããTypeScriptãšJavaScriptãã¯ãããå€ãã®èšèªããµããŒãããã³ãŒãããªãŒãã³ãœãŒã¹ã®äŸåé¢ä¿ããã³ã³ãããã€ã³ãã©ã¹ãã©ã¯ãã£ã«è³ããŸã§ããœãããŠã§ã¢ãµãã©ã€ãã§ãŒã³å šäœã®ã»ãã¥ãªãã£ç¢ºä¿ã«éç¹ã眮ããSnykãã©ãããã©ãŒã ã®äžéšã§ãã
ããã©ãŒãã³ã¹ãšéçºè ãšã¯ã¹ããªãšã³ã¹ã念é ã«æ§ç¯ãããSnyk Codeã¯ãéçºè ãã³ãŒããäœæããéã«ãã»ãã¥ãªãã£äžã®åé¡ã«é¢ããã»ãŒãªã¢ã«ã¿ã€ã ã®ãã£ãŒãããã¯ãæäŸããããšãç®æããŠããŸããSnyk Codeã®æ©æ¢°åŠç¿ãšã³ãžã³ã¯ãå€§èŠæš¡ãªã³ãŒãããŒã¹ã§ãã¬ãŒãã³ã°ãããŠãããå®äžçã®ãšã¯ã¹ããã€ãã§ããèŠãããå®å šã§ãªããã¿ãŒã³ã誀çšãæ€åºããŸãã
TypeScript ã®ã³ã¢æ©èœ
- TypeScript ãš JavaScript åãã®é«é㪠IDE çµ±åã»ãã¥ãªãã£ã¹ãã£ã³
- XSSããã¹ãã©ããŒãµã«ãå®å šã§ãªããã·ãªã¢ã©ã€ãŒãŒã·ã§ã³ãã³ãã³ãã€ã³ãžã§ã¯ã·ã§ã³ãªã©ã®äžè¬çãªè匱æ§ã®æ€åº
- Visual Studio CodeãJetBrains IDE ãªã©ã® IDE ãµããŒã
- éèŠãªã»ãã¥ãªãã£ã®çºèŠã«åºã¥ããŠãã«ããäžæããããã® CI/CD çµ±å
- éçºè ã«åããã修埩ã¢ããã€ã¹ãšè匱æ§ã®èª¬æ
- ã€ã³ã©ã€ã³ã¬ã€ãã³ã¹ã«ããå®å šãªã³ãŒãã£ã³ã°ãã©ã¯ãã£ã¹ã®ãµããŒã
Snyk ã³ãŒãã¯ãéçºè ã«ã³ãŒãã®ã»ãã¥ãªãã£äœå¶ã«é¢ããå®çšçãªæŽå¯ãæäŸããããšã§ãã»ãã¥ãªãã£ã®ã·ããã¬ãããæ¯æŽããããã«ãææ°ã®ã¢ããªã±ãŒã·ã§ã³éçºãã€ãã©ã€ã³ã§åºã䜿çšãããŠããŸãã
TypeScript ã«ãããéçè§£æã®æ·±ãã®å¶é
1. ã»ãã¥ãªãã£éèŠããã«ã¹ãã¯ãã«ã®éçè§£æã§ã¯ãªã
Snyk Codeã¯ãäžè¬çãªã³ãŒãå質ãã¢ãŒããã¯ãã£ã®åŒ·å¶ãä¿å®æ§è¿œè·¡ã§ã¯ãªããäž»ã«èåŒ±æ§æ€åºãç®çãšããŠæ§ç¯ãããŠããŸããåå®å
šæ§ã®åé¡ãããã©ãŒãã³ã¹ã®ããã«ããã¯ãã»ãã¥ãªãã£ã«é¢ä¿ã®ãªãã³ãŒãèã¯æ€åºããŸããã
2. æ·±ãåæšè«ãã«ã¹ã¿ã åã¢ããªã³ã°ããªã
Snyk Codeã¯TypeScriptããµããŒãããŠããŸãããTypeScriptã³ã³ãã€ã©APIãçšããå®å
šãªåè§£æã¯è¡ããŸããããã®ãããè€éãªãžã§ããªãã¯ããŠããªã³åããããã¯ããåºç¯ãªã³ãŒãã³ã³ããã¹ãã«äŸåããæšè«åãæ±ãã·ããªãªã§ã¯ã粟床ãå¶éãããå¯èœæ§ããããŸãã
3. 建ç¯ã«é¢ããèªèã®éç
Snyk Codeã¯ã¢ããªã±ãŒã·ã§ã³ã¢ãŒããã¯ãã£ãã¢ãžã¥ãŒã«å¢çãã¢ãã«åããŸãããéå±€åã«ãŒã«ïŒäŸïŒUIãããã¡ã€ã³ããžãã¯ãžã®çŽæ¥ã¢ã¯ã»ã¹çŠæ¢ïŒã匷å¶ãããããã¡ã€ã³é§åèšèšã®å¶çŽéåãæ€åºãããããããšã¯ã§ããŸããã
4. ã«ã¹ã¿ã ã«ãŒã«ã¯ãµããŒããããŠããŸãã
ãšã³ãžã³ã¯ã¯ããŒãºãã·ã¹ãã ãšããŠåäœãããŠãŒã¶ãŒã¯ç¬èªã®éçè§£æã«ãŒã«ãããªã·ãŒãå®çŸ©ããããšãã§ããŸããã瀟å
ã³ãŒãã£ã³ã°æšæºãã³ã³ãã©ã€ã¢ã³ã¹èŠä»¶ããŸãã¯ç¬èªã®ããžãã¹ããžãã¯ãæã€ããŒã ã«ãšã£ãŠãããã¯ã«ã¹ã¿ãã€ãºã®å¶éãšãªããŸãã
5. ãã©ãã¯ããã¯ã¹ãã¿ãŒã³èªèã¢ãã«
Snyk Codeã¯é«åºŠãªæ©æ¢°åŠç¿ãçšããŠã»ãã¥ãªãã£åé¡ãæ€åºããŸããããã®å€æã®èåŸã«ããããžãã¯ãå¿
ãããå
¬éããŠããããã§ã¯ãããŸããããã®ããããããžã§ã¯ãã®ç¶æ³ã«å¿ããŠçµæãæ€èšŒã調æŽããããã¯èª¿æŽããããšãå°é£ã«ãªããã»ãã¥ãªãã£ç£æ»ãã³ã³ãã©ã€ã¢ã³ã¹ã¬ãã¥ãŒã®éææ§ãäœäžããå¯èœæ§ããããŸãã
6. ãããžã§ã¯ãéã®ãããŒãããåã
ã®ãã¡ã€ã«ã«éç¹ã眮ã
Snyk Code ã®åæã¯ãåäžã®ãã¡ã€ã«ãŸãã¯ããŒã«ã«ã³ã³ããã¹ãã«éå®ãããåŸåããããŸããè€æ°ã®ãµãŒãã¹ã«ãŸãããè匱æ§ãåçã€ã³ããŒãã䌎ãè匱æ§ããŸãã¯ã¢ãŒããã¯ãã£å¢çãè¶ããå€ã®äŒæã«äŸåããè匱æ§ã®æ€åºã¯å°é£ã§ãã
7. æ©èœã¬ãã«ã«å¿ãããµãã¹ã¯ãªãã·ã§ã³ã¢ãã«
é«åºŠãªæ©èœãçµ±åãå€§èŠæš¡ãããžã§ã¯ãã®ãµããŒãã¯ãææãã©ã³ã§ã®ã¿ãå©çšããã ããå ŽåããããŸããããã«ããããã©ãããã©ãŒã ã®å®å
šãªå°å
¥ãå¿
èŠãšãããããé«åºŠãªã»ãã¥ãªãã£å¯Ÿçãå¿
èŠãšããå°èŠæš¡ããŒã ããªãŒãã³ãœãŒã¹ãŠãŒã¶ãŒã«ãšã£ãŠãã¢ã¯ã»ã¹ãå¶éãããå¯èœæ§ããããŸãã
ã»ã ã°ã¬ãã
Semgrepã¯ãæè»æ§ãã¹ããŒãããããŠéçºè ã«ããå¶åŸ¡æ§ãéèŠããŠèšèšãããææ°ã®éçè§£æããŒã«ã§ããTypeScriptãå«ãå¹ åºãèšèªããµããŒãããçŽæçãªãã¿ãŒã³ãããã³ã°æ§æãçšããã«ã¹ã¿ã ã«ãŒã«ã®äœæãå¯èœã§ããåœåã¯ã»ãã¥ãªãã£éèŠã®ãŠãŒã¹ã±ãŒã¹ããµããŒãããããã«éçºãããŸããããä»ã§ã¯ã¢ããªã±ãŒã·ã§ã³ã»ãã¥ãªãã£ããŒã ãDevOpsãšã³ãžãã¢ããããŠéçºè ãªã©ããããã人ãå©çšããæ±çšã³ãŒãè§£æãšã³ãžã³ãžãšé²åããŠããŸãã
TypeScriptåãã«ãSemgrepã¯äžè¬çãªã»ãã¥ãªãã£åé¡ããªã³ãã£ã³ã°ã®ã£ãããã³ãŒãå質ãã¿ãŒã³ã察象ãšããã«ãŒã«ããã¯ãæäŸããŠããŸããããŒã«ã«ç°å¢ã§ãCI/CDã¯ãŒã¯ãããŒå ã§ã䜿çšã§ããé«éå®è¡ãšã«ã¹ã¿ãã€ãºã®å®¹æãã§ç¥ãããŠããŸãã
TypeScriptã®äž»ãªæ©èœ
- æ§æã颿°åŒã³åºããåŒãªã©ã«å¯Ÿãããã¿ãŒã³ããŒã¹ã®ã«ãŒã«ãããã³ã°
- ã»ãã¥ãªãã£ãããã©ãŒãã³ã¹ãä¿å®æ§ã®ããã®çµã¿èŸŒã¿ããã³ã³ãã¥ããã£è²¢ç®ã®ã«ãŒã« ã»ãã
- éçºè ã«åªãããèšè¿°ãšä¿å®ãç°¡å㪠YAML ã«ãŒã«å®çŸ©
- éäžçãªããªã·ãŒç®¡çãšã¬ããŒãã®ããã®ããŒã«ã« CLI ãšã¯ã©ãŠãããŒã¹ã®ãã©ãããã©ãŒã
- ã€ã³ã©ã€ã³éçºè ãã£ãŒãããã¯ã®ããã® IDE ãµããŒããš Git çµ±å
- 掻çºãªã³ãã¥ããã£ãšãšã³ã¿ãŒãã©ã€ãºåã補åãåãããªãŒãã³ãœãŒã¹ã³ã¢
Semgrep ã¯ãããŒã ãç¹å®ã®ã³ãŒãã£ã³ã° ãã¿ãŒã³ãé©çšããããå éš API ãä¿è·ããããã³ã³ãã€ã©ãæ·±ãçµ±åããã«å±éºãªæ§é ãè¿ éã«ç¹å®ãããããå¿ èŠãããç°å¢ã§ç¹ã«åœ¹ç«ã¡ãŸãã
TypeScript éçè§£æã®å¶é
1. ãã€ãã£ãåã·ã¹ãã ã®èªèããªã
Semgrepã¯åãè©äŸ¡ããéã«TypeScriptã³ã³ãã€ã©ã䜿çšããŸããããã®ããã解決æžã¿ã®åããžã§ããªãã¯ããŠããªã³èå¥åããŸãã¯æšè«ãããå€ã«äŸåããåé¡ãæ€åºã§ããŸãããããã«ããã颿°ã®ãªãŒããŒããŒããåºå¥ããããååºæã®åäœãæ€èšŒãããããèœåãå¶éãããŸãã
2. æ§æã«éå®ããããã¿ãŒã³ãããã³ã°
Semgrepã®ã³ã¢ãããã³ã°ãšã³ãžã³ã¯æœè±¡æ§ææšïŒASTïŒã«åºã¥ããŠåäœããŸãããã³ãŒãå
šäœã®å¶åŸ¡ãããŒãããŒã¿ãããŒãã¢ããªã³ã°ããŠããŸããã衚é¢çãªãã¿ãŒã³ã®æ€åºã«ã¯åªããŠããŸãããæ±æè¿œè·¡ãæ¡ä»¶ä»ãå€äŒæãå€é¢æ°ãã¬ãŒã¹ããã¯ãšãã£ãããæ·±ãåæã«ã¯èŠåŽããŸãã
3. æ·±ãã®æåã«ãŒã«ã«ãã¬ããžãå¿
èŠ
Semgrep ã¯ã«ã¹ã¿ã ã«ãŒã«ã®äœæããµããŒãããŠããŸãããæå³ã®ããã«ãã¬ããžã®å®çŸ©ã¯äººéã®äœæè
ã«äŸåããŠããŸãããã®ãããæè»æ§ãšåŽåã®éã«ãã¬ãŒããªããçããŸããããŒã ã¯éèŠãªç¹ãç¹å®ããããããšã³ã³ãŒãããå¿
èŠããããããã«ã¯æéãšå°éç¥èãå¿
èŠã§ãã
4. éå®çãªæç¶ãéããã³ãã¡ã€ã«éåæ
Semgrep ã¯è€æ°ãã¡ã€ã«ã«ãŸãããã³ãŒãè§£æãåºæ¬çã«ãµããŒãããŠããŸãããå
ç¢ãªããã·ãŒãžã£éè§£æãå®å
šãªã³ãŒã«ã°ã©ãæ§ç¯ã¯å®è¡ã§ããŸãããã³ã³ããŒãã³ãéã®ã³ãŒãå®è¡ãçè§£ããå¿
èŠãããåé¡ã¯ãæ€åºãããªãå¯èœæ§ããããŸãã
5. ã«ãŒã«ã®ã¹ã±ãŒãªã³ã°ãšç®¡çã®è€éã
ã«ãŒã«ã®æ°ãšè€éããå¢ãã«ã€ããŠãSemgrepã®ã¯ã©ãŠããã©ãããã©ãŒã ãå°å
¥ããªããã°ããããžã§ã¯ãéã§ã«ãŒã«ã管çããããšãå°é£ã«ãªãå¯èœæ§ããããŸããå€ãã®ã«ã¹ã¿ã ã«ãŒã«ã管çããããŒã ã¯ãæŽçãããŒãžã§ã³ç®¡çãç°å¢éã®äžè²«æ§ã®ç¶æãšãã£ã課é¡ã«çŽé¢ããå¯èœæ§ããããŸãã
6. ã»ãã¥ãªãã£SASTããŒã«ã®å®å
šãªä»£æ¿åã§ã¯ãªã
Semgrepã¯å€ãã®é«ã¬ãã«ã®ã»ãã¥ãªãã£ãªã¹ã¯ãã«ããŒããŸãããè€éãªã¢ããªã±ãŒã·ã§ã³ã«ããããã¹ãŠã®ãã¹ãæ±ææºãã·ã³ã¯ãã¢ãã«åããããã§ã¯ãããŸããã峿 Œãªã³ã³ãã©ã€ã¢ã³ã¹èŠä»¶ãã»ãã¥ã¢éçºã©ã€ããµã€ã¯ã«ïŒSDLïŒèŠä»¶ãæã€çµç¹ã§ã¯ãSemgrepãããé«åºŠãªSASTããŒã«ã§è£å®ããå¿
èŠããããããããŸããã
7. ã«ãŒã«èª¿æŽã®åŠç¿æ²ç·
ã«ãŒã«ã®èšè¿°ã¯å®¹æã§ãããæ£ç¢ºã§ãã€ãºã®å°ãªããã¿ãŒã³ãäœæããã«ã¯ãæ§æãšãããžã§ã¯ãã®ã³ã³ããã¹ãã®äž¡æ¹ããã£ãããšçè§£ããå¿
èŠããããŸããæ°ãããŠãŒã¶ãŒã¯ã詊è¡ãšãã£ãŒãããã¯ãéããŠã«ãŒã«ãæŽç·ŽããããŸã§ã誀æ€ç¥ãã«ãã¬ããžäžè¶³ã«ééããå¯èœæ§ããããŸãã
Webpack ãã³ãã« ã¢ãã©ã€ã¶ãŒ
Webpack Bundle Analyzerã¯ãéçºè ãWebpackãã³ãã«ã®å å®¹ãæ€æ»ã§ããããã«èšèšãããå¯èŠåããŒã«ã§ãããã³ãã«ããããã¡ã€ã«ã®ã€ã³ã¿ã©ã¯ãã£ããªããªãŒããããçæãããã«ãã«å«ãŸããäŸåé¢ä¿ãã¢ãžã¥ãŒã«ãã¢ã»ããã®ãµã€ãºãšæ§é ã衚瀺ããŸããããã«ããããã³ãã«ã®æ§æãçè§£ãããããªããäºæ³å€ã«å€§ããªäŸåé¢ä¿ãæ€åºããWebã¢ããªã±ãŒã·ã§ã³ã®é ä¿¡ããã©ãŒãã³ã¹ãæé©åã§ããŸãã
Webpack ã䜿çšãã TypeScript ãããžã§ã¯ãã§ã¯ãBundle Analyzer ããã«ãåŸã®åæã«ãããŠéèŠãªåœ¹å²ãæãããŸããããã¯ãTypeScript ã¢ãžã¥ãŒã«ãšãµãŒãããŒãã£è£œã©ã€ãã©ãªãæ¬çªç°å¢ã®ææç©ã«ã©ã®ããã«ããã±ãŒãžåãããŠããããæããã«ããããšã§å®çŸããŸããããã«ããããã³ãã«ãµã€ãºã®åæžãèªã¿èŸŒã¿æéã®ççž®ãåé·ãŸãã¯éè€ããäŸåé¢ä¿ã®æ€åºãå¯èœã«ãªããŸãã
äž»ãªæ©èœ
- Webpack åºåã§ JavaScriptãCSSãã¢ã»ããã®ãµã€ãºãèŠèŠåããŸã
- ã¯ã©ã€ã¢ã³ããã³ãã«å ã®ãµã€ãºè¶ éãŸãã¯éè€ããããã±ãŒãžãèå¥ããã®ã«åœ¹ç«ã¡ãŸã
- ããªãŒã·ã§ã€ãã³ã°ãšé å»¶ããŒãã®æé©åæŠç¥ãæ¯æŽããŸã
- ãã©ã°ã€ã³èšå®ãä»ããŠWebpackãšçµ±å
- ã€ã³ã¿ã©ã¯ãã£ããªã€ã³ã¿ãŒãã§ãŒã¹ã¯ããã£ã«ã¿ãªã³ã°ããºãŒã ãããªã«ããŠã³æ€æ»ããµããŒãããŸãã
- èªååãŸãã¯ã«ã¹ã¿ã ã¬ããŒãã¯ãŒã¯ãããŒçšã®JSONåºåããµããŒã
Webpack Bundle Analyzer ã¯ãç¹ã«å€§èŠæš¡ãªäŸåé¢ä¿ã°ã©ããäžè¬çã§ãã ReactãAngularãããã³ Vue.js ãšã³ã·ã¹ãã ã«ãããŠãSPA ããã³ MPA ã®ããã©ãŒãã³ã¹ãæé©åããããã³ããšã³ãéçºè ã«ãã£ãŠãã䜿çšãããŸãã
éçè§£æããŒã«ãšããŠã®éç
1. ãœãŒã¹ã³ãŒããååæãªã
Webpack Bundle Analyzerã¯TypeScriptãJavaScriptã®ãœãŒã¹ã³ãŒããæ€æ»ããŸããããã«ãåºåã¬ãã«ã§ã®ã¿åäœãããã³ãã«ãããã¢ãŒãã£ãã¡ã¯ããåæããŸãããœãŒã¹ãã¡ã€ã«å
ã®ã³ãŒãã£ã³ã°ãšã©ãŒãåã®äžäžèŽããŸãã¯å®å
šã§ãªããã¿ãŒã³ãæ€åºããããšã¯ã§ããŸããã
2. ã»ãã¥ãªãã£ãå質ã®åŒ·åã®ããã«èšèšãããŠããªã
ãã®ããŒã«ã¯ãµã€ãºãšæ§é ã«é¢ããæŽå¯ãæäŸããŸãããã»ãã¥ãªãã£ã¹ãã£ã³ããªã³ãã£ã³ã°ãä¿å®æ§è©äŸ¡ã¯æäŸããŸãããè匱æ§ãã³ãŒãã¹ã¡ã«ãããžãã¯ãšã©ãŒãæ€åºããããšã¯ã§ãããã¬ããã³ã¹ãã³ã³ãã©ã€ã¢ã³ã¹ãç®çãšãããã®ã§ã¯ãããŸããã
3. å®è¡æã®åäœã«å¯Ÿããæèãæ¬ åŠããŠãã
ã¢ãã©ã€ã¶ãŒã¯ãå®è¡æã«ã¢ãžã¥ãŒã«ãã©ã®ããã«äœ¿çšãããããã¢ãã«åããŸãããå®è¡ãã¹ãããŒã¿ãããŒã䜿çšé »åºŠãè©äŸ¡ããããšã¯ã§ããŸããããã³ãã«ã«è¡šç€ºããã倧ããªã¢ãžã¥ãŒã«ã¯ãã»ãšãã©ã¢ã¯ã»ã¹ãããªã1ã€ã®æ©èœã§ã®ã¿äœ¿çšãããŠããå¯èœæ§ããããããŒã«ã¯ãããåºå¥ã§ããŸããã
4. TypeScriptåã·ã¹ãã ãšã®çµ±åãªã
ãã®ããŒã«ã¯ãã©ã³ã¹ãã€ã«ããã³çž®å°ãããã³ãŒãã«å¯ŸããŠåäœãããããTypeScriptã®åã·ã¹ãã ãèæ
®ããããåå®å
šãªãã©ã¯ãã£ã¹ã匷å¶ãããããããšã¯ã§ããŸãããã€ã³ããŒããããã¢ãžã¥ãŒã«ãåã匷å¶ãããã³ã³ããã¹ãã§å®å
šãŸãã¯å¹ççã«äœ¿çšãããŠãããã©ããã倿ã§ããŸããã
5. ãã«ãæé©å以å€ã§ã®äœ¿çšã¯éå®ç
Webpack Bundle Analyzerã¯ããã©ãŒãã³ã¹ãã¥ãŒãã³ã°ã«ã¯åœ¹ç«ã¡ãŸãããããžãã¯æ€èšŒãã¢ãŒããã¯ãã£èšèšã®é©çšãç¶ç¶çãªå質管çãšãã£ãåéã§ã¯äŸ¡å€ãæäŸããŸãããå
æ¬çãªåæãåŸãã«ã¯ããªã³ã¿ãŒãã³ã³ãã€ã©ããŸãã¯å®å
šãªéçã¢ãã©ã€ã¶ãŒãšçµã¿åãããå¿
èŠããããŸãã
6. ãªã¢ã«ã¿ã€ã ãŸãã¯éçºè
åãã®ãã£ãŒãããã¯ããªã
ãã®ããŒã«ã¯éåžžãæåã§å®è¡ãããããã«ãåŸã®å¯èŠåã¹ãããã®äžéšãšããŠå®è¡ããŸããã«ã¹ã¿ã èªååã¬ã€ã€ãŒã§ã©ãããããŠããªãéããã€ã³ã©ã€ã³ãšãã£ã¿ãŒãã£ãŒãããã¯ãã³ãããåã®åŒ·å¶ãCIããŒã¹ã®ã¢ã©ãŒãã¯æäŸãããŸããã
7. Webpackãã«ãã§ã®ã¿åäœããŸã
Webpackã䜿çšããŠããªããããžã§ã¯ãïŒäŸïŒViteãRollupãesbuildã䜿çšããŠãããããžã§ã¯ãïŒã§ã¯ãWebpack Bundle AnalyzerãçŽæ¥äœ¿çšã§ããŸãããWebpack Bundle Analyzerã®æçšæ§ã¯ç¹å®ã®ãã³ãã©ãŒæ§æã«éå®ãããŠãããTypeScriptããŒã¹ã®ãšã³ã·ã¹ãã ã«ãããæ°ããªãã«ãã·ã¹ãã ã®ãã¬ã³ããåæ ããŠããªãå¯èœæ§ããããŸãã
ã©ã€ãããŠã¹CI
Lighthouse CI ã¯ãç¶ç¶çã€ã³ãã°ã¬ãŒã·ã§ã³ ã¯ãŒã¯ãããŒã®äžç°ãšã㊠Google ã® Lighthouse ã¬ããŒããèªåçã«å®è¡ããããã®ããã©ãŒãã³ã¹ããã³åè³ªç£æ»ããŒã«ã§ããããã©ãŒãã³ã¹ãã¢ã¯ã»ã·ããªãã£ããã¹ã ãã©ã¯ãã£ã¹ãSEOãããã°ã¬ãã·ã ãŠã§ã ã¢ããªïŒPWAïŒã³ã³ãã©ã€ã¢ã³ã¹ãªã©ãå¹ åºãåºæºã«åºã¥ããŠãŠã§ãã¢ããªã±ãŒã·ã§ã³ãè©äŸ¡ããŸããLighthouse CI ã䜿çšãããšãããŒã ã¯ãµã€ãã®å質ãçµæçã«è¿œè·¡ããéçºããã³ãããã€äžã«ããã©ãŒãã³ã¹ ããžã§ããã匷å¶ããããšãã§ããŸãã
Lighthouse CIã¯ããã³ããšã³ãã®TypeScriptã¢ããªã±ãŒã·ã§ã³ãç¹ã«ãã©ãŠã¶ããŒã¹ã®ç°å¢ãã¿ãŒã²ãããšããã¢ããªã±ãŒã·ã§ã³ã«æçšã§ãããéçãªãœãŒã¹ã³ãŒãã§ã¯ãªããã©ã³ã¿ã€ã ãšã¬ã³ããªã³ã°ãããåºåã«éç¹ã眮ããŠããŸããCI/CDãã€ãã©ã€ã³ãšã®çµ±åã«ãããææ°ã®SPAãPWAããããŠäžè¬å ¬éãŠã§ããµã€ããéçºããããŒã ã«ãšã£ãŠå®çšçãªéžæè¢ãšãªããŸãã
äž»ãªæ©èœ
- ãã«ãªã¯ãšã¹ããšæ¬çªç°å¢ã®ãããã€ã¡ã³ãã«ããã Lighthouse ç£æ»ãèªååããŸã
- ããã©ãŒãã³ã¹ã¹ã³ã¢ããã³ãã«ãµã€ãºãã³ã¢ãŠã§ããã€ã¿ã«ã®å€åã远跡ããŸã
- ååž°ãçºçããå Žåã«ãã«ãã倱æãããããã®ã¹ã³ã¢åŒ·å¶ã®ãããå€ããµããŒãããŸã
- GitHub ActionsãGitLabãCircleCI ãªã©ã®äžè¬ç㪠CI ãããã€ããŒãšäºææ§ããããŸã
- é·æçãªã¢ããªã±ãŒã·ã§ã³ã®å¥å šæ§ãç£èŠããããã®åŸåããŒã¿ãæäŸããŸã
- ã¢ãã€ã«ã®é床ãã¬ã³ããªã³ã°ã®ãããã¯ãªã©ã®å®éã®ç¶æ³ããã¹ãããã®ã«åœ¹ç«ã¡ãŸã
Lighthouse CI ã¯ãããã©ãŒãã³ã¹éèŠã®ããã³ããšã³ã ããŒã ã«ãã£ãŠã倿Žã«ãã£ãŠãŠãŒã¶ãŒ ãšã¯ã¹ããªãšã³ã¹ãã¢ã¯ã»ã·ããªãã£ããŸã㯠Web æšæºãžã®æºæ ãäœäžããªãããã«ããããã«ãã䜿çšãããŸãã
TypeScript éçè§£æã®å¶é
1. ãœãŒã¹ã³ãŒããžã®ã¢ã¯ã»ã¹ãªã
Lighthouse CIã¯ããããã€ããããã«ããŸãã¯ã©ã€ãURLãè©äŸ¡ããŸããTypeScriptã®ãœãŒã¹ã³ãŒããèªã¿èŸŒãã ãåæãããããªããããã³ãŒãããŒã¹ããçŽæ¥ããžãã¯ã®ãã°ãå®å
šã§ãªããã¿ãŒã³ãä¿å®æ§ã®åé¡ãæ€åºããããšã¯ã§ããŸããã
2. éçè§£æããŒã«ã§ã¯ãªã
Lighthouse CIã¯æçãªã©ã³ã¿ã€ã ç£æ»ãå®è¡ããŸãããã³ãŒããéçã«æ€æ»ããããã§ã¯ãããŸãããåå®å
šæ§ã®åŒ·åãã³ãŒãã®èãã®ç¹å®ãå£ããã¢ãŒããã¯ãã£ã®æ€åºã¯ã§ããŸãããLighthouse CIãåŸãæ
å ±ã¯ãã¹ãŠãã¢ããªã±ãŒã·ã§ã³ããããã€ãããåŸããŸãã¯ãã©ãŠã¶ã§ã·ãã¥ã¬ãŒã·ã§ã³ãããåŸã®æåã«åºã¥ããŠããŸãã
3. å
éšã¢ããªã±ãŒã·ã§ã³ããžãã¯ã®æŽå¯ãéãããŠãã
ãã®ããŒã«ã¯ãããŒãžã®èªã¿èŸŒã¿æéãç»åã®æé©åãã¢ã¯ã»ã·ããªãã£ã©ãã«ãšãã£ããŠãŒã¶ãŒåãã®ææšã«éç¹ã眮ããŠããŸããTypeScriptã³ãŒãããŒã¹å
ã®ããžãã¹ããžãã¯ãå
éšãµãŒãã¹æ§é ãAPIã®äœ¿çšç¶æ³ã¯åæããŸããã
4. ã»ãã¥ãªãã£ãéèŠããŠããªã
Lighthouse CIã«ã¯ãHTTPSãCSPããããŒã®äœ¿çšãªã©ãåºæ¬çãªã»ãã¥ãªãã£é¢é£ã®ãã§ãã¯æ©èœãå«ãŸããŠããŸãããã ããã»ãã¥ãªãã£ã¢ãã©ã€ã¶ãŒã§ã¯ãããŸãããã€ã³ãžã§ã¯ã·ã§ã³ãå®å
šã§ãªããã·ãªã¢ã©ã€ãŒãŒã·ã§ã³ãå®å
šã§ãªãå
¥ååŠçãšãã£ãè匱æ§ã«ã€ããŠãœãŒã¹ã³ãŒããæ€æ»ãããã®ã§ã¯ãããŸããã
5. åèªèãã³ã³ãã€ã©çµ±åãªã
Lighthouse CIã¯TypeScriptã³ã³ãã€ã©ãASTãšçµ±åãããŠããªããããã³ãŒãå
ã§åãã©ã®ããã«å®çŸ©ãŸãã¯äœ¿çšãããŠããããææ¡ã§ããŸãããäžé©åãªåãã£ã¹ããnullãã§ãã¯ã®æ¬ èœããžã§ããªãã¯ã®èª€çšãªã©ãæ€åºã§ããŸããã
6. éçºè
ã¯ãŒã¯ãããŒçµ±åãªã
Lighthouse CIã¯CIã§å®è¡ãããŸãããã€ã³ã©ã€ã³ãšãã£ã¿ã®ãã£ãŒãããã¯ãããŒã«ã«ã³ãŒãã€ã³ã¹ãã¯ã·ã§ã³ã¯æäŸãããŸãããä»ã®ããŒã«ã䞊è¡ããŠäœ¿çšããªãéããéçºè
ã¯IDEå
ã§èŠåãææ¡ãåãåãããšã¯ã§ããŸããã
7. éå®çãªãŠãŒã¹ã±ãŒã¹
Lighthouse CIã¯ããã³ããšã³ãã®ããã©ãŒãã³ã¹ãšå質ã®ç£æ»ã«ã¯å¹æçã§ãããããã¯ãšã³ãã®TypeScriptãããžã§ã¯ããã©ã€ãã©ãªããµãŒããŒãµã€ãã§ã¬ã³ããªã³ã°ãããã¢ããªã«ã¯é©çšã§ããŸããããã®åºåã¯ãã©ãŠã¶é
ä¿¡ã¢ããªã±ãŒã·ã§ã³ã®ã³ã³ããã¹ãã§ã®ã¿æå³ãæã¡ãŸãã
Nx
Nxã¯ãJavaScriptããã³TypeScriptãããžã§ã¯ãåãã®ã¹ããŒãã§æ¡åŒµå¯èœãªãã«ãã·ã¹ãã ããã³ã¢ãã¬ããžããªç®¡çããŒã«ã§ããå AngularããŒã ã¡ã³ããŒã«ãã£ãŠéçºãããNxã¯ãè€æ°ã®ã¢ããªã±ãŒã·ã§ã³ãå ±æã©ã€ãã©ãªãè€éãªäŸåé¢ä¿ãæã€ã³ãŒãããŒã¹ã®ç®¡çã«äœ¿çšãããŸããã³ãŒãçæãã¿ã¹ã¯ãªãŒã±ã¹ãã¬ãŒã·ã§ã³ããã£ãã·ã¥ããã¹ãããããŠãããžã§ã¯ãéã®ã¢ãŒããã¯ãã£å¢çã®é©çšã®ããã®ããŒã«ãæäŸããŸãã
å€§èŠæš¡ã¢ããªã±ãŒã·ã§ã³ããšã³ã¿ãŒãã©ã€ãºç°å¢ã§äœæ¥ããTypeScriptéçºè ã«ãšã£ãŠãNxã¯ã³ãŒãã®æŽçããã«ãããã©ãŒãã³ã¹ã®åäžãããŒã éã®äžè²«æ§ç¶æã«åœ¹ç«ã¡ãŸããç¹ã«ãAngularãReactãNestJSããŸãã¯ãã«ã¹ã¿ãã¯TypeScriptã¢ãŒããã¯ãã£ã䜿çšãããããžã§ã¯ãã§äººæ°ããããŸãã
äž»ãªæ©èœ
- å ±æã©ã€ãã©ãªãšåé¢ãããã¢ãžã¥ãŒã«ãåããã¹ã±ãŒã©ãã«ãªã¢ãã¬ãããµããŒã
- äŸåé¢ä¿ã°ã©ãã®èŠèŠåãšé©çšãæäŸããŸã
- äžè²«ããè¶³å Žã®ããã®ãžã§ãã¬ãŒã¿ãšåè·¯å³ãæäŸããŸã
- TypeScriptãAngularãReactãNode ãªã©ã®çµã¿èŸŒã¿ãµããŒã
- CI ãã€ãã©ã€ã³ãé«éåããããã®å¢åãã«ããšãã£ãã·ã¥
- äžè¬çãªãã¹ãããã³ãªã³ãã£ã³ã°ããŒã«ãšã®çµ±å
Nx ã¯ãåäžã®ã³ãŒãããŒã¹å ã§è€æ°ã®ããã³ããšã³ãããã³ããã¯ãšã³ã ã¢ããªã±ãŒã·ã§ã³ã管çããã¢ãžã¥ãŒã« ã¢ãŒããã¯ãã£ãšå¹ççãªã¯ãŒã¯ãããŒã®åŒ·åãç®æãããŒã ã«æé©ã§ãã
TypeScript éçè§£æã®å¶é
1. éçè§£æãšã³ãžã³ã§ã¯ãªã
Nxã¯ãã«ãããã³ãããžã§ã¯ããªãŒã±ã¹ãã¬ãŒã·ã§ã³ããŒã«ã§ãããã³ãŒãè§£æãšã³ãžã³ã§ã¯ãããŸããããœãŒã¹ã³ãŒãã®åå®å
šæ§ãã³ãŒãã¹ã¡ã«ãã»ãã¥ãªãã£ãªã¹ã¯ãããžãã¯ãšã©ãŒã®æ€æ»ã¯è¡ããŸããããããã®æ©èœã䜿çšããã«ã¯ãå°çšã®éçè§£æããŒã«ãšäœµçšããå¿
èŠããããŸãã
2. ãªã³ãã£ã³ã°ãšåãã§ãã¯ã«å€éšããŒã«ã«äŸåãã
Nxã¯ESLintãTypeScriptã³ã³ãã€ã©ãªã©ã®ããŒã«ãšé£æºã§ããŸãããç¬èªã®ã«ãŒã«ãåæããžãã¯ã¯æäŸããŠããŸãããNxã®åœ¹å²ã¯ããããã®ããŒã«ãå¹ççã«å®è¡ããããšã§ãããåæã®æ·±åºŠãæ¡åŒµããã匷åãããããããšã§ã¯ãããŸããã
3. ããŒã¿ãããŒãå¶åŸ¡ãããŒã®æ€æ»ããªã
Nxã¯ãã¢ããªã±ãŒã·ã§ã³å
ãã©ã€ãã©ãªéã§ã®ããŒã¿ãããŒãåæãããã®ã§ã¯ãããŸãããå
±æããžãã¯ã®èª€çšãå€ã®å®å
šã§ãªãäŒæãã©ã³ã¿ã€ã ã®ãããªãã¿ãŒã³ã«åºã¥ãã»ãã¥ãªãã£äžã®æ¬ é¥ãç¹å®ããããšã¯ã§ããŸããã
4. ã³ãŒãã¬ãã«ã®å¯èŠæ§ãéãããŠãã
Nxã¯ãããžã§ã¯ãã®äŸåé¢ä¿ãšäœ¿çšç¶æ³ã远跡ããŸãããåã
ã®é¢æ°ã倿°ãåãæ€æ»ããããšã¯ã§ããŸããããã£ãŒã«ãã¬ãã«ã®åé¡ãäžé©åãªAPIã®äœ¿çšãã¢ãžã¥ãŒã«å
ã®å¯çµåãªã©ã¯ãå€éšããŒã«ã«ãã£ãŠå
¬éãããªãéãæ€åºã§ããŸããã
5. ãããžã§ã¯ãæ§é ã«çŠç¹ãåœãŠãã«ãŒã«ã®æœè¡
Nxã¯ãã¬ã€ã€ãŒéãŸãã¯ãã¡ã€ã³éã®ã€ã³ããŒããå¶éãããªã©ãã¢ãŒããã¯ãã£äžã®å¶çŽãé©çšããŸãããã ãããããã®å¶çŽã¯ãããžã§ã¯ãã¬ãã«ãŸãã¯ã©ã€ãã©ãªã¬ãã«ã§é©çšããã现ç²åºŠã®ã³ãŒãã¬ãã«ã§ã¯é©çšãããŸããããã®ãããã¢ãžã¥ãŒã«å
ã®èª€çšãèŠéããããå¯èœæ§ããããŸãã
6. ãã€ãã£ãã®ã»ãã¥ãªãã£ãã³ã³ãã©ã€ã¢ã³ã¹ãã§ãã¯ããªã
Nxã¯äžè¬çãªè匱æ§ãæ€åºãŸãã¯é²æ¢ãããã®ã§ã¯ãããŸãããæ±ææºãæ©å¯ããŒã¿ãããŒãæªæ€èšŒã®å
¥åãã¢ãã«åããããšãã§ããŸãããèŠå¶ã®å³ããæ¥çãã»ãã¥ãªãã£ãéèŠããããããžã§ã¯ãã§ã¯ã远å ã®ããŒã«ãå¿
èŠãšãªããŸãã
7. å€§èŠæš¡ãªããŒã ã§ã¯èšå®ãšã¡ã³ããã³ã¹ãå¿
èŠ
Nxã¯åŒ·åã§ãããã¢ãŒããã¯ãã£ã«ãŒã«ããã£ãã·ã¥ããã¹ããã€ãã©ã€ã³ã®èšå®ã«ã¯èšå®ãå¿
èŠã§ããã«ã¹ã¿ã ã¯ãŒã¯ã¹ããŒã¹ã¬ã€ã¢ãŠããç¶æããããŒã éã§ããŒã«ã飿ºãããã«ã¯ãç¹ã«å€åã®æ¿ãããããžã§ã¯ãã§ã¯ãªãŒããŒããããçºçããå¯èœæ§ããããŸãã
ããã
Prettierã¯ãJavaScriptãTypeScriptããã®ä»å€ãã®èšèªããµããŒããããç¬èªã®ã¹ã¿ã€ã«ã«ãŒã«ã«åºã¥ããã³ãŒããã©ãŒããã¿ã§ããäžè²«ããã¹ã¿ã€ã«ã«ãŒã«ã«åŸã£ãŠã³ãŒããèªåçã«ãã©ãŒããããããããå¯èªæ§ãä¿å®æ§ããããŠå ±åäœæ¥ã容æã«ãªããŸããPrettierã¯æšæºåãããåºåã匷å¶ããããšã§ãã³ãŒãã¬ãã¥ãŒã«ãããã¹ã¿ã€ã«ã«é¢ããè°è«ã軜æžããããŒã éã§ã¯ãªãŒã³ã§çµ±äžãããã³ãŒãããŒã¹ãç¶æããã®ã«åœ¹ç«ã¡ãŸãã
TypeScriptãããžã§ã¯ãã§ã¯ãã€ã³ãã³ããã¹ããŒã¹ãè¡ã®æãè¿ããæ¬åŒ§ã®é 眮ã®äžè²«æ§ã確ä¿ããããã«Prettierããã䜿çšãããŸããPrettierã¯ãšãã£ã¿ãŒãã³ãããåããã¯ãç¶ç¶çã€ã³ãã°ã¬ãŒã·ã§ã³ãã€ãã©ã€ã³ãšã·ãŒã ã¬ã¹ã«çµ±åããããªã¢ã«ã¿ã€ã ãã£ãŒãããã¯ãšèªåãã©ãŒãããæ©èœãæäŸããŸãã
äž»ãªæ©èœ
- TypeScriptãJavaScriptãCSSãHTMLãJSONãªã©ãèªåçã«ãã©ãŒãããããŸã
- æå°éã®èšå®ãšåºå®ãããã¹ã¿ã€ã«ã«ãŒã«ãå¿ èŠã§ã
- VS Codeãªã©ã®IDEãšçµ±åããŠç¬æã«ãã©ãŒããã
- äºæž¬å¯èœãªå·®åãçæããããšã§ããŒãžã§ã³ç®¡çãšé£æºããŸã
- ESLintãªã©ã®ãªã³ã¿ãŒãšäºææ§ãããã調æŽããããã©ãŒããããšã«ãŒã«ã®é©çšãå¯èœ
- CLIãCI ã¹ã¯ãªãããGit ããã¯ããå®è¡ã§ããŸã
Prettier ã¯ãããã³ããšã³ãããã³ãã«ã¹ã¿ãã¯ã® TypeScript ãããžã§ã¯ãã§åºãæ¡çšãããŠãããã³ãŒãã®æçæ§ãåäžããããã©ãŒãããé¢é£ã®ç«¶åãæžããããšã§é«ãè©äŸ¡ãããŠããŸãã
TypeScript éçè§£æã®å¶é
1. ã³ãŒãã®ã»ãã³ãã£ã¯ã¹ãããžãã¯ã®çè§£ããªã
Prettierã¯ãã©ãŒããã¿ã§ãããéçã¢ãã©ã€ã¶ã§ã¯ãããŸãããã³ãŒãã®æ£ç¢ºæ§ãè«çãšã©ãŒãã»ãã¥ãªãã£äžã®æ¬ é¥ãæ€æ»ããŸãããäžé©åãªåã®äœ¿çšãè«ççãªãã°ã衚é¢çãªãã©ãŒããããè¶
ããåé¡ãæ€åºããããšã¯ã§ããŸããã
2. åã·ã¹ãã ãšã³ã³ãã€ã©ã®èŠåãç¡èŠãã
Prettierã¯TypeScriptã³ã³ãã€ã©ã䜿çšããããŸãTypeScriptã³ã³ãã€ã©ãšé£æºããŸãããåãã€ã³ã¿ãŒãã§ãŒã¹ãã³ãŒãããšã©ãŒãªãã³ã³ãã€ã«ããããã©ãããšãã£ãæ
å ±ã¯äžåæã¡ãŸãããéçºè
ã«èŠåããããšãªããç¡å¹ãªã³ãŒãããã©ãŒãããããŠããŸãå¯èœæ§ããããŸãã
3. ããžãã¹ã«ãŒã«ã®é©çšãæ€èšŒãè¡ããªã
ãªã³ã¿ãŒãéçã¢ãã©ã€ã¶ãŒãšã¯ç°ãªããPrettier ã¯ã«ã¹ã¿ã ããžãã¯ãã¢ãŒããã¯ãã£ã«ãŒã«ã匷å¶ããããã«èšå®ããããšã¯ã§ããŸãããå±éºãªãã¿ãŒã³ã鲿¢ããããåœåèŠåãé©çšãããã颿°ã API ã®èª€çšãæ€åºãããããããšãã§ããŸããã
4. èšèšã«ããå¶éãããæ§æ
Prettierã¯ãã¹ã¿ã€ã«äžã®è«äºãæžããããã«æå³çã«ã«ã¹ã¿ãã€ãºãå¶éããŠããŸããããã«ããã»ããã¢ãããç°¡çŽ åãããäžæ¹ã§ãããŒã ãããã©ã«ããè¶
ãããããªã埮åŠãªãã¥ã¢ã³ã¹ããã¡ã€ã³åºæã®æžåŒèšå®ã«ãŒã«ã匷å¶ããããšã鲿¢ããŸãã
5. ã»ãã¥ãªãã£ãããã©ãŒãã³ã¹ã®ãã§ãã¯çšã«èšèšãããŠããªã
Prettierã¯ãããã©ãŒãã³ã¹ã®ããã«ããã¯ãå®å
šã§ãªãåäœã«ã€ãªããã³ãŒããç¹å®ããããšã¯ã§ããŸãããå¶åŸ¡ãããŒãããŒã¿ãããŒãæ»æã®æœåšçãªãšã³ããªãã€ã³ããåæããããšãã§ããŸããã
6. æ
éã«çµ±åããªããšä»ã®ããŒã«ãšç«¶åããå¯èœæ§ããã
Prettierã¯ãªã³ã¿ãŒãšé£æºããŠåäœããŸãããPrettierã®ãã©ãŒãããã«ãŒã«ãšESLintãŸãã¯TSLintã®èšå®ãäžèŽããŠããªããšãæ··ä¹±ãã¡ãã»ãŒãžã®ççŸãçããå¯èœæ§ããããŸããé©åãªçµ±åã«ã¯ããã©ã°ã€ã³ã®èšå®ãšã«ãŒã«ã®èª¿æŽã«æ³šæããå¿
èŠããããŸãã
7. ã¢ããªã±ãŒã·ã§ã³ã®åäœãã¢ãŒããã¯ãã£ã®å¯èŠæ§ããªã
Prettierã¯ãã¢ãžã¥ãŒã«ããµãŒãã¹éã§ã³ãŒããã©ã®ããã«æ§é åãããŠããããææ¡ã§ããŸãããã¢ããªã±ãŒã·ã§ã³ã¬ã€ã€ãŒéã®å¢çã匷å¶ããããäŸåé¢ä¿ã®äœ¿çšç¶æ³ãæ€èšŒãããããããžã§ã¯ãå
šäœã®æ§é æ€èšŒããµããŒãããããããŸããã
ã¿ã€ãã¹ã¿ãã
TypeStatã¯ãJavaScriptããã³TypeScriptãããžã§ã¯ãã«åã¢ãããŒã·ã§ã³ãèªåçã«è¿œå ã»æŽæ°ããã³ãŒãä¿®æ£ããŒã«ã§ããäž»ãªç®çã¯ãJavaScriptã³ãŒããTypeScriptã«ç§»è¡ããããæ¢åã®TypeScriptã³ãŒãããŒã¹ã®åã«ãã¬ããžãåäžããããããããšã§ããTypeStatã¯ã倿°ã颿°ããªããžã§ã¯ãã®äœ¿ç𿹿³ãåæããããšã§ãå®éã®äœ¿çšãã¿ãŒã³ã«æ²¿ã£ãåå®çŸ©ãæšæž¬ããæ¿å ¥ããããšãã§ããŸãã
TypeStatã¯ãåã«ãã¬ããžãäœãããŸãã¯äžè²«æ§ã®ãªããããžã§ã¯ãã§ç¹ã«åœ¹ç«ã¡ãŸããããå³å¯ãªåä»ããå°å ¥ãŸãã¯åŒ·å¶ããããã«å¿ èŠãªæäœæ¥ãåæžããTypeScriptãæ®µéçã«å°å ¥ããããããå³å¯ãªã³ã³ãã€ã©èšå®ã«ç§»è¡ãããããããšã容æã«ããŸãã
äž»ãªæ©èœ
- 倿°ã颿°ããã©ã¡ãŒã¿ã«äžè¶³ããŠããåæ³šéãèªåçã«è¿œå ããŸã
- ã³ãŒãããŒã¹å šäœã®å®éã®äœ¿çšç¶æ³ã«åãããŠæ¢åã®åããªãã¡ã¯ã¿ãªã³ã°ããŸã
- JavaScript ãš TypeScript ãæ··åšãããããžã§ã¯ãã§ã®æ®µéçãªåæ¡çšããµããŒãããŸã
- æé€ããã®ã«åœ¹ç«ã¡ãŸã
anyãã®ä»ã®åŒ±ãåãæšè«åã«çœ®ãæããããšã«ãã£ãŠ - åçæã现ããå¶åŸ¡ããããã®æ§æãªãã·ã§ã³ãšçµ±å
- ç§»è¡ãã¬ã¬ã·ãŒã³ãŒãã®ã¯ãªãŒã³ã¢ããããªãã¡ã¯ã¿ãªã³ã°ã¯ãŒã¯ãããŒã«åœ¹ç«ã¡ãŸã
TypeStat ã¯ãåã®ç²ŸåºŠãé«ããåæå®ãããŠããªãã³ãŒãã«é¢é£ãããªã¹ã¯ã軜æžããããšã§ãTypeScript ã³ã³ãã€ã©ãè£å®ããç¹æ®ãªããŒã«ãšããŠæ©èœããŸãã
TypeScript éçè§£æã®å¶é
1. åŸæ¥ã®éçè§£æããŒã«ã§ã¯ãªã
TypeStatã¯åç§»è¡ããã³ãªãã¡ã¯ã¿ãªã³ã°ããŒã«ã§ãããããªããŒã¿ã§ã¯ãããŸããããã°å ±åãã³ãŒãã£ã³ã°èŠçŽã®åŒ·å¶ãã»ãã¥ãªãã£è匱æ§ã®æ€åºã¯è¡ããŸãããTypeStatã®ç®çã¯ãã³ãŒãã®åå®å
šæ§ãé«ããããã®ä¿®æ£ã§ãããæ£ç¢ºæ§ãä¿å®æ§ãæ€æ»ããããšã§ã¯ãããŸããã
2. å®è¡æãŸãã¯è«çãšã©ãŒæ€åºãªã
TypeStatã¯ãè«çãšã©ãŒã颿°ã®èª€çšãå¶åŸ¡ãããŒã®æ¬ é¥ãæ€åºã§ããŸãããåã®å®£èšãšäœ¿ç𿹿³ã®ã¿ã«çŠç¹ãåœãŠãŠãããå®éã®å®è¡ãã¹ãã·ãã¥ã¬ãŒããããåæãããããããšã¯ã§ããŸããã
3. åæ³šéãšæšè«ã«éå®
TypeStatã®æ©èœã¯ãã¹ãŠãå宣èšã®çæãšæŽæ°ã«éç¹ã眮ããŠããŸããã¢ãŒããã¯ãã£ã«ãŒã«ã®åæããã¿ãŒã³ã®é©çšãã³ãŒããã¢ããªã±ãŒã·ã§ã³æ§é å
šäœã«ã©ã®ããã«é©åãããã®è©äŸ¡ãªã©ã¯è¡ããŸããã
4. æ¢åã®ã³ã³ãã€ã©æ§æã«äŸå
ãã®ããŒã«ã¯ãæå¹ãªTypeScriptæ§æãšãæ£åžžã«è§£æå¯èœãªæ¢åã®ã³ãŒãã«äŸåããŸããæ§æã誀ã£ãŠãããããžã§ã¯ãããã«ããç ŽæããŠãããããžã§ã¯ãã¯ãã³ã³ãã€ã«ã®åé¡ã解決ããªããšäºææ§ããªãå¯èœæ§ããããŸãã
5. ãã€ãºã®å€ãã¿ã€ããé床ã«å
·äœçãªã¿ã€ããå°å
¥ããå¯èœæ§ããã
TypeStatã¯ãå Žåã«ãã£ãŠã¯é床ã«å
·äœçãŸãã¯åé·ãªåãæšè«ããããšããããŸãããã®çµæãå¯èªæ§ãäœäžããããæå³ããåäœã§ã¯ãªãçŸåšã®äœ¿çšæ³ã«éå°ã«é©åããè匱ãªåå®çŸ©ãçæããããããå¯èœæ§ããããŸãã
6. ã»ãã¥ãªãã£æèã®æ¬ åŠ
TypeStatã¯ã»ãã¥ãªãã£åé¡ã®ãã§ãã¯ãäžåè¡ããŸãããããŒã¿ãããŒã®è¿œè·¡ããµãã¿ã€ãºããžãã¯ã®æ€èšŒãæœåšçãªã€ã³ãžã§ã¯ã·ã§ã³ãã€ã³ãã®ç¹å®ã¯è¡ããŸãããã»ãã¥ã¢ã³ãŒãã£ã³ã°ã®æ€èšŒãç®çãšããŠèšèšãããŠããŸããã
7. ã¬ãã¥ãŒãšç£ç£ãå¿
èŠ
TypeStatã«ãã倿Žã¯èªååãããŠããŸãããéçºè
ã«ããã¬ãã¥ãŒãå¿
èŠã§ããèªåçæãããåã¯ãç¹ã«ç·©ãåä»ããåçæ§é ã®ã³ãŒãã§ã¯ãããžãã¹ããžãã¯ãèšèšæå³ãšå¿
ãããäžèŽããªãå ŽåããããŸãã
ã³ãŒãã¯ã©ã€ã¡ãŒã
CodeClimateã¯ããšã³ãžãã¢ãªã³ã°ããŒã ã«èªååãããã€ã³ãµã€ããæäŸãããã³ãŒãå質ãšä¿å®æ§ãåäžããããã©ãããã©ãŒã ã§ããããŒãžã§ã³ç®¡çã·ã¹ãã ãšçµ±åããã³ãŒãã®éè€ãè€éæ§ããã¹ããã©ã¯ãã£ã¹ã®éµå®ç¶æ³ãåæããŸããTypeScriptãå«ãè€æ°ã®èšèªããµããŒãããCodeClimateã¯ãçµæçãªå€æŽãç£èŠãããªãã¡ã¯ã¿ãªã³ã°ãå¿ èŠãªãããã¹ããããç¹å®ããããšã§ãã³ãŒãã®å¥å šæ§ç¶æãæ¯æŽããŸãã
TypeScriptãããžã§ã¯ãã§ã¯ãCodeClimateããã¹ãã«ãã¬ããžãè€éæ§ãã³ãŒãã¹ã¡ã«ã«é¢ããã¡ããªã¯ã¹ãæäŸããŸããå質ã²ãŒããéããŠãšã³ãžãã¢ãªã³ã°åºæºã匷åãããããã«ãªã¯ãšã¹ããã³ãŒãã¬ãã¥ãŒäžã«æè¡çè² åµãå¯èŠåãããããããã«ãã䜿çšãããŸãã
äž»ãªæ©èœ
- ã³ãŒãã®éè€ãè€éããä¿å®æ§ã®åé¡ãæ€åºããŸã
- ããŒãžåã«å質äžã®æžå¿µäºé ã匷調衚瀺ããã€ã³ã©ã€ã³ ãã« ãªã¯ãšã¹ã ãã£ãŒãããã¯ãæäŸããŸã
- ãªãŒãã³ãœãŒã¹ãšã³ãžã³ãESLintãªã©ã®çµ±åãéããŠTypeScriptããµããŒãããŸã
- ãªããžããªãšããŒã å šäœã®ããã·ã¥ããŒããšãã¬ã³ããã¥ãŒãæäŸããŸã
- GitHubãGitLabãBitbucketãäž»èŠãªCIããŒã«ãšçµ±å
- èªåãã§ãã¯ãéããŠã³ãŒãå質ããªã·ãŒã®åŒ·åãæ¯æŽ
CodeClimate ã¯ãå€§èŠæš¡ãªããŒã å šäœã§å質ã¡ããªãã¯ã远跡ããæ¡å€§ããã³ãŒãããŒã¹å šäœã§äžè²«ããæšæºãç¶æããããšã³ãžãã¢ãªã³ã°çµç¹ã§ãã䜿çšãããŸãã
TypeScript éçè§£æã®å¶é
1. ãµãŒãããŒãã£ã®ãšã³ãžã³ã«å€§ããäŸåããŠãã
CodeClimate 㯠TypeScript ã®ãµããŒãã« ESLint ãªã©ã®å€éšããŒã«ãå©çšããŠããŸããç¬èªã®ãã€ãã£ã TypeScript ãšã³ãžã³ã¯æèŒãããŠããªãããããã®ç²ŸåºŠãšæ·±åºŠã¯çµ±åããããªã³ã¿ãŒã®èšå®ãšã¡ã³ããã³ã¹ã®é©åãã«äŸåããŸãã
2. æ·±ãååæããªã
CodeClimate 㯠TypeScript ã³ã³ãã€ã©ãçŽæ¥å©çšããªããããè€éãªåé¢ä¿ãæšè«ãé«åºŠãª TypeScript ãã¿ãŒã³ãå¯èŠåã§ããŸãããå€éšãšã³ãžã³ã«ãã£ãŠã«ããŒãããªãéãã埮åŠãªåã®äžäžèŽããžã§ããªãã¯ã®èª€çšãæ€åºããããšã¯ã§ããŸããã
3. éå®çãªã«ã¹ã¿ã ã«ãŒã«ã®ãµããŒã
ããŒã ã¯åºç€ãšãªããªã³ã¿ãŒæ§æã倿Žããããšã§åæã®ããã€ãã®åŽé¢ãã«ã¹ã¿ãã€ãºã§ããŸãããCodeClimate èªäœã¯ãçµç¹åºæã®ã«ãŒã«ã TypeScript ã®é«åºŠãªéçåæããªã·ãŒãå®çŸ©ããããã®ãã¬ãŒã ã¯ãŒã¯ãæäŸããŠããŸããã
4. ã»ãã¥ãªãã£ãéèŠããŠããªã
CodeClimateã¯ã»ãã¥ãªãã£è匱æ§ã®æ€åºãç®çãšããŠèšèšãããŠããŸãããä¿¡é Œã§ããªãå
¥åã®ãã¬ãŒã¹ãå®å
šã§ãªãããŒã¿ãããŒã®ç¹å®ããªã¹ã¯ã®é«ãã³ãŒãã£ã³ã°ãã¿ãŒã³ã®æ€åºã¯è¡ããŸãããã»ãã¥ãªãã£ã«é
æ
®ããããŒã ã¯ãå°çšã®SASTããŒã«ã§è£å®ããå¿
èŠããããŸãã
5. ã¢ããªã±ãŒã·ã§ã³ããžãã¯ãžã®ãã£ãŒãããã¯ãéãããŠãã
ãã®ãã©ãããã©ãŒã ã¯ãè€éããéè€ãšãã£ãä¿å®æ§ææšã«éç¹ã眮ããŠããŸãããæ£ç¢ºæ§ãããžãã¹ããžãã¯ã«ã¯éç¹ã眮ããŠããŸããããã¡ã€ã³ã«ãŒã«ã®æ€èšŒãã¢ãŒããã¯ãã£å¢çã®ç Žæã®æ€åºããµãŒãã¹ãã¢ãžã¥ãŒã«éã®åäœã®çè§£ãšãã£ãæ©èœã¯ãããŸããã
6. å€§èŠæš¡ãªãªããžããªã§ã¯ããã©ãŒãã³ã¹ãå€åããå¯èœæ§ããã
å€§èŠæš¡ãªã¢ãã¬ããžããªãé«åºŠã«ã¢ãžã¥ãŒã«åãããTypeScriptãããžã§ã¯ãã®è§£æã¯ããšã³ãžã³ãæ
éã«èšå®ããªããšé床ãäœäžããå¯èœæ§ããããŸããäžèŠãªãã§ãã¯ãæå¹ã«ãªã£ãŠãããšããã«ãªã¯ãšã¹ãã§é·ããã£ãŒãããã¯ã«ãŒããçºçããããŒã ããããŸãã
7. å®å
šãªéçè§£æã®ä»£æ¿ã§ã¯ãªã
CodeClimateã¯ããã¬ã³ãã®ç£èŠãšåºæ¬çãªå質ã²ãŒãã®é©çšã«æé©ã§ããããŒã¿ãããŒã¢ããªã³ã°ãå¶åŸ¡ãããŒæ€èšŒã詳现ãªåæŽåæ§ãã§ãã¯ã¯å®è¡ããŸãããé«åºŠãªéçè§£æãå¿
èŠãšããããŒã ã§ã¯ãããå°éçãªããŒã«ãšäœµçšããå¿
èŠããããŸãã
ãã£ãŒãã¹ãã£ã³
DeepScanã¯ãJavaScriptããã³TypeScriptã³ãŒãã«ãããå®è¡æã®åé¡ãæ€åºããããã«èšèšãããéçè§£æããŒã«ã§ããåŸæ¥ã®ãªã³ã¿ãŒã§ã¯èŠéãããã¡ãªãããžãã¯ãå¶åŸ¡ãããŒãã³ãŒãåè³ªã®æ¬ é¥ãç¹å®ããããšã«éç¹ã眮ããŠããŸããDeepScanã¯æ§æãã¹ã¿ã€ã«ã«ãšãããããã³ãŒãã®å®éã®åäœãè©äŸ¡ãããã°ãäºæãã¬çµæã«ã€ãªããå¯èœæ§ã®ããåé¡ãæ€åºããŸãã
TypeScriptãããžã§ã¯ãã«ãããŠãDeepScanã¯åãã§ãã¯ã匷åã«è£å®ããŸããã³ãŒãã®æå³ãæ€æ»ããå°éäžå¯èœãªã³ãŒããã¹ãäžé©åãªæ¡ä»¶æãæœåšçãªnullåç §ããã®ä»ã®è«çãšã©ãŒã«é¢é£ããåé¡ããã€ã©ã€ã衚瀺ããŸããã«ã¹ã¿ã ã«ãŒã«ã®éçºãå¿ èŠãšããã«ã¢ããªã±ãŒã·ã§ã³ã®å®å®æ§ãšä¿å®æ§ãåäžããããéçºããŒã ã«å€ãå©çšãããŠããŸãã
äž»ãªæ©èœ
- è«çãšã©ãŒãæªäœ¿çšã®ã³ãŒããã¹ãæ¬ é¥ã®ããç¶æ ãæ€åºããŸã
- 衚é¢ã¬ãã«ãè¶ ããå¶åŸ¡ãããŒãšå€ã®äŒæãåæãã
- null åäœããªãã·ã§ãã« ãã§ãŒã³ãå³å¯ãª null ãã§ãã¯ãªã©ã®ææ°ã® TypeScript æ©èœããµããŒãããŸãã
- éçºè ãã¬ã€ãããããã®è©³çްãªåé¡ã®èª¬æãšé倧床ã¬ãã«ãæäŸããŸã
- Visual Studio CodeãGitHubãBitbucketããã®ä»ã®ãã©ãããã©ãŒã ãšçµ±å
- ãã©ãŠã¶ãŸãã¯CIã§å¹ççã«å®è¡ããè¿ éãªãã£ãŒãããã¯ãæäŸããŸã
DeepScan ã¯ãã³ãŒãã®æ£ç¢ºæ§ãšå®è¡æã®å®å šæ§ãéèŠãããããã³ããšã³ãããã³ãã«ã¹ã¿ãã¯ã® TypeScript ã¢ããªã±ãŒã·ã§ã³ã«ç¹ã«å¹æçã§ãã
TypeScript éçè§£æã®å¶é
1. å®å
šãªåãã§ãã«ãŒã§ã¯ãªã
DeepScanã¯TypeScriptãšé£æºããŠåäœããŸãããTypeScriptã³ã³ãã€ã©ã®ããã«å®å
šãªåã·ã¹ãã ã®é©çšã¯è¡ããŸãããåã®äºææ§ãæšè«ãé«åºŠãªãžã§ããªãã¯ã®æ€èšŒããããã³ãŒãã®åäœã«éç¹ã眮ããŠããŸãã
2. éå®çãªã«ã¹ã¿ã ã«ãŒã«ã®ãµããŒã
DeepScanã¯ãç°¡åã«æ¡åŒµã§ããªãåºå®ã®çµã¿èŸŒã¿ã«ãŒã«ã»ãããæäŸããŸãããããžã§ã¯ãåºæã®ããžãã¯ãã¿ãŒã³ãã¢ãŒããã¯ãã£å¶çŽã®é©çšãå¿
èŠãªçµç¹ã«ãšã£ãŠããã®ã«ã¹ã¿ãã€ãºæ§ã®æ¬ åŠã¯æ¬ ç¹ãšãªãå¯èœæ§ããããŸãã
3. ã»ãã¥ãªãã£éèŠã®åæããªã
ãã®ããŒã«ã¯ãã€ã³ãžã§ã¯ã·ã§ã³ãªã¹ã¯ãå®å
šã§ãªããã·ãªã¢ã©ã€ãŒãŒã·ã§ã³ãäžé©åãªå
¥åæ€èšŒãšãã£ãã»ãã¥ãªãã£è匱æ§ãæ€åºããŸããããŸããæ±æãããŒãç¹å®ããããå®å
šãªéçºã©ã€ããµã€ã¯ã«èŠä»¶ãæºããããããããã«ã¯èšèšãããŠããŸããã
4. è€éãªãµãŒããŒãµã€ãã®ã³ã³ããã¹ãã§ã¯å¹æãäœã
DeepScanã¯ãUIããžãã¯ãšè»œéã¢ããªã±ãŒã·ã§ã³ã³ãŒãã®è§£æã«åªããŠããŸããè€éãªã¢ãŒããã¯ãã£ãšãµãŒãã¹éããžãã¯ãåããå€§èŠæš¡ãªããã¯ãšã³ãTypeScriptãããžã§ã¯ãã§ã¯ããã詳现ãªã¢ãã©ã€ã¶ãŒãã«ãŒã«ããªãã³ãã¬ãŒã ã¯ãŒã¯ãšæ¯èŒããŠããã®å¹æã¯éå®çã§ãã
5. éããããšã³ã·ã¹ãã ãšãµãŒãããŒãã£ã®çµ±å
ãšã³ã¿ãŒãã©ã€ãºã°ã¬ãŒãã®ããŒã«ãšæ¯èŒãããšãDeepScanã¯ãã©ã°ã€ã³ãšã³ã·ã¹ãã ãå°ãããçµ±åãã€ã³ããå°ãªãã§ããGitHubãVS Codeãšãã£ãäž»èŠãã©ãããã©ãŒã ããµããŒãããŠããäžæ¹ã§ãå€§èŠæš¡ãªCI/CDã·ã¹ãã ãããã·ã¥ããŒããžã®å¯Ÿå¿ç¯å²ã¯éå®çã§ãã
6. åºç¯ãªã¢ãŒããã¯ãã£ã®åŒ·å¶ã¯ãªã
DeepScanã¯é¢æ°ã¬ãã«ããã³ãããã¯ã¬ãã«ã®åé¡ãåæããŸãããã¢ãŒããã¯ãã£ååã匷å¶ãããã®ã§ã¯ãããŸãããåé¡ãè«ççãªæ¬ é¥ãšããŠçŸããªãéããã¢ãžã¥ãŒã«ã®éå±€åããã¡ã€ã³åé¢ããããžã§ã¯ãå
šäœã®ã³ãŒã䜿çšã«ãŒã«ãä¿èšŒããããšã¯ã§ããŸããã
7. ã¬ããŒãæ©èœãšããŒã ç®¡çæ©èœã¯åºæ¬ç
DeepScanã¯ããã·ã¥ããŒããšææšãæäŸããŠããŸãããSonarQubeãCodeClimateãªã©ã®ãã©ãããã©ãŒã ãšæ¯èŒãããšãããŒã ã¬ãã«ã®ã¬ããŒãæ©èœã¯éãããŠããŸãã詳现ãªå±¥æŽè¿œè·¡ãããŒã å
šäœã«ãããããªã·ãŒé©çšãæ±ããçµç¹ã«ãšã£ãŠã¯ããããå¶çŽãšãªãå¯èœæ§ããããŸãã
ãããã©ãã¯
Deptracã¯ãã³ãŒãããŒã¹å ã®ã¢ãŒããã¯ãã£å¢çã匷åããããã«èšèšãããéçè§£æããŒã«ã§ããå ã ã¯PHPåãã«éçºãããDeptracã¯ãã«ã¹ã¿ã å®è£ ãã³ãã¥ããã£ãã©ãŒã¯ãéããŠãTypeScriptãå«ãä»ã®ãšã³ã·ã¹ãã ã«ãåæ§ã®ã¢ãããŒããä¿ããŠããŸããããã®äž»ãªç®çã¯ãéçºè ãã¢ããªã±ãŒã·ã§ã³å ã®å®çŸ©ãããã¬ã€ã€ãŒãã¢ãžã¥ãŒã«éã®èš±å®¹ãããäŸåé¢ä¿ãèŠèŠåãã匷åã§ããããã«ããããšã§ãã
TypeScriptç°å¢ã§ã¯ãDeptracã¹ã¿ã€ã«ã®ããŒã«ãèšå®ããããšã§ãäŸãã°UIã³ã³ããŒãã³ããããŒã¿ã¢ã¯ã»ã¹å±€ããçŽæ¥ã€ã³ããŒããããªãããã«ããããã³ã¢ãã¡ã€ã³ããžãã¯ãå€éšãã¬ãŒã ã¯ãŒã¯ããç¬ç«ããŠããããšãä¿èšŒãããã§ããŸããããã«ãããä¿å®æ§ãç¶æããã¯ãªãŒã³ãªã¢ãŒããã¯ãã£ãå®çŸããæå³ããªãçµåãåé¿ã§ããŸãã
äž»ãªæ©èœ
- äŸåé¢ä¿ã°ã©ãã䜿çšããŠå®çŸ©ãããã¢ãŒããã¯ãã£å¢çã匷å¶ãã
- ã¬ã€ã€ãŒããã¡ã€ã³ãããã±ãŒãžéã®äžæ£ãªã€ã³ããŒãã鲿¢ããŸã
- ã¢ãžã¥ãŒã«é¢ä¿ã®ã¬ããŒããšèŠèŠåãçæããŸã
- ããŒã ãã¯ãªãŒã³ãªã¢ãŒããã¯ãã£ååãé·æã«ããã£ãŠç¶æã§ããããã«æ¯æŽããŸã
- CI/CD ãã€ãã©ã€ã³ã«çµ±åããŠããã« ãªã¯ãšã¹ãäžã®éåããããã¯ã§ããŸãã
- è€éãªãããžã§ã¯ãã¬ã€ã¢ãŠãã®ã«ã¹ã¿ã ã«ãŒã«ãšæ§æããµããŒã
Deptrac ã¯ãã¢ãŒããã¯ãã£ã®äŸµé£ãæžå¿µãããæç€ºçãªå¢çãé©çšããå¿ èŠãããå€§èŠæš¡ãª TypeScript ã¢ãã¬ããŸãã¯ã¢ãžã¥ãŒã«åã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«åœ¹ç«ã¡ãŸãã
TypeScript éçè§£æã®å¶é
1. TypeScriptã®ãã€ãã£ããµããŒããéãããŠãã
Deptracèªäœã¯PHPåãã«èšèšãããŠããŸããåãæŠå¿µãTypeScriptã«é©çšããã«ã¯ããµãŒãããŒãã£è£œã®ä»£æ¿ããŒã«ãã«ã¹ã¿ã ããŒã«ãå¿
èŠã§ããdependency-cruiserãªã©ã®ããŒã«ã§åæ§ã®åäœãå®çŸããããšãå¯èœã§ãããçµ±äžãããæšæºããªãããã远å ã®èšå®äœæ¥ãå¿
èŠã«ãªãå ŽåããããŸãã
2. æ±çšçãªéçè§£æããŒã«ã§ã¯ãªã
Deptracã¯ãããžãã¯ã®ãã°ãåãšã©ãŒãã»ãã¥ãªãã£äžã®åé¡ãæ€åºããŸãããæ€åºç¯å²ã¯äŸåé¢ä¿æ§é ã«éå®ãããŠããã誀ã£ãæ¡ä»¶ãå®å
šã§ãªãããŒã¿åŠçãããžãã¹ããžãã¯ã®æ¬ é¥ãç¹å®ããããšã¯ã§ããŸããã
3. åãèæ
®ããæ€æ»ããªã
Deptracã¹ã¿ã€ã«ã®ããŒã«ã¯TypeScriptã®åã·ã¹ãã ãšçµ±åãããŸãããã¢ãžã¥ãŒã«ã¬ãã«ã®ã€ã³ããŒããæ€æ»ããŸãããäŸåé¢ä¿ã®èåŸã«ããåãã»ãã³ãã£ã¯ã¹ã¯æ€æ»ããŸãããã¬ã€ã€ãŒã¯ãå®å
šã§ãªãåãå¯çµåãªåãæž¡ãå Žåã§ããäŸåé¢ä¿ã°ã©ããå°éããå ŽåããããŸãã
4. å®è¡æãŸãã¯ããŒã¿ãããŒåæãªã
Deptracã¯å®£èšãããã¢ãžã¥ãŒã«äŸåé¢ä¿ã®ã¿ã«åºã¥ããŠåäœããŸããã¢ããªã±ãŒã·ã§ã³å
ã§ã®ããŒã¿ã®ç§»åããå®è¡æã®åçãªåäœãæå³ãããã¢ãŒããã¯ãã£ã«ãŒã«ã«éåããŠãããã©ããã¯è¿œè·¡ããŸããã
5. æ
éãªèšå®ãå¿
èŠ
TypeScriptãããžã§ã¯ãã§Deptracã®ãããªããŒã«ãèšå®ããã«ã¯ãã¬ã€ã€ãŒããã¹ãäŸå€ãæåã§å®çŸ©ããå¿
èŠããããŸããè€éãªã¢ãŒããã¯ãã£ãé²åããã¢ãŒããã¯ãã£ã§ã¯ã誀æ€ç¥ãé©çšæŒããåé¿ããããã«ç¶ç¶çãªèª¿æŽãå¿
èŠã«ãªãå ŽåããããŸãã
6. IDEãšéçºè
ããã®ãã£ãŒãããã¯ã¯æå°é
ãããã®ããŒã«ã¯éåžžCIç°å¢ã§äœ¿çšããããšãã£ã¿ãŒå
ã§ã€ã³ã©ã€ã³ã³ãŒããã£ãŒãããã¯ãæäŸããŸãããéçºè
ã¯ã³ãŒããããã·ã¥ãŸãã¯ããŒãžãããåŸã«åããŠéåã«æ°ä»ããããä¿®æ£ãé
ããå¯èœæ§ããããŸãã
7. æ§é çãªåé¡ã®ã¿ã«çŠç¹ãåœãŠã
Deptracã¯ãã³ãŒãã®å質ãéè€ãããã©ãŒãã³ã¹ãã»ãã¥ãªãã£ãè©äŸ¡ãããã®ã§ã¯ãããŸãããTypeScriptã³ãŒãããŒã¹å
šäœã«ãããå
æ¬çãªã³ãŒãã¢ã·ã¥ã¢ã©ã³ã¹ãæäŸããã«ã¯ã远å ã®éçè§£æããŒã«ãšçµã¿åãããå¿
èŠããããŸãã
WebStorm çµã¿èŸŒã¿ TypeScript åæ
JetBrainsãéçºããWebStormã¯ãè±å¯ãªæ©èœãåããçµ±åéçºç°å¢ïŒIDEïŒã§ãããã«äœ¿ããå æ¬çãªTypeScriptãµããŒããæäŸããŸããçµã¿èŸŒã¿ã®TypeScriptè§£ææ©èœã«ã¯ãåãã§ãã¯ãã³ãŒãããã²ãŒã·ã§ã³ããªãã¡ã¯ã¿ãªã³ã°ããŒã«ããããŠTypeScriptèšèªãµãŒãã¹ããã®ãªã¢ã«ã¿ã€ã ãã£ãŒãããã¯ã«åºã¥ãã€ã³ããªãžã§ã³ããªææ¡æ©èœãå«ãŸããŸãã
ãã®ãã€ãã£ãçµ±åã«ãããWebStormã¯TypeScriptéçºã«ãããŠæãéçºè ãã¬ã³ããªãŒãªç°å¢ã®äžã€ãšãªã£ãŠããŸããå ¥åæã«ãšã©ãŒãæ€åºããã¯ã€ãã¯ãã£ãã¯ã¹ãªãã·ã§ã³ãæäŸãããããžã§ã¯ãå šäœã®åå®çŸ©ãšã¢ãžã¥ãŒã«æ§é ãåžžã«ææ¡ããããšã§ãã³ãŒãå質ãåäžãããŸãã
äž»ãªæ©èœ
- å ¬åŒTypeScriptèšèªãµãŒãã¹ã䜿çšãããªã¢ã«ã¿ã€ã åãã§ãã¯
- ã€ã³ããªãžã§ã³ããªã³ãŒãè£å®ãææ¡ããšã©ãŒã®åŒ·èª¿è¡šç€º
- åå倿Žãæœåºãã€ã³ã©ã€ã³åã®ããã®å®å šãªãªãã¡ã¯ã¿ãªã³ã°ããŒã«
- å€§èŠæš¡ãª TypeScript ãããžã§ã¯ãå šäœã§ã®ãã¡ã€ã«éã®ããã²ãŒã·ã§ã³ãšäœ¿çšç¶æ³ã®è¿œè·¡
- çµ±åããããªã³ãã£ã³ã°ããã©ãŒãããããã¹ãã®ãµããŒã
- ã¹ã¿ã€ã«ããã«å¯èœæ§ãæªè§£æ±ºã®åç §ã«é¢ããèšå®å¯èœãªæ€æ»
WebStorm ã¯ãæœåšçãªãšã©ãŒãå³åº§ã«ææ¡ãããšãã£ã¿ãŒ ã¬ãã«ã®ãã¹ã ãã©ã¯ãã£ã¹ãé©çšããéçºè ã®çç£æ§ãåäžãããããšã§ãéçºè ãããå®å šãª TypeScript ã³ãŒããäœæã§ããããã«æ¯æŽããŸãã
TypeScript éçè§£æã®å¶é
1. ã»ãã¥ãªãã£ãããžãã¯ã®ãã°æ€åºçšã«èšèšãããŠããªã
WebStormã¯åãšã©ãŒã誀çšããã©ã°ä»ãããŸãããæ±æè¿œè·¡ãå®å
šã§ãªãããŒã¿ãããŒã®æ€åºãããžãã¹ããžãã¯ã®æ€èšŒãšãã£ããã詳现ãªéçè§£æã¯å®è¡ããŸãããã€ã³ãžã§ã¯ã·ã§ã³ã®æ¬ é¥ãæªæ€èšŒã®å
¥åãšãã£ãè匱æ§ãç¹å®ããããšã¯ã§ããŸããã
2. ã¢ãŒããã¯ãã£ã«ãŒã«ã®åŒ·å¶ãªã
WebStormã«ã¯ãã¢ãŒããã¯ãã£ã®ã¬ã€ã€ãªã³ã°ãã€ã³ããŒãå¢çã匷å¶ããããã®ãã€ãã£ãããŒã«ãå«ãŸããŠããŸãããäŸåé¢ä¿ãã§ãã«ãŒãªã©ã®å€éšããŒã«ãèšå®ããªãéããéçºè
ã¯èŠåãªãã«å¯çµåãã¬ã€ã€ãŒéã®äŸåé¢ä¿ã誀ã£ãŠå°å
¥ããŠããŸãå¯èœæ§ããããŸãã
3. ã«ã¹ã¿ã ã«ãŒã«ã®æ©èœãå¶éãããŠãã
WebStorm ã¯ã€ã³ã¹ãã¯ã·ã§ã³ã埮調æŽããããšã¯å¯èœã§ãããé«åºŠãªã«ã¹ã¿ã éçè§£æã«ãŒã«ã®äœæããµããŒãããŠããŸãããããŒã ã¯ãã¡ã€ã³åºæã®ãã§ãã¯ããšã³ã³ãŒãããããåºæ¬ç㪠IDE ã¬ãã«ã®æ€èšŒãè¶
ããã¢ããªã±ãŒã·ã§ã³åºæã®å¶çŽãé©çšãããããããšã¯ã§ããŸããã
4. åæç¯å²ã¯ããŒã«ã«ãšãã£ã¿ã«éå®ããã
IDEã¯ç·šéäžã«åã
ã®éçºè
ã«ãã£ãŒãããã¯ãæäŸããŸãããç¶ç¶çãªéçè§£æãã©ãããã©ãŒã ãšããŠã¯æ©èœããŸãããããŒã éã§ã®çºèŠäºé
ã®éçŽæ©èœããã³ãŒãã¬ãã¥ãŒãCIäžã®é©çšæ©èœã¯çµã¿èŸŒãŸããŠããŸããã
5. é«åºŠãªããŒã¿ãããŒã¢ããªã³ã°ãäžè¶³ããŠãã
WebStormã¯nullå¯èœæ§ã®åé¡ãåã®äžäžèŽãææããŸãããæ¡ä»¶æãã¢ãžã¥ãŒã«éã§ã®å€ã®ç§»åã远跡ããããšã¯ã§ããŸããããŸããç¶æ
ã®äŒæã鿥çãªé¢æ°åŒã³åºãããçãããããè€éãªè«çãšã©ãŒãæ€åºããããšã¯ã§ããŸããã
6. äžè²«ãããããžã§ã¯ãæ§æãå¿
èŠ
WebStormã¯ãæ£ç¢ºãªTypeScriptèšå®ãã¡ã€ã«ãšã¢ãžã¥ãŒã«è§£æ±ºã«äŸåããŠããŸããæšæºä»¥å€ã®èšå®ããã¹ã®èšå®ãã¹ã®ãããããžã§ã¯ãã§ã¯ã誀æ€ç¥ããšã©ãŒã®èŠéããçºçãã远å ã®èšå®æéãå¿
èŠã«ãªãå ŽåããããŸãã
7. WebStormã䜿çšããããŒã ã«ã®ã¿æå¹
è§£æã¯IDEã«çŽä»ããããŠãããããWebStormãæšæºã§äœ¿çšããŠããããŒã ã«éå®ããŠã¡ãªãããæäŸãããŸããVS Codeãä»ã®ãšãã£ã¿ãŒãæ··åšããç°å¢ã§ã¯ãã«ãã¬ããžãé©çšã«äžè²«æ§ããªããªãå¯èœæ§ããããŸãã
TypeScript ã«é©ããéçè§£ææŠç¥ã®éžæ
TypeScriptã®æ¡çšãçŸä»£ã®Webéçºããšã³ã¿ãŒãã©ã€ãºéçºã«ãããŠæ¡å€§ããã«ã€ããããæ·±ããããæèã«åºã¥ããéçè§£æãžã®éèŠã¯ãã€ãŠãªãã»ã©é«ãŸã£ãŠããŸãããã®æŠèŠã§ç޹ä»ããããŒã«ã¯ããããããšã³ã·ã¹ãã ã«ãããŠç¬èªã®åœ¹å²ãæãããŠããŸããESLintã®ãããªã³ãŒãã¹ã¿ã€ã«ãšæ£ç¢ºæ§ã匷åãããªã³ã¿ãŒãããSnyk Codeã®ãããªã»ãã¥ãªãã£ã¹ãã£ããŒãã¢ãŒããã¯ãã£åŒ·åããŒã«ãã€ã³ããªãžã§ã³ããªIDEçµ±åãŸã§ãéçºè ã¯å質ãšå®å šæ§ããµããŒãããå¹ åºããŠãŒãã£ãªãã£ãå©çšã§ããŸãã
ãããããããã®ããŒã«ã¯ãµã€ãåãããç¶æ ã§åäœããããšãå€ãããªã³ã¿ãŒã¯è¡šé¢çãªåé¡ãææããã³ã³ãã€ã©ã¯åå¥çŽã匷å¶ãããå®è¡æã®ãããªããžãã¯ã®æ¬ é¥ãç¹å®ããããŒã«ãããã°ãæ§é çãªå¢çã匷å¶ããããŒã«ããããããããåèªèããã¡ã€ã³ããžãã¯ã®æ€èšŒãã¢ãŒããã¯ãã£ã«ãŒã«ã®åŒ·å¶ããããŠéçºè ãžã®ãªã¢ã«ã¿ã€ã ãã£ãŒãããã¯ãçµã¿åãããçµ±äžçãªãã¥ãŒãæäŸãããœãªã¥ãŒã·ã§ã³ã¯ãããããã ã
SMART TS XL TypeScriptã®éçè§£æã«å æ¬çãã€éå±€åãããã¢ãããŒããæäŸããããšã§ããã®ã®ã£ãããåããŸããã³ãŒããæå³çã«æ·±ãè§£éããè€éãªåã·ã¹ãã ãçè§£ããéå±€ããŸããã§å¶åŸ¡ãããŒããã¬ãŒã¹ãããããžã§ã¯ãåºæã®èšèšå¶çŽãšåå©çšå¯èœãªãã¹ããã©ã¯ãã£ã¹ã®äž¡æ¹ãé©çšããŸããéèŠãªTypeScriptã¢ããªã±ãŒã·ã§ã³ãä¿å®ããããŒã ã«ãšã£ãŠãéçºã¯ãŒã¯ã¹ããŒã·ã§ã³ããæ¬çªç°å¢ãã€ãã©ã€ã³ãŸã§ãæ¯é¡ã®ãªãã«ãã¬ããžãæäŸããŸãã
é©åãªéçè§£ææŠç¥ã®éžæã¯ãããŒã ã®ç®æšããããžã§ã¯ãã®è€éããæ¥çã®èŠä»¶ã«ãã£ãŠç°ãªããŸããã¿ãŒã²ãããçµã£ãããŒã«ãšå æ¬çãªãã©ãããã©ãŒã ãçµã¿åãããããšã§ã SMART TS XLããŒã ã¯ãäºåŸçãªã³ãŒã ã¯ãªãŒã³ã¢ããããããã¢ã¯ãã£ããªã¢ãŒããã¯ã㣠ã¬ããã³ã¹ã«ç§»è¡ããã³ãŒãããŒã¹ãå°æ¥ã«ããã£ãŠå®å šã§ãä¿å®å¯èœãã€ã¹ã±ãŒã©ãã«ãªç¶æ ãç¶æã§ããããã«ããããšãã§ããŸãã