ããã³ããšã³ãéçºã®ã³ã³ããã¹ãã«ãããããã³ããšã³ã ã©ã€ãã©ãªã¯ãã€ã³ã¿ã©ã¯ãã£ãã§èŠèŠçã«é åç㪠Web ã¢ããªã±ãŒã·ã§ã³ãã¢ãã€ã« ã¢ããªã±ãŒã·ã§ã³ã®èšèšãéçºã匷åã容æã«ããå¹ åºãæ©èœãå«ããäºåã«äœæãããåå©çšå¯èœãªã³ãŒã ãªããžããªã§ãããããã®ã©ã€ãã©ãªã¯ UI ã©ã€ãã©ãªãŸãã¯ãã¬ãŒã ã¯ãŒã¯ãšãåŒã°ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®åºç€ãæäŸããã³ãŒãããŒã¹ãåçåããå¹ççã§äžè²«ããã³ãŒãã£ã³ã°ã®å®è·µãä¿é²ããããšã«ãããããã³ããšã³ãéçºè ã®ä»äºãå€§å¹ ã«ç°¡çŽ åããŸããããã³ããšã³ã ã©ã€ãã©ãªãå©çšãããšããŒãããã³ãŒããèšè¿°ããç¹°ãè¿ãã®äœæ¥ãå€§å¹ ã«è»œæžãããéçºãµã€ã¯ã«ãççž®ãããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åãããŸãã
ããã³ããšã³ã ã©ã€ãã©ãªã¯äž»ã« JavaScriptãCSSãHTML ã§æžãããŠãããææ°ã® Web ã¢ããªã±ãŒã·ã§ã³ãäœæããããã®äž»èŠãªæ§æèŠçŽ ãšããŠæ©èœããŸãããããã®ã©ã€ãã©ãªã®äººæ°ãé«ãŸã£ãŠããã®ã¯ãä»ã®éçºããŒã«ãšã·ãŒã ã¬ã¹ã«çµ±åããéçºããã»ã¹ãè¿ éåããæåã³ãŒãã£ã³ã°äžã«çºçããå¯èœæ§ã®ãã人çãšã©ãŒãæå°éã«æããèœåã«èµ·å ããŠãããšèããããŸããçŸåšåºãæ¡çšãããŠããããã³ããšã³ã ã©ã€ãã©ãªã«ã¯ãReactãAngularãVue.js ãªã©ãããããããããéçºè ã®å€æ§ãªããŒãºãæºããç¬èªã®æ©èœãšå©ç¹ã®ã»ãããæäŸããŸãã
Facebook ã«ãã£ãŠéçºããã³ä¿å®ãããŠãã React ã¯ãéåžžã«äººæ°ã®ãããªãŒãã³ãœãŒã¹ JavaScript ã©ã€ãã©ãªã§ããããã®å¹ççãªå®£èšå UI ã³ã³ããŒãã³ããäžæ¹åããŒã¿ ãã㌠ã¢ãã«ãããã³ãã©ãŠã¶ãŒã®ã¬ã³ããªã³ã°ã®ãªãŒããŒããããåæžããããšã§ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããä»®æ³ DOM ã®ç»æçãªã³ã³ã»ãããç¹åŸŽã§ãã React ã䜿çšãããšãéçºè ã¯åå©çšå¯èœãª UI ã³ã³ããŒãã³ããäœæããŠãã®ç¶æ ã管çã§ãããããDOM ã®çŽæ¥æäœãäžèŠã«ãªããã¢ããªã±ãŒã·ã§ã³ ã€ã³ã¿ãŒãã§ã€ã¹ã®äºæž¬å¯èœãªã¬ã³ããªã³ã°ãä¿èšŒãããŸãã
Google ã«ãã£ãŠäœæããã Angular ãã匷åãªæ©èœã»ãããçµã¿èŸŒã¿ããŒã«ãäŸåé¢ä¿ã®æ¿å ¥ãé«åºŠãªå€æŽæ€åºã¡ã«ããºã ãªã©ã®é«åºŠãªæŠå¿µã®çµ±åã«ãããéçºè ãã倧ããªæ³šç®ãéããŠãããã 1 ã€ã®åŒ·åãªããã³ããšã³ã ã©ã€ãã©ãªã§ãã Angular ã¯ã³ã³ããŒãã³ãããŒã¹ã®ã¢ãŒããã¯ãã£ãå©çšããŠãã³ãŒãã®ã¢ãžã¥ãŒã«æ§ãšåå©çšæ§ãä¿é²ãããªã¢ã¯ãã£ã ããã°ã©ãã³ã°çšã®ã©ã€ãã©ãªã§ãã RxJS ã䜿çšãããªã¢ã¯ãã£ã ããã°ã©ãã³ã° ãã©ãã€ã ãæ¡çšããŠããŸãã
鲿©ç㪠JavaScript ãã¬ãŒã ã¯ãŒã¯ã§ãã Vue.js ã¯ããã®ã·ã³ãã«ããæè»æ§ããã¡ã€ã« ãµã€ãºã®å°ããã«ãããReact ã Angular ã®åŒ·åãªä»£æ¿ææ®µãšããŠæµ®äžããŠããŸãã Vue.js ã¯ãä»®æ³ DOMããªã¢ã¯ãã£ã ããŒã¿ ãã€ã³ãã£ã³ã°ãçè§£ããããã³ã³ããŒãã³ã ããŒã¹ã®ã¢ãŒããã¯ãã£ã掻çšããŠãããããå°èŠæš¡ããäžèŠæš¡ã®ãããžã§ã¯ãã«äººæ°ããããŸããããã«ã段éçãªå°å ¥æŠç¥ãå¯èœã«ãªããéçºè ã Vue.js ã®æ©èœãæ¢åã®ãããžã§ã¯ãã«æ®µéçã«çµ±åã§ããããã«ãªããŸãã
AppMasterno-codeãã©ãããã©ãŒã ã§ã¯ãããã³ããšã³ã ã©ã€ãã©ãªãç¹ã« Vue 3 ãã¬ãŒã ã¯ãŒã¯ã®åãæŽ»çšããŠãèŠèŠçã«çŸãããå¿çæ§ãé«ããã€ã³ã¿ã©ã¯ãã£ã㪠Web ã¢ããªã±ãŒã·ã§ã³ãäœæããããšã§ããŠããŒã¯ãªéçºãšã¯ã¹ããªãšã³ã¹ãã客æ§ã«æäŸããŸããåœç€Ÿã®ãã©ãããã©ãŒã ã䜿çšãããšã顧客ã¯ã·ã³ãã«ãªdrag-and-dropæ©èœã§ UI ãèšèšããWeb BP ãã¶ã€ããŒã䜿çšããŠåã³ã³ããŒãã³ãã®ããžãã¹ ããžãã¯ãäœæããå®å šã«ã€ã³ã¿ã©ã¯ãã£ããªã¢ããªã±ãŒã·ã§ã³ãç°¡åã«æ§ç¯ã§ããŸãã
ããã³ããšã³ã ã©ã€ãã©ãªã®éžæã¯ããããžã§ã¯ãã®èŠä»¶ãç¯å²ãã©ã€ãã©ãªã®ãšã³ã·ã¹ãã ã«å¯ŸããããŒã ã®ç²Ÿé床ã«å€§ããäŸåããããšã«æ³šæããããšãéèŠã§ãã React ã®ãããªã©ã€ãã©ãªã¯ãè€éãªç¶æ 管çãšé«ãã¢ããªã±ãŒã·ã§ã³ ããã©ãŒãã³ã¹ãå¿ èŠãšããå€§èŠæš¡ãªã¢ããªã±ãŒã·ã§ã³ã«é©ããŠããå¯èœæ§ããããŸãããVue.js ã¯ãããå°ãªããªãœãŒã¹èŠä»¶ãšããåçŽãª UI ã€ã³ã¿ã©ã¯ã·ã§ã³ãåããå°èŠæš¡ãªãããžã§ã¯ãã«é©ããŠããå¯èœæ§ããããŸãã
ã©ã¡ããéžæããŠããããã³ããšã³ã ã©ã€ãã©ãªã¯éçºè ã«ããã¹ã±ãŒã©ãã«ã§é«æ§èœãªã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ãšä¿å®ã容æã«ãããœãããŠã§ã¢éçºç°å¢ã«é©åœããããããŸããããããã®ã©ã€ãã©ãªã¯ãæ°ããæŽæ°ãæ©èœããã¹ã ãã©ã¯ãã£ã¹ã«ãã£ãŠé²åãç¶ããéçºããã»ã¹ãããã«åçåããããã³ããšã³ãã§éæã§ããããšã®å¯èœæ§ãæ¡å€§ããŸãã
çµè«ãšããŠãããã³ããšã³ã ã©ã€ãã©ãªã¯éçºè ã«ãšã£ãŠäžå¯æ¬ ãªããŒã«ãšããŠæ©èœããçç£æ§ãã³ãŒãã®ä¿å®æ§ãã¢ããªã±ãŒã·ã§ã³å šäœã®å質ã®ç¹ã§å€§ããªå©ç¹ããããããŸãããœãããŠã§ã¢éçºæ¥çãé²åããããè€éã§ããã©ãŒãã³ã¹ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ±ããããã«ã€ããŠããããã®ã©ã€ãã©ãªãžã®äŸåã¯ãŸããŸãé«ãŸããææ°ã® Web ããã³ã¢ãã€ã« ã¢ããªã±ãŒã·ã§ã³ã圢æããäžã§ãã®æ¥µããŠéèŠãªåœ¹å²ã匷åºã«ãªããŸãã