Web ãµã€ãéçºã®ã³ã³ããã¹ãã§ã¯ãBabel ã¯éåžžã«äººæ°ãããåºãæ¡çšãããŠãã JavaScript ã³ã³ãã€ã©ãŒã§ãããéçºè ã¯äžäœäºææ§ãšå€ã Web ãã©ãŠã¶ãŒã®ãµããŒãã確ä¿ããªãããJavaScript èšèª (ECMAScript) ã®ææ°æ©èœã䜿çšã§ããŸãã Babel ã¯ãéçºè ãã¯ãªãŒã³ã§å¹ççã§å°æ¥æ§ã®ããã³ãŒããäœæã§ããããã«ãããããææ°ã® Web éçºã«äžå¯æ¬ ãªããŒã«ã§ãããã®ã³ãŒãã¯ãå€ããã©ãŠã¶ãšäºææ§ããããããåºããµããŒããããŠããããŒãžã§ã³ã® JavaScript ã«ãã©ã³ã¹ãã€ã«ãããŸãããã®ããã»ã¹ã¯ã䜿çšããŠãããã©ãŠã¶ãŒããã©ãããã©ãŒã ã«é¢ä¿ãªããå¯èœãªéãå¹ åºããŠãŒã¶ãŒã«å¯Ÿå¿ãããé«éã§ã¹ã±ãŒã©ãã«ã§ä¿¡é Œæ§ã®é«ã Web ã¢ããªã±ãŒã·ã§ã³ã®éçºã«è²¢ç®ããŸãã
æè¿ã®çµ±èšã«ãããšãBabel ã¯äžçäžã® JavaScript éçºè ã® 60% 以äžã«å©çšãããŠãããçŸä»£ã® Web éçºãšã³ã·ã¹ãã ã«ãããŠé¡èãªååšæãèªã£ãŠããŸãã Babel ã®ãã¯ãŒã掻çšããããšã§ã AppMasterno-codeãã©ãããã©ãŒã ã®éçºè ã¯ãECMAScript ã®ãã¹ã ãã©ã¯ãã£ã¹ãšææ°ã®æšæºã«æºæ ããããã©ãŒãã³ã¹ã®é«ã Web ã¢ããªã±ãŒã·ã§ã³ãäžè²«ããŠçæã§ãããšåæã«ãæ°æ§ã®åºç¯ãª Web ãã©ãŠã¶ãšã®çžäºéçšæ§ã確ä¿ã§ããŸãããã®åºç¯ãªæ¡çšãšå€çšéæ§ã«ãããBabel ã¯æå 端㮠Web éçºããŒã«ãããã®éèŠãªã³ã³ããŒãã³ãã«ãªã£ãŠããŸãã
Babel 㯠Web éçºãã€ãã©ã€ã³ã®äžæ žéšåãšããŠåäœããWebpackãGulpãGrunt ãªã©ã®ä»ã®ããŸããŸãªããŒã«ãšã®ã·ãŒã ã¬ã¹ãªçµ±åãå®çŸããWeb éçºããã»ã¹ãå€§å¹ ã«åçåãã倿°ã®ãã©ã°ã€ã³ãããªã»ããã®ãµããŒããæäŸããŸãããã®çžäºéçšæ§ã«ãããéçºè ã¯ãåã ã®ããŒãºã奜ã¿ã«åãããã«ã¹ã¿ã éçºã¯ãŒã¯ãããŒãæ§ç¯ããããšã䟿å©ãã€ç°¡åã«ãªããŸãã
Babel ã Web éçºç°å¢ã®éçºè ã«æäŸãã倧ããªå©ç¹ã® 1 ã€ã¯ãJavaScript å ã« XML ã®ãããªã³ãŒããåã蟌ãããšãå¯èœã«ããäžè¬çãªæ§ææ¡åŒµæ©èœã§ãã JSX ãåºç¯ã«ãµããŒãããŠããããšã§ãããã®ããŒã¯ã¢ãããšã³ãŒãã®çµåã«ããã衚çŸåãé«ãä¿å®ããããæ§æãåŸãããè€éãªãŠãŒã¶ãŒ ã€ã³ã¿ãŒãã§ã€ã¹ã察話åã³ã³ããŒãã³ãã®éçºãå€§å¹ ã«ç°¡çŽ åãããŸããããã«ãBabel ã®ä¿¡é Œã§ãã JSX ãµããŒãã«ãããReact ã Vue ãªã©ã®ããŸããŸãªäžè¬ç㪠UI ã©ã€ãã©ãªãšã®ã·ãŒã ã¬ã¹ãªçµ±åãå¯èœã«ãªãã AppMasterã®æ©èœã匷åãããæŽç·Žãããæ©èœè±å¯ãª Web ã¢ããªã±ãŒã·ã§ã³ã®éçºç¯å²ãæ¡åŒµãããŸãã
AppMasterã§ã¯ãBabel ã®æ¡çšããVue3 ãã¬ãŒã ã¯ãŒã¯ãš JavaScript/TypeScript ã䜿çšã㊠Web ã¢ããªã±ãŒã·ã§ã³ãçæããéã«éèŠãªåœ¹å²ãæãããŠããŸãã Babel ã¯ããã³ãã«ãšã³ãŒãåå²ã®ããã® Webpackãã³ãŒãã®å質ãšãã¹ã ãã©ã¯ãã£ã¹ã®é å®ã®ããã® ESLint ãªã©ã®ä»ã®ããŒã«ãšé£æºããŠãææ°ã® Web ã¢ããªã±ãŒã·ã§ã³ã®èŠæ±ãããã«æºããå¹ççã§ä¿å®å¯èœã§ã¹ã±ãŒã©ãã«ãªã³ãŒãããŒã¹ãéçºè ã«æäŸããŸãã Babel ã¯ãæå 端㮠JavaScript æ©èœãšãã©ãŠã¶ãŒã®ãµããŒãã®çŸå®ãšã®éã®ã®ã£ãããåããããšã«ãããããŸããŸãªãã©ãããã©ãŒã ãããã€ã¹ã«ããã£ãŠæé©ã§äžè²«ãããŠãŒã¶ãŒ ãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããŸãã
ããã«ãBabel ãšã³ã·ã¹ãã ã¯ç¶ç¶çã«æé·ããŠãããWeb éçºã®éçãåžžã«æŒãäžããè²¢ç®è ãšã¡ã³ãããŒã®æŽ»çºãªã³ãã¥ããã£ããããŸãããã®æŽ»çºãªã³ãã¥ããã£ã«ãããBabel ã¯é²åãç¶ããJavaScript ãš Web ãã¯ãããžãŒã®çµ¶ãéãªãå€åããç¶æ³ã«è¿œãã€ãããšãã§ããŸãããã®ãããBabel ã¯ããããã Web éçºã¹ã¿ãã¯ã«ãšã£ãŠãä¿¡é Œæ§ãé«ãå°æ¥æ§ã®ããéžæè¢ãšãªããŸãã
ããšãã°ãasync/awaitããžã§ãã¬ãŒã¿ãŒããããããã³ã»ãã ããŒã¿æ§é ãªã©ã®ææ°ã® ECMAScript æ©èœãå©çšãã Web ã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŸãããã Babel ã䜿çšãããšãéçºè ã¯ãããã®æ©èœãå©çšããŠãããåºç¯ãªäºææ§ã®ãã JavaScript ããŒãžã§ã³ã«èªåçã«ãã©ã³ã¹ãã€ã«ããããç°¡æœã§èªã¿ããããããã©ãŒãã³ã¹ã®é«ãã³ãŒããäœæã§ããŸããããã«ãããå€ããã©ãŠã¶ã«å¯Ÿå¿ããããã«ã³ãŒããæåã§ãªãã¡ã¯ã¿ãªã³ã°ããå¿ èŠããªããªããéçºæéãšåŽåãå€§å¹ ã«åæžããªãããæé©ãªããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒæºè¶³åºŠãå®çŸã§ããŸãã
çµè«ãšããŠãBabel ã¯çŸä»£ã® Web éçºã®éèŠãªã³ã³ããŒãã³ããšããŠæ©èœãã AppMasterããã®ä»ã®äž»èŠãªãã©ãããã©ãŒã ããäžçäžã®ãŠãŒã¶ãŒã«å¯Ÿå¿ããé«å質ã§ããã©ãŒãã³ã¹ãé«ããã¹ã±ãŒã©ãã«ãª Web ã¢ããªã±ãŒã·ã§ã³ãæäŸã§ããããã«ããŸãã Babel ã Web éçºã¹ã¿ãã¯ã«çµ±åããããšã§ãéçºè 㯠ECMAScript ã®ææ°æ©èœã䜿çšããŠãå¹ççã§ä¿å®å¯èœã§å°æ¥æ§ã®ããã³ãŒããäœæã§ãããšåæã«ãããŸããŸãªãã©ãŠã¶ãŒããã©ãããã©ãŒã ã«ããã£ãŠã·ãŒã ã¬ã¹ã§äžè²«ãããŠãŒã¶ãŒ ãšã¯ã¹ããªãšã³ã¹ã確ä¿ã§ããŸãã Babel ã®ãããã§ãWeb éçºã®æªæ¥ã¯å®ã«æãããå¯èœæ§ã«æºã¡ãŠããŸãã