ã¬ã¤ã
åºæ¬çãªä½¿ãæ¹
- ã¤ã³ã¹ãã¼ã«
- ã¯ããã«
- Vue ã¤ã³ã¹ã¿ã³ã¹
- ãã³ãã¬ã¼ãæ§æ
- ç®åºããããã£ã¨ã¦ã©ããã£
- ã¯ã©ã¹ã¨ã¹ã¿ã¤ã«ã®ãã¤ã³ãã£ã³ã°
- æ¡ä»¶ä»ãã¬ã³ããªã³ã°
- ãªã¹ãã¬ã³ããªã³ã°
- ã¤ãã³ããã³ããªã³ã°
- ãã©ã¼ã å ¥åãã¤ã³ãã£ã³ã°
- ã³ã³ãã¼ãã³ãã®åºæ¬
ã³ã³ãã¼ãã³ãã®è©³ç´°
- ã³ã³ãã¼ãã³ãã®ç»é²
- ããããã£
- ã«ã¹ã¿ã ã¤ãã³ã
- ã¹ããã
- åç & éåæã³ã³ãã¼ãã³ã
- ç¹å¥ãªåé¡ã«å¯¾å¦ãã
ãã©ã³ã¸ã·ã§ã³ã¨ã¢ãã¡ã¼ã·ã§ã³
- Enter/Leave ã¨ãã©ã³ã¸ã·ã§ã³ä¸è¦§
- ç¶æ ã®ãã©ã³ã¸ã·ã§ã³
åå©ç¨ã¨æ§æ
- ããã¯ã¹ã¤ã³
- ã«ã¹ã¿ã ãã£ã¬ã¯ãã£ã
- æç»é¢æ°ã¨JSX
- ãã©ã°ã¤ã³
- ãã£ã«ã¿ã¼
ãã¼ã«
- åä¸ãã¡ã¤ã«ã³ã³ãã¼ãã³ã
- ãã¹ã
- TypeScript ã®ãµãã¼ã
- ãããã¯ã·ã§ã³ç°å¢ã¸ã®é ä¿¡
ã¹ã±ã¼ã«ã¢ãã
- ã«ã¼ãã£ã³ã°
- ç¶æ 管ç
- ãµã¼ããµã¤ãã¬ã³ããªã³ã°
- ã»ãã¥ãªãã£
å é¨
- ãªã¢ã¯ãã£ãã®æ¢æ±
移è¡
- Vue 1.x ããã®ç§»è¡
- Vue Router 0.7.x ããã®ç§»è¡
- Vuex 0.6.x ãã 1.0 ã¸ã®ç§»è¡
ãã®ä»
- ä»ã®ãã¬ã¼ã ã¯ã¼ã¯ã¨ã®æ¯è¼
- Vue.js ã³ãã¥ããã£ã¸åå ãã¾ããã!
- ãã¼ã ã«ä¼ãã
v2.x 以åã®ããã¥ã¡ã³ãã§ãã v3.x ã®ããã¥ã¡ã³ããè¦ããå ´åã¯ãã¡ã
ä»ã®ãã¬ã¼ã ã¯ã¼ã¯ã¨ã®æ¯è¼
æçµæ´æ°æ¥: 2020å¹´11æ7æ¥
ããã¯ç¢ºãã«ã¬ã¤ãã®ä¸ã§ã¯æãæ¸ããã¨ãé£ãããã¼ã¸ã§ãããç§ãã¡ã¯ãããéè¦ã ã¨æãã¦ãã¾ãããã£ã¨ãããªãã¯è§£æ±ºãããåé¡ãæ±ãã¦ãã¦ããã®åé¡ã解決ããããã«ä»ã®ã©ã¤ãã©ãªã使ã£ããã¨ãããã§ããããããªãããã®ãã¼ã¸ãèªãã§ããã®ã¯ Vue ãããªãç¹æã®åé¡ããããã解決ãããã¨ãã§ãããã©ãããç¥ãããããã§ããããããã¯ç§ãã¡ãããªãã«çãã示ããããã¨ã§ãã
ã¾ããç§ãã¡ã¯åè¦ãé¿ããããã«å¤ãã®åªåãè²»ããã¦ãã¾ããVue ã®ã³ã¢ãã¼ã ã§ãã®ã§ãç§ãã¡ã¯æããã« Vue ãã¨ã¦ã好ãã§ããç§ãã¡ã¯ããã¤ãã®åé¡ã«ã¤ãã¦ã¯ Vue ãä¸ã®ä¸ã«åå¨ããä»ã®ãã®ãããããè¯ã解決ããã¨èãã¦ãã¾ããããç§éããããä¿¡ãããã¨ãã§ããªãã£ãããVue ã®ããã«ä½æ¥ããããã¨ã¯ãªãã£ãã§ããããããããç§ãã¡ã¯å ¬å¹³ã§ééãã®ãªãããã«ãããã¨èãã¦ãã¾ããReact ã®ä»£æ¿ã¬ã³ãã©ã®å·¨å¤§ãªã¨ã³ã·ã¹ãã ã Knockout ã® IE6 ããã®ãã©ã¦ã¶ãµãã¼ãã®ããã«ãä»ã®ã©ã¤ãã©ãªãèããåªãã¦ããã¨ç¤ºãããé¨åã«é¢ãã¦ãç§ãã¡ã¯ããããã§ããéãè¼ããããã«ãã¦ãã¾ãã
ããã«ãç§ãã¡ã¯ããªãããã®ããã¥ã¡ã³ããææ°ã®æ å ±ã«ä¿ã£ã¦ããã ãããã¨ãæã¿ã¾ãããªããªããJavaScript ã®ä¸çã¯éãåãã¦ããããã§ãï¼ãããããªããæ£ç¢ºã§ã¯ãªãé¨åãããã¾ãæ£ãããªãããã«è¦ããé¨åã«æ°ãã¤ããããIssue ãéãã¦æãã¦ãã ããã
React
React 㨠Vue ã«ã¯å¤ãã®é¡ä¼¼ç¹ãããã¾ãããããã¯ä¸¡æ¹ã¨ãï¼
- ä»®æ³ DOM ãæ´»ç¨ãã¦ãã¾ã
- ãªã¢ã¯ãã£ãã§çµã¿åããå¯è½ãªãã¥ã¼ã®ã³ã³ãã¼ãã³ããæä¾ãã¦ãã¾ã
- ã³ã¢ã©ã¤ãã©ãªã«ç¦ç¹ããããããã¨ã«åªãã¦ãããã«ã¼ãã£ã³ã°ãã°ãã¼ãã«ã®ç¶æ 管çã®ãããªé¢å¿äºã¯é¢é£ã©ã¤ãã©ãªã«æ å½ããã¦ãã¾ã
ã¹ã³ã¼ããã¨ã¦ãããä¼¼ã¦ããããããã®æ¯è¼ã®æ¹åã«ä»ãããå¤ãã®æéãããã¦ãã¾ããç§ãã¡ã¯æè¡çãªæ£ç¢ºãã ãã§ãªãããã©ã³ã¹ãä¿è¨¼ãããã¨èãã¦ãã¾ããä¾ãã°ãReact ã®ã¨ã³ã·ã¹ãã ã®è±ããããã«ã¹ã¿ã ã¬ã³ãã©ã®è±å¯ãã®ããã«ãç§ãã¡ã¯ React ã Vue ãããåªãã¦ããç¹ã示ãã¾ãã
ã¨ã¯ãããå¤ãã®èª¿æ»é ç®ã¯ããç¨åº¦ä¸»è¦³ã«ãã£ã¦ãã¾ããããReact ã¦ã¼ã¶ã¼ã«ã¨ã£ã¦ã¯ã©ããã¦ã Vue ãã²ãããã¦ããããã«è¦ãã¦ãã¾ãããããã¾ãããæ§ã ãªæè¡çãªå好ããããã¨ã¯èªèããããã§ããã®å好ãç§ãã¡ã®ãã®ã¨éè¯ãä¸è´ãã¦ããå ´åã«ãVue ãããããããé©åã¨ãªãçç±ã«ã¤ãã¦æ¦èª¬ãããã¨ããã®æ¯è¼ã®ç¬¬ä¸ã®ãããã§ãã
ç¶ãã»ã¯ã·ã§ã³ã®ããã¤ãã§ã¯ React ãã¼ã¸ã§ã³ 16 以ä¸ã«å¯¾ãã¦è¡ãããæ´æ°ã«ããè¥å¹²å¤ããªã£ãå 容ãå«ãå¯è½æ§ãæããç§ãã¡ã¯ React ã³ãã¥ããã£ã¨å ±ã«ä½æ¥ãé²ãã¦ãã®ã»ã¯ã·ã§ã³ãè¿ãå°æ¥å·æ°ããäºå®ã§ãã
å®è¡ææ§è½
React 㨠Vue ã®ä¸¡æ¹ã¯ãã©ã¡ããé常ã«æ©ãã®ã§ãé度ã¯ã©ã¡ããé¸ã¶ãã®æ±ºå®è¦å ã«ãªãããã«ããã¾ãããã§ãããå ·ä½çãªã¡ããªã¯ã¹ã«ã¤ãã¦ã¯ããã®ãµã¼ããã¼ãã£ã®ãã³ããã¼ã¯ã確èªãã¦ãã ãããããã¯ãã·ã³ãã«ãªã³ã³ãã¼ãã³ãããªã¼ã§ã®çã®ã¬ã³ããªã³ã° / æ´æ°ã®ããã©ã¼ãã³ã¹ã«éç¹ãããã¦ãã¾ãã
æé©åã®åãçµã¿
React ã§ã¯ãã³ã³ãã¼ãã³ãã®ç¶æ
ãå¤åããã¨ãããã®ã³ã³ãã¼ãã³ããã«ã¼ãã¨ãã¦ãã³ã³ãã¼ãã³ãã®ãµãããªã¼å
¨ä½ãåæç»ãã¾ããä¸è¦ãªåã³ã³ãã¼ãã³ãã®åã¬ã³ããªã³ã°ãé¿ããã«ã¯ãã§ããã ããã¤ã§ã PureComponent
ã使ãããshouldComponentUpdate
ãå®è£
ããå¿
è¦ãããã¾ããã¾ããä¸å¤ (immutable) ãªãã¼ã¿æ§é ã使ç¨ãã¦ãç¶æ
ã®å¤æ´ãããæé©åããããããå¿
è¦ãããããããã¾ãããããããªãããPureComponent / shouldComponentUpdate
ã¯ããµãããªã¼ã®æç»åºåå
¨ä½ãç¾å¨ã®ã³ã³ãã¼ãã³ãã®ããããã£ã«ãã£ã¦æ±ºå®ãããã¨ä»®å®ãã¦ããããããã®ãããªæé©åã«é ¼ããã¨ãã§ããªãå ´åãããã¾ããããã§ãªãå ´åããã®ãããªæé©å㯠DOM ã®ç¶æ
ãä¸ä¸è´ã«ãªãå¯è½æ§ãããã¾ãã
Vue ã§ã¯ãã³ã³ãã¼ãã³ãã®ä¾åé¢ä¿ãæç»ä¸ã«èªåçã«è¿½è·¡ããããããã·ã¹ãã ã¯ç¶æ
ãå¤åããã¨ãã«å®éã«ã©ã®ã³ã³ãã¼ãã³ããåæç»ããå¿
è¦ããããæ£ç¢ºã«èªèãã¾ããåã³ã³ãã¼ãã³ãã¯ãèªåçã« shouldComponentUpdate
ãå®è£
ããã¦ããã¨è¦ãªããã¨ãã§ãããã¹ããããã³ã³ãã¼ãã³ãã«æ³¨æããå¿
è¦ã¯ããã¾ããã
æ¦ãã¦ãããã«ãã£ã¦éçºè ã¯æ§è½æé©åå ¨è¬ãè¡ãå¿ è¦ããªããªããã¹ã±ã¼ã«ã¢ããã«éãã¦ãã£ããã¢ããªã±ã¼ã·ã§ã³ã®æ§ç¯ãã®ãã®ã«æ³¨åã§ããããã«ãªãã¾ãã
HTML & CSS
React ã§ã¯ããã¹ã¦ã®ãã®ã¯åãªã JavaScript ã§ããHTML æ§é ã JSX ã§è¡¨ç¾ããã¦ããã ãã§ãªããæè¿ã®å¾å㯠CSS 管çã JavaScript å ã«ç½®ãå¾åãããã¾ãããã®ã¢ããã¼ãã«ã¯å©ç¹ãããã¾ãããå¿ ããããã¹ã¦ã®éçºè ã«ã¨ã£ã¦ä¾¡å¤ãããããã§ã¯ãªããã¾ãã¾ãªãã¬ã¼ããªããããã¾ãã
Vue ã¯å¤å ¸ç㪠Web æè¡ãåãå ¥ãããã®ä¸ã«æãç«ã£ã¦ãã¾ãããã®æå³ã示ãããã«ãããã¤ãã®ä¾ãåãä¸ãã¾ãã
JSX vs Templates
React ã§ã¯ããã¹ã¦ã®ã³ã³ãã¼ãã³ã㯠JSX ãç¨ãã æç»é¢æ° (render) ã®ä¸ã§ãããã® UI ã表ç¾ãã¾ããJSX ã¨ã¯ JavaScript ã®ä¸ã§ç¨ãããã¨ã®ã§ããã宣è¨ç㧠XML ã®ãããªæ§æã§ãã
JSX ãä¼´ã æç»é¢æ°ã«ã¯ããã¤ãã®åªä½ãªç¹ãããã¾ãï¼
- å®å ¨ãªããã°ã©ãã³ã°è¨èª (JavaScript) ã®åãæ´»ç¨ãã¦ãã¥ã¼ãæ§ç¯ãããã¨ãã§ãã¾ããããã«ã¯ãä¸æå¤æ°ãããã¼å¶å¾¡ãã¹ã³ã¼ãå ã® JavaScript å¤ã®ç´æ¥åç §ãå«ã¾ãã¾ãã
- JSX ã®ããã®ãã¼ã«ã®ãµãã¼ãï¼ä¾ãã°ãLintãåãã§ãã¯ãã¨ãã£ã¿ã®ãªã¼ãã³ã³ããªã¼ãï¼ã¯ç¾å¨ Vue ã®ãã³ãã¬ã¼ãã§å©ç¨å¯è½ãªãã®ãããããã¤ãã®ç¹ã§åªãã¦ãã¾ãã
Vue ã¯ãæç»é¢æ°ã¨ãããã« JSX ã®ãµãã¼ããåãã¦ãã¾ãããªããªããããªãã¯ææãã®åãå¿ è¦ã¨ããããã§ããããããªãããããã©ã«ãã®ã¨ã¯ã¹ããªã¨ã³ã¹ã¨ãã¦ãããåç´ãªä»£æ¿æ段ã¨ãã¦ãã³ãã¬ã¼ããæä¾ãã¦ãã¾ãããã¹ã¦ã®æå¹ãª HTML ã¯æå¹ãª Vue ãã³ãã¬ã¼ãã§ãããããã®ãã¨èªä½ãããã¤ãã®å©ç¹ãããããã¾ãã
- HTML ã使ã£ã¦ä½æ¥ãã¦ããå¤ãã®éçºè ã«ã¨ã£ã¦ããã³ãã¬ã¼ãã¯èªã¿æ¸ãããã®ã«ããèªç¶ã«æãããã¾ããå好ãã®ãã®ã¯ããã主観çã§ãããéçºè ã®çç£æ§ãããé«ããã°ãæ©æµã¯å®¢è¦³çã§ãã
- HTML ãã¼ã¹ã®ãã³ãã¬ã¼ãã«ãããVue ã®ãªã¢ã¯ãã£ãæ©è½ãæ´»ç¨ããããã«ãæ¢åã®ã¢ããªã±ã¼ã·ã§ã³ãå¾ã ã«ç§»è¡ããã®ããã£ã¨ç°¡åã«ãªãã¾ãã
- ã¾ãããã¶ã¤ããçµé¨ã®æµ ãéçºè ãã³ã¼ããã¼ã¹ã解æãã¦è²¢ç®ãããã¨ã容æã«ãªãã¾ãã
- Vue ã®ãã³ãã¬ã¼ãã®ä½æã«ãPug (以å㯠Jade ã¨ãã¦ç¥ããã¦ãã) ã®ãããªããªããã»ããµã使ç¨ãããã¨ãã§ãã¾ãã
ãã³ãã¬ã¼ããæ¸ãããã«å¥é DSL (Domain-Specific Language) ãè¦ããªããã°ãªããªãã¨ä¸»å¼µãã人ããã¾ãããç§ãã¡ã¯ãã®éãã¯ããããç®ç¸çãªãã®ã«éããªãã¨ä¿¡ãã¦ãã¾ãã第ä¸ã«ãJSX ã¯ã¦ã¼ã¶ã¼ãä½ãè¦ããå¿
è¦ãç¡ãã¨ãããã¨ãæå³ãã¾ãããJSX ã¯ãã¬ã¼ã³ãª JavaScript ã«åºã¥ãæ¡å¼µæ§æãªã®ã§ãJavaScript ã«æ
£ãã¦ãã人ãªãç°¡åã«è¦ããããããããã¾ããããåºæ¬çã«å¦ç¿ã³ã¹ããããããªãã¨è¨ãã¨èªå¼ãããã¾ããåãããã«ããã³ãã¬ã¼ãã¯ã¾ãã«ãã¬ã¼ã³ãª HTML ã«åºã¥ãæ¡å¼µæ§æãªã®ã§ããã§ã« HTML ã«æ
£ãã¦ãã人ãªãå¦ç¿ã³ã¹ãã¯é常ã«è»½ãã§ããDSL ã¯ãããå°ãªãã³ã¼ã(ä¾: v-on
修飾å) ã§ããå¤ãã®ãã¨ãæãéãããã¨ãã§ãã¾ãããã¬ã¼ã³ãª JSX ãæç»é¢æ°ã§ã¯ãåãã¿ã¹ã¯ã®ããã«ããå¤ãã®ã³ã¼ããå¿
è¦ã«ãªãããããã¾ããã
ããé«ãã¬ãã«ã§ã¯ãã³ã³ãã¼ãã³ãããã¬ã¼ã³ãã¼ã·ã§ã³ç¨ã¨è«çç¨ã® 2 ã¤ã®ã«ãã´ãªã«åãããã¨ãã§ãã¾ããç§ãã¡ã¯ããã¬ã¼ã³ãã¼ã·ã§ã³ç¨ã®ã³ã³ãã¼ãã³ãã«ã¯ãã³ãã¬ã¼ãã使ç¨ããè«çç¨ã®ãã®ã«ã¯æç»é¢æ° / JSX ã使ç¨ãããã¨ããå§ããã¾ãããããã®ã³ã³ãã¼ãã³ãã®å²åã¯ãä½æãã¦ããã¢ããªã±ã¼ã·ã§ã³ã®ã¿ã¤ãã«ãã£ã¦ç°ãªãã¾ãããä¸è¬çã«ãã¬ã¼ã³ãã¼ã·ã§ã³ç¨ã®ãã®ã®æ¹ãã¯ããã«å¤ãè¦ããã¾ãã
ã³ã³ãã¼ãã³ãã¹ã³ã¼ã CSSï¼Scoped CSSï¼
ããªããã³ã³ãã¼ãã³ããè¤æ°ã®ãã¡ã¤ã«ã«åããªãéãï¼ä¾ãã°ãCSS ã¢ã¸ã¥ã¼ã«ã使ããªã©ï¼ãReact 㧠CSS ã®ã¹ã³ã¼ããéå®ããã¨ãã«ã¯ CSS-in-JS ã½ãªã¥ã¼ã·ã§ã³ (ä¾ãã° styled-components ã emotion) çµç±ã§ãã°ãã°è¡ããã¾ããããã¯é常㮠CSS ä½æããã»ã¹ã¨ã¯ç°ãªãæ°ããã³ã³ãã¼ãã³ãå¿åã®ã¹ã¿ã¤ã«ãã©ãã¤ã ãå°å ¥ãã¾ããå ãã¦ããããã«ã¯ãã«ãæã«åä¸ã®ã¹ã¿ã¤ã«ã·ã¼ãã« CSS ãæ½åºããããã®ãµãã¼ããããã¾ãããã¹ã¿ã¤ã«ãæ£ããæ©è½ããããã«ã¯ã©ã³ã¿ã¤ã ããã³ãã«ã«å«ããå¿ è¦ããããã¨ããã¾ã ä¸è¬çã§ããã¹ã¿ã¤ã«ãæ§æããéã« Javascript ã®ãã¤ãããºã ã«ã¢ã¯ã»ã¹ã§ããä¸æ¹ã§ããã¬ã¼ããªãã¯å¤ãã®å ´åãã³ãã«ãµã¤ãºã¨ã©ã³ã¿ã¤ã ã®ã³ã¹ããå¢å ãããã¨ã§ãã
ããããªãã CSS-in-JS ã®ãã¡ã³ãªããèå㪠CSS-in-JS ã©ã¤ãã©ãªã®å¤ã㯠Vue ããµãã¼ããã¦ãã¾ã (ä¾ãã° styled-components-vue ã vue-emotion)ãããã§ã® React 㨠Vue ã®ä¸»ãªéãã¯ã Vue ã§ã®ã¹ã¿ã¤ãªã³ã°ã®ããã©ã«ãã®æ¹æ³ã¯ åä¸ãã¡ã¤ã«ã³ã³ãã¼ãã³ã ã§ã®ãã身è¿ãª style
ã¿ã°ã«ãããã®ã ã¨ãããã¨ã§ãã
åä¸ãã¡ã¤ã«ã³ã³ãã¼ãã³ã ã§ã¯ã ãã®ä»ã®ã³ã³ãã¼ãã³ãã³ã¼ãã¨åããã¡ã¤ã«å 㧠CSS ã«ãã«ã¢ã¯ã»ã¹ã§ãã¾ãã
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>
ä»»æã«ä»ä¸ã§ãã scoped
å±æ§ã¯ãè¦ç´ ã«ä¸æãªå±æ§ï¼data-v-21e5b78
ã®ãããªãã®ï¼ãä»ä¸ãã.list-container:hover
ã .list-container[data-v-21e5b78]:hover
ã®ãããªãã®ã«ã³ã³ãã¤ã«ãããã¨ã§ããã® CSS ã®ã¹ã³ã¼ããããªãã®ã³ã³ãã¼ãã³ãã«éå®ãã¾ãã
æå¾ã«ã Vue ã®åä¸ãã¡ã¤ã«ã³ã³ãã¼ãã³ãã®ã¹ã¿ã¤ãªã³ã°ã¯é常ã«æè»ã§ãã vue-loader çµç±ã§ãã©ã®ãããªããªããã»ããµããã¹ãããã»ããµããã㦠CSS Modules ã¨ã®æ·±ãçµ±åã§ããã使ããã¨ãã§ãã¾ã â ãã¹ã¦ã <style>
è¦ç´ å
ã§ã
è¦æ¨¡
ã¹ã±ã¼ã«ã¢ãã
大ããªã¢ããªã±ã¼ã·ã§ã³ã®ããã«ãVue ã React ãå¼·åãªã«ã¼ãã£ã³ã°ã®è§£æ³ãæä¾ãã¦ãã¾ããReact ã³ãã¥ããã£ã¯ç¶æ 管çã¨ãã観ç¹ã§ã¨ã¦ãé©æ°çãªè§£æ³ãæã£ã¦ãã¾ãï¼ä¾ãã°ãFlux/Reduxï¼ããããã®ç¶æ 管çã®ãã¿ã¼ã³ã¨ãããã« Redux èªä½ã¯ç°¡åã« Vue ã®ã¢ããªã±ã¼ã·ã§ã³ã¨çµ±åãããã¨ãã§ãã¾ããå®éã«ãVue ã¯ãã®ã¢ãã«ãããã«ä¸æ©é²ãã Vuex ã¨ãããVue ã¨æ·±ãçµ±åããã¦ãã Elm ã«è§¦çºãããç¶æ 管çã®è§£æ³ããã£ã¦ãããç§ãã¡ã¯ãããããåªããéçºä½é¨ãããããã¨èãã¦ãã¾ãã
ãããã®éã«ãããã 1 ã¤ã®éè¦ãªéãã¯ãVue ã«ãããç¶æ 管çãã«ã¼ãã£ã³ã°ï¼ããã®ä»ã®é¢å¿äºï¼ã®ããã®é¢é£ã©ã¤ãã©ãªã¯ãã¹ã¦å ¬å¼ã«ãµãã¼ãããã¦ãã¦ãã³ã¢ã®ã©ã¤ãã©ãªã¨ã¨ãã«æ´æ°ããç¶ãã¦ããã¨ãããã¨ã§ããReact ã¯ãã®ãããªé¢å¿äºã¯ã³ãã¥ããã£ã«ã¾ããã¦ãããããæççãªã¨ã³ã·ã¹ãã ãä½ãä¸ãã¦ãã¾ããããã¯ãã大è¡çã§ã¯ããã¾ãããReact ã®ã¨ã³ã·ã¹ãã 㯠Vue ã®ããã大ããä¸åã£ã¦è±ãã§ãã
æå¾ã«ãVue 㯠CLI ã«ããããã¸ã§ã¯ãçæãã¼ã«ãæä¾ãã¦ããã対話形å¼ã®ããã¸ã§ã¯ãæ§ç¯ã¦ã£ã¶ã¼ãã«ãã£ã¦æ°ããããã¸ã§ã¯ããç°¡åã«å§ãããã¨ãã§ãã¾ããã³ã³ãã¼ãã³ãã®é«éãªãããã¿ã¤ãã³ã°ã«ã使ããã¨ãã§ãã¾ããReact ã«ã create-react-app ãããããã®åéã§é²æ©ãéãã¦ãã¾ããç¾ç¶ã§ããã¤ãã®å¶éãããã¾ãã
- Vue CLI ã¯ãã©ã°ã¤ã³ã§æ¡å¼µã§ããã¢ããã°ã¬ã¼ãå¯è½ãªã©ã³ã¿ã¤ã ä¾åé¢ä¿ã®ä¸ã§åãã®ã«å¯¾ããããã¸ã§ã¯ãã®ä½ææã«ãããªãè¨å®ãã§ãã¾ããã
- Vue ãæ§ã ãªç®çããã«ãã·ã¹ãã ã®ããã«å¹ åºãããã©ã«ããªãã·ã§ã³ãæä¾ãã¦ããã®ã«å¯¾ããã·ã³ã°ã«ãã¼ã¸ã¢ããªã±ã¼ã·ã§ã³ãæ§ç¯ãããã¨ãæ³å®ãã 1 ã¤ã®ãã³ãã¬ã¼ãããæä¾ãã¦ãã¾ããã
- ãã§ã«ç¢ºç«ãããæ¹æ³ãç¨ãã¦ããã¨ã³ã¿ã¼ãã©ã¤ãºç°å¢ã§ç¹ã«å½¹ç«ã¤ãããããªãã®ã«ãã¦ã¼ã¶ã¼ãä½ã£ã presets ããããã¸ã§ã¯ããçæãããã¨ãã§ãã¾ããã
ããããªããããããã®å¶é㯠create-react-app ã®ãã¼ã ã«ãã£ã¦æå³ãããè¨è¨ä¸ã®æ±ºå®ã§ãããã«ããåªä½æ§ã確ãã«ããã¾ããä¾ãã°ãããªãã®ããã¸ã§ã¯ãã®è¦ä»¶ãã¨ã¦ãåç´ã§ããã«ãããã»ã¹ãã«ã¹ã¿ãã¤ãºããããã«âåãåºãâããå¿ è¦ãã¾ã£ããç¡ãã®ãªããããªãã¯ããã 1 ã¤ã®ä¾åæ§ã¨ãã¦æ´æ°ãããã¨ãã§ããã§ããããããªãã¯ãã®å²å¦ã®éããããã§ãã詳ããèªããã¨ãã§ãã¾ãã
ã¹ã±ã¼ã«ãã¦ã³
React ã¯ãã®æ¥ãªå¦ç¿æ²ç·ã§æåã§ããããªããæ¬å½ã«å§ãããã¨ãã§ããããã«ãªãã¾ã§ã«ãJSX ã¨ãããã ES2015+ ã«ã¤ãã¦ç¥ãå¿ è¦ãããã¾ãããªããªãå¤ãã®ã³ã¼ãä¾ã React ã® class æ§æã使ã£ã¦ããããã§ããããªãã¯ããã«ãã«ãã·ã¹ãã ã«ã¤ãã¦å¦ã¶å¿ è¦ãããã¾ãããªããªããæè¡çã«ã¯ Babel Standalone ã使ã£ã¦ã³ã¼ãããã©ã¦ã¶ã§ãã®å ´ã§ã³ã³ãã¤ã«ãããã¨ã¯å¯è½ã§ããããããã¯ã·ã§ã³ç°å¢ã§ã¯çµ¶å¯¾ã«é©ãã¦ãã¾ããã
React ã¨åãããã« Vue ã¯è¦æ¨¡ã大ããã§ãã¾ãããä¸æ¹ã§ãjQuery ã®ããã«è¦æ¨¡ãå°ãããããã¨ãã§ãã¾ããããã§ã - 使ãå§ããã«ããã£ã¦ãããªãã¯ãã¼ã¸ã®ä¸ã« 1 ã¤ã® script ã¿ã°ãæ¾ãè¾¼ãã ãã§è¯ãã®ã§ãï¼
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
ããã§ããªã㯠Vue ã®ã³ã¼ããæ¸ãå§ãããã¨ãã§ãã¾ãããå¾ããããæãããããæ§è½åé¡ã«ã¤ãã¦å¿é ããããããã¨ãªãããããã¡ã¤ï¼minifyï¼çããããã¯ã·ã§ã³ç°å¢ã¸è¨ç½®ãããã¨ãã§ãã¾ãã
ããªã㯠Vue ãå§ããã«ããã£ã¦ JSXãES2015 ããã«ãã·ã¹ãã ã«ã¤ãã¦ç¥ãå¿ è¦ã¯ãªãã®ã§ãè¤éãªã¢ããªã±ã¼ã·ã§ã³ããã«ãããããã®ååãªå¦ç¿ãããããã«ã¬ã¤ããèªãã®ã«ã¯ããã¦ãä¸æ¥ãããããªãã§ãããã
ãã¤ãã£ãã¬ã³ããªã³ã°
React Native ã«ãã£ã¦åã React ã³ã³ãã¼ãã³ãã¢ãã«ã使ã£ã¦ iOS ã Android ã®ããã®ãã¤ãã£ãæç»ãè¡ãã¢ããªã±ã¼ã·ã§ã³ãæ¸ããã¨ãã§ãã¾ããããã¯éçºè ã«ã¨ã£ã¦ã¯ç´ æ´ããããã¨ã§ãããªã㯠1 ã¤ã®ãã¬ã¼ã ã¯ã¼ã¯ã®ç¥èãè¤æ°ã®ãã©ãããã©ã¼ã ãã¾ããã§é©ç¨ãããã¨ãã§ãã¾ãããã®ç¹ã«ãã㦠Vue ã¯ãWeex ã¨å ¬å¼ã«åæ¥ãã¦ãã¾ããWeex ã¯ã¢ãªããã°ã«ã¼ãã«ãã£ã¦ä½ãããã¯ãã¹ãã©ãããã©ã¼ã 㪠UI ãã¬ã¼ã ã¯ã¼ã¯ã§ãApache ã½ããã¦ã§ã¢è²¡å£(ASF)ã«ãã£ã¦æ¯æ´ããã¦ãã¾ããWeex ã¯ãã©ã¦ã¶ã®æç»ã ãã§ã¯ãªããiOS ã Android ã®ãã¤ãã£ãæç»ãè¡ããã¨ã®ã§ããã³ã³ãã¼ãã³ããæ¸ãããã«åã Vue ã³ã³ãã¼ãã³ãã®æ§æã使ããã¨ãå¯è½ã«ãã¾ãï¼
ä»ã®æ®µéã§ã¯ãWeex ã¯ã¾ã æ´»çºã«éçºãç¶ãã¦ãããReact Native ã»ã©çãã¦ããããå®éã«ä½¿ããã¦ããããã§ã¯ããã¾ãããããã®éçºã¯ä¸çã§æã大ã㪠e ã³ãã¼ã¹ã®è£½åè¦ä»¶ã«åºã¥ãã¦ããããã㦠Vue ã®ãã¼ã 㯠Vue ã®éçºè ã®ããã®åæ»ãªä½é¨ãä¿è¨¼ããããã« Weex ã®ãã¼ã ã¨æ´»çºã«åæ¥ããã¤ããã§ãã
ãã 1 ã¤ã®é¸æè¢ã¯ãNativeScript-Vue ã§ããããã¯ãVue.js ãç¨ãã¦å®å ¨ãªãã¤ãã£ãã¢ããªã±ã¼ã·ã§ã³ãæ§ç¯ããããã® NativeScript ãã©ã°ã¤ã³ã§ãã
MobX ã¨ç¨ããå ´å
MobX 㯠React ã³ãã¥ããã£å ã§ã¨ã¦ã人æ°ã«ãªã£ã¦ãã¦ãããå®ã¯ãã㯠Vue ã®ãªã¢ã¯ãã£ãã·ã¹ãã ã¨ã»ã¼åããã®ã使ã£ã¦ãã¾ããéãããç¯å²å ã§ã¯ãReact + MobX ã®æµãã¯ããåé·ãª Vue ã¨ãã¦èãããã¨ãã§ããã®ã§ãããããªãããã®çµã¿åããã使ã£ã¦ãããã楽ããã§ããã®ãªãã°ãVue ã使ã£ã¦ã¿ãã®ã¯ããããã次ã®ã¹ãããã¨ãã¦çã«ããªã£ã¦ããã§ãããã
Preact ã¨ãã®ä»ã® React ç³»ã©ã¤ãã©ãª
React ç³»ã®ã©ã¤ãã©ãªã¯ããã¦ããAPI ã¨ã¨ã³ã·ã¹ãã ã®å¤ãããªãã¹ã React ã¨å ±æãããã¨ãã¾ãããã®ãããä¸ã«æããæ¯è¼ã®å¤§é¨åã¯ãããã®ã©ã¤ãã©ãªã«ãå½ã¦ã¯ã¾ãã¾ãã主ãªéãã¯ãã¾ã React ã¨æ¯ã¹ã¦ã¨ã³ã·ã¹ãã ã®è¦æ¨¡ãï¼ãã°ãã°ããªãï¼å°ãããã¨ã§ãããããã®ã©ã¤ãã©ãªã React ã®ã¨ã³ã·ã¹ãã ã®ãã¹ã¦ã¨ 100 ãã¼ã»ã³ãã®äºææ§ãæã¤ãã¨ã¯ç¡ãã¯ãã§ããããããã¤ãã®ãã¼ã«ãé¢é£ã©ã¤ãã©ãªã¯ä½¿ç¨ã§ããªãããããã¾ããããããã¯ããã¾ãåãã¦ããããã«è¦ããã¨ãã¦ãããã® React ç³»ã©ã¤ãã©ãªã React ã¨åçã«å ¬å¼ã«ãµãã¼ãããã¦ããªãéãã¯ããã¤å£ããªãã¨ãéãã¾ããã
AngularJS (Angular 1)
ããã¤ãã® Vue ã®æ§æ㯠AngularJS ã¨é常ã«è¯ãä¼¼ã¦ããããã«è¦ãããã¨ã§ãããï¼ä¾ãã°ãv-if
㨠ng-if
ï¼ããã㯠AngularJS ã解決ããå¤ãã®ãã®ãããã®ã¨ãæåæã® Vue ã®éçºã®éã«ã¤ã³ã¹ãã¬ã¼ã·ã§ã³ãåãã¦ããããã§ããããããªãããAngularJS ããå°å
¥ãããå¤ãã®çã¿ããããããã㯠Vue ã大ããªæ¹åãæä¾ãããã¨è©¦ã¿ãç¹ã§ãããã¾ãã
è¤éæ§
API ã¨è¨è¨ã®ä¸¡æ¹ã®è¦³ç¹ãããVue 㯠AngularJS ã¨æ¯è¼ãã¦ã¨ã¦ãåç´ã§ããè¤éãªã¢ããªã±ã¼ã·ã§ã³ãæ§ç¯ããããã«ååå¦ã¶ã®ã«ã¯å¤§æµ 1 æ¥ãããããªãã§ãããããã㯠AngularJS ã«ã¯å½ã¦ã¯ã¾ããªãç¹ã§ãã
æè»æ§ã¨ã¢ã¸ã¥ã¼ã«æ§
AngularJS ã«ã¯ããªãã®ã¢ããªã±ã¼ã·ã§ã³ãã©ã®ãããªæ§æã«ãªãã¹ããã¨ããç¹ã«ã¤ãã¦å¼·ãææ³ãåæ ããã¦ãã¾ããã対ã㦠Vue ã¯ããæè»ã§ãã¢ã¸ã¥ã¼ã«çµã¿ç«ã¦å¼ãªè§£æ±ºãå³ã£ã¦ãã¾ãããã®ãã¨ã Vue ãåºã種é¡ã®ããã¸ã§ã¯ãã«ããé©åå¯è½ã«ãã¦ããä¸æ¹ã§ãç§ãã¡ã¯ãæã«ã¯ãã ã³ã¼ãã£ã³ã°ãå§ããããããã«æ±ºããã¨ãä½ããã¨ãæç¨ã ã¨ãããã¨ãèªèãã¦ãã¾ãã
ç§ãã¡ãé«é㪠Vue.js ã®éçºã«å¿ è¦ãªå®å ¨ãªã·ã¹ãã ãæä¾ããã®ã¯ãã®ããã§ããVue CLI ã¯ãVue ã¨ã³ã·ã¹ãã ã®ããã®æ¨æºãã¼ã«ã®ãã¼ã¹ã©ã¤ã³ã¨ãªããã¨ãç®çã«ãã¦ãã¾ããããã«ãããæ§ã ãªãã«ããã¼ã«ã¯ããé¸ã°ããããã©ã«ãå¤ã§ã¹ã ã¼ãºã«åä½ããè¨å®ã«ä½æéãè²»ãã代ããã«ãèªåã®ã¢ããªã±ã¼ã·ã§ã³ãæ¸ããã¨ã«æ³¨åã§ããããã«ãªã£ã¦ãã¾ããããã¨åæã«ãç¹å®ã®ç¨éã«åããã¦åãã¼ã«ã®è¨å®ã微調æ´ã§ããæè»æ§ãæ®ãã¦ãã¾ãã
ãã¼ã¿ãã¤ã³ãã£ã³ã°
AngularJS ãã¹ã³ã¼ãéã«ããåæ¹åãã¤ã³ãã£ã³ã°ã使ç¨ãã¦ããä¸æ¹ã§ãVue ã¯ã³ã³ãã¼ãã³ãéã§ã¯ä¸æ¹åã®ãã¼ã¿ããã¼ãè¡ãããã«ãªã£ã¦ãã¾ããããã¯å°ãããªãã¢ããªã±ã¼ã·ã§ã³ã«ããã¦ãã¼ã¿ã®æµããæ¨æ¸¬ãããã¨ãããç°¡åã«ãã¾ãã
ãã£ã¬ã¯ãã£ã vs ã³ã³ãã¼ãã³ã
Vue ã¯ãã£ã¬ã¯ãã£ãã¨ã³ã³ãã¼ãã³ãã®éã«æ確ãªç·å¼ãããã¦ãã¾ãããã£ã¬ã¯ãã£ã㯠DOM ã®æä½ã®ã¿ãã«ãã»ã«åããããã«æå³ããã¦ããä¸æ¹ã§ãã³ã³ãã¼ãã³ãã¯èªèº«ã®ãã¥ã¼ã¨ãã¼ã¿ãã¸ãã¯ãæã¤ç¬ç«ããæ§æåä½ã§ããAngularJS ã§ã¯ããã£ã¬ã¯ãã£ãã¯å ¨ã¦ãè¡ããã³ã³ãã¼ãã³ãã¯ãã ã®ç¹å®ã®ç¨®é¡ã®ãã£ã¬ã¯ãã£ãã«éãã¾ããã
å®è¡ææ§è½
Vue 㯠Dirty Checking ã使ç¨ãã¦ããªããããããè¯ãæ§è½ãçºæ®ããããã«ããã£ã¨ãã£ã¨ç°¡åã«æé©åã§ãã¾ããAngularJS ã¯ã¹ã³ã¼ãå ã®ä½ããå¤æ´ãããã¨ãæ¯åãã¹ã¦ã®ã¦ã©ããã£ãããä¸åº¦åè©ä¾¡ãããå¿ è¦ããããããããããã®ã¦ã©ããã£ãåå¨ããæã¯é ããªã£ã¦ãã¾ãã¾ããããã«ããã¤ã¸ã§ã¹ããµã¤ã¯ã«ã¯ãããããã¤ãã®ã¦ã©ããã£ã追å ã®æ´æ°ãããªã¬ããããâå®å®âã®ããã«è¤æ°åã®å®è¡ãå¿ è¦ã¨ãªãå ´åãããã¾ããAngular ã®ã¦ã¼ã¶ã¼ã¯ãã¤ã¸ã§ã¹ããµã¤ã¯ã«ãåé¿ããããã«é£è§£ãªãã¯ããã¯ã«ããé ¼ãå¿ è¦ãããã¾ãããããã¤ãã®ç¶æ³ã§ã¯ãå¤ãã®ã¦ã©ããã£ãåå¨ããç¶æ³ã§ã¹ã³ã¼ããæé©åããåç´ãªæ¹æ³ããªãå ´åãããã¾ãã
Vue ã§ã¯ãéåæãã¥ã¼ã¤ã³ã°ãç¨ããééçãªä¾å追跡ç£è¦ã·ã¹ãã ã使ç¨ãã¦ããããããã®ãã¨ã§è¦ãããã¨ã¯ã¾ã£ããããã¾ããããã¹ã¦ã®å¤æ´ã¯æ示çãªä¾åé¢ä¿ãæããªãéãç¬ç«ãã¦ããªã¬ããã¾ãã
èå³æ·±ããã¨ã«ããããã® AngularJS ã®åé¡ç¹ã« Angular 㨠Vue ãã©ã®ããã«å¯¾å¦ãã¦ãããã¨ããç¹ã«ã¤ãã¦ãããã¤ãã¨ã¦ãããä¼¼ã¦ããç¹ãããã¾ãã
Angular (以å㯠Angular 2 ã¨ãã¦ç¥ããã)
Angular ã¯æ¬å½ã« AngularJS ããå®å ¨ã«ç°ãªããã¬ã¼ã ã¯ã¼ã¯ãªã®ã§ãç§ãã¡ã¯æ°ãã Angular ã®ããã«åå²ããç¯ãè¨ãã¦ãã¾ããä¾ãã°ãããã¯ç¬¬ä¸ç´ã®ã³ã³ãã¼ãã³ãã·ã¹ãã ãç¹å¾´ã¨ãã¦æã£ã¦ãããå¤ãã®è©³ç´°ãªå®è£ ã¯å®å ¨ã«æ¸ãæãããã¦ãããããã¦ãAPI ãã¾ãææ¬çã«å¤æ´ããã¦ãã¾ãã
TypeScript
ã»ã¨ãã©ãã¹ã¦ã®ããã¥ã¡ã³ãã¨å¦ç¿ãªã½ã¼ã¹ã TypeScript ãã¼ã¹ã®ãããAngular ã¯æ¬è³ªçã« TypeScript ã使ç¨ããå¿ è¦ãããã¾ããTypeScript ã«ã¯æãããªã¡ãªãããããã¾ããéçåãã§ãã¯ã¯å¤§è¦æ¨¡ã¢ããªã±ã¼ã·ã§ã³ã«ã¯é常ã«ä¾¿å©ã§ãJava ã C# ã使ç¨ãã¦ããéçºè ã«ã¨ã£ã¦ã¯çç£æ§ãå¤§å¹ ã«åä¸ããããã¨ãã§ãã¾ãã
ãããã誰ãã TypeScript ã使ãããã¨ã¯éãã¾ãããå¤ãã®å°è¦æ¨¡ãªã¦ã¼ã¹ã±ã¼ã¹ã§ã¯ãåã·ã¹ãã ãå°å ¥ããã¨çç£æ§ã®åä¸ããããªã¼ãã¼ããããçºçããå¯è½æ§ãããã¾ãããã®ãããªå ´åã¯ãVue ã使ãããããTypeScript ã使ããªã㧠Angular ã使ãã®ãé£ãããããããªãã®ã§ãããªã㯠Vue ã使ãã»ããè¯ãã§ãããã
æå¾ã«ãVue 㯠Angular ã®ããã« TypeScript ã¨æ·±ãã¯çµ±åããã¦ãã¾ããããVue 㧠TypeScript ã使ç¨ãããã¨æã人ã«å¯¾ãã¦ãVue ãå ¬å¼ã® typingsã¨å ¬å¼ decorator ãæä¾ãã¾ããã¾ããç§ãã¡ã¯ Vue + TS ã¦ã¼ã¶ã¼ã® TS / IDE ã¨ã¯ã¹ããªã¨ã³ã¹ãæ¹åããããã«ãMicrosoft ã® TypeScript ããã³ VSCode ãã¼ã ã¨ç©æ¥µçã«ååãã¦ãã¾ãã
å®è¡ææ§è½
両æ¹ã®ãã¬ã¼ã ã¯ã¼ã¯ã¯é常ã«é«éã§ããã³ããã¼ã¯ã§ãä¼¼ããããªã¡ããªã¯ã¹ãããã¾ãããã詳細ãªæ¯è¼ã®ããã«ãå ·ä½çãªã¡ããªã¯ã¹ãåç §ãããã¨ãã§ãã¾ãããé度ã¯æ±ºå®è¦å ã«ã¯ãªãããã«ããã¾ããã
ãµã¤ãº
Angular ã®æè¿ã®ãã¼ã¸ã§ã³ã¯ãAOT ã³ã³ãã¤ã«ã¨ tree-shaking ã«ãã£ã¦ããµã¤ãºã大å¹
ã«ç¸®å°ãããã¨ãã§ãã¾ãããããããªãããVuex + Vue Router (gzip æ¸ã¿ã§ ã 30 KB) ãå«ããã«æ©è½ã® Vue 2 ããã¸ã§ã¯ãã¯ãåæç¶æ
ã®angular-cli
製㮠AOT ã³ã³ãã¤ã«æ¸ã¿ã¢ããªã±ã¼ã·ã§ã³ (gzip æ¸ã¿ã§ ã 65 KB) ãããããªã軽éã§ãã
æè»æ§
Vue 㯠Angular ããããã£ã¨ããªãã®ããæ¹ã«ã¯å£åºããããã¨ã¯ããã¾ããï¼less opinionatedï¼ãæ§ã ãªãã«ãã·ã¹ãã ã®ããã®å ¬å¼ãµãã¼ããæä¾ãã¦ãã¾ãããããªããããªãã®ã¢ããªã±ã¼ã·ã§ã³ãã©ã®ããã«æ§æãããã«ã¤ãã¦ã¯å¶éãã¦ãã¾ãããã©ããªã¢ããªã±ã¼ã·ã§ã³ãä½ãã®ã«ããã£ã 1 ã¤ã®æ£ããããæ¹ãæã¤ãã¨ã好ãéçºè ãããä¸æ¹ã§ãå¤ãã®éçºè ã¯ãã®èªç±ã楽ããã§ãã¾ãã
å¦ç¿æ²ç·
Vue ãå§ããããã«ãããªã㯠HTML 㨠ES5 JavaScriptï¼ã¤ã¾ãããã¬ã¼ã³ãª JavaScriptï¼ãããç¥ãã ãã§è¯ãã§ãããããã®åºæ¬çãªã¹ãã«ãããã°ãã¬ã¤ããèªãã®ã«ä¸æ¥ãããããã«è¤éãªã¢ããªã±ã¼ã·ã§ã³ã®æ§ç¯ãå§ãããã¨ãã§ãã¾ãã
Angular ã®å¦ç¿æ²ç·ã¯ãã£ã¨æ¥ã§ãããã¬ã¼ã ã¯ã¼ã¯ã® API ã¯å·¨å¤§ã§ãã¦ã¼ã¶ã¼ã¯çç£æ§ãç²å¾ããåã«ããå¤ãã®æ¦å¿µã«æ £ãã¦ããå¿ è¦ãããã¾ããæããã«ãAngular ã®è¤éãã¯ã大è¦æ¨¡ã§è¤éãªã¢ããªã±ã¼ã·ã§ã³ã®ã¿ã対象ã¨ããã¨ããè¨è¨ç®æ¨ã«å¤§ããèµ·å ãã¦ãã¾ããããã®ãã¨ãçµé¨ã®æµ ãéçºè ããã®ãã¬ã¼ã ã¯ã¼ã¯ãé¸ã³åããã¨ãã¯ããã«é£ãããã¦ãã¾ãã
Ember
Ember ã¯ãã«æ©è½ã®ãã¬ã¼ã ã¯ã¼ã¯ã§ã¨ã¦ãå¼·ãææ³ï¼highly opinionatedï¼ã®ä¸ã§è¨è¨ããã¦ãã¾ããããã¯ãã§ã«ç¨æãããããããã®ããæ¹ãæä¾ãã¦ãããããªããããããåå使ãããªããã°ãé«ãçç£æ§ãçºæ®ã§ãããã¨ã§ããããããããªãããããã¯å¦ç¿æ²ç·ãé«ããæè»æ§ã«ä¹ãããã¨ãæå³ãã¦ãã¾ããå¼·ãææ³ãæã¤ãã¬ã¼ã ã¯ã¼ã¯ã¨ãããããã«çµã³ã¤ãã¦ååãããã¼ã«ç¾¤ãç¨ããã©ã¤ãã©ãªã®ã©ã¡ããé¸ã¶ãã¯ãã¬ã¼ããªãã§ããå¾è ã¯ããªãã«ããå¤ãã®èªç±ãä¸ãã¾ãããããªãã¯ã¢ã¼ããã¯ãã£ä¸ã®æ±ºå®ãããå¤ãããå¿ è¦ãããã¾ãã
ã§ãã®ã§ãVue ã®ã³ã¢ã¨ Ember ã®ãã³ãã¬ã¼ãã¨ãªãã¸ã§ã¯ãã¢ãã«ã¬ã¤ã¤ã¼ãæ¯è¼ãããã¨ã¯æ¯è¼ãããè¯ããã®ã«ãããã¨ã§ãããï¼
Vue ã¯ãã¬ã¼ã³ãª JavaScript ä¸ã§æ§ãããªãªã¢ã¯ãã£ããã£ã¨å®å ¨ã«èªåçãªç®åºããããã£ãæä¾ãã¦ãã¾ããEmber ã§ã¯ãããªãã¯ãã¹ã¦ã Ember ã®ãªãã¸ã§ã¯ãã®ä¸ã«ã©ããããç®åºããããã£ã®ä¾åãæåã§å®ç¾©ããå¿ è¦ãããã¾ãã
Vue ã®ãã³ãã¬ã¼ãæ§æ㯠JavaScript ã®å¼ã®å®å ¨ãªåãå©ç¨ãã¦ããã®ã«å¯¾ããHandlebars ã®å¼ã¨ãã«ãã®æ§æã¯æå³çã«ããªãå¶éããã¦ãã¾ãã
æ§è½é¢ã§ã¯ãEmber 3.x ã§ææ°ã® Glimmer ã¨ã³ã¸ã³ã®ã¢ãããã¼ãããããå¾ã«ãé¢ããããVue ã¯å¤§ããå·®ãã¤ã㦠Ember ãããåªãã¦ãã¾ããEmber ã§ã¯æ§è½ãéè¦ãªç¶æ³ã«ããã¦ãæåã§ã©ã³ã«ã¼ãï¼run loopï¼ã管çããå¿ è¦ãããä¸æ¹ã§ãVue ã¯èªåçã«ãããæ´æ°ãè¡ãã¾ãã
Knockout
Knockout 㯠MVVM ã¨ä¾å追跡ã®åéã«ãããå é§è ã§ããã®ãªã¢ã¯ãã£ãã·ã¹ãã 㯠Vue ã®ãã®ã¨ã¨ã¦ãããä¼¼ã¦ãã¾ãããã©ã¦ã¶ãµãã¼ãããã®å¯¾å¿ã®ãã¹ã¦ãæãã¨é常ã«ãã°ããããIE6 ã¾ã§ãµãã¼ããã¦ãã¾ãï¼Vue ã¯ä¸æ¹ã§ãIE9 以ä¸ã®ã¿ããµãã¼ããã¦ãã¾ãã
ããããªãããæéã¨ã¨ãã« Knockout ã®éçºã¯é ããªã£ã¦ãããå°ã å¤ããè¦ãå§ãã¦ãã¾ããä¾ãã°ããã®ã³ã³ãã¼ãã³ãã·ã¹ãã ã¯ã©ã¤ããµã¤ã¯ã«ããã¯ã®ä¸å¼ãæ¬ ãã¦ãããã¨ã¦ãããããã¦ã¼ã¹ã±ã¼ã¹ã«ãããããããã³ã³ãã¼ãã³ãã¸åè¦ç´ ã渡ãããã®ã¤ã³ã¿ãã§ã¼ã¹ã¯ Vue ã®ãã®ã¨æ¯è¼ãã¦å°ã ããã¡ãªããã®ã«æãããã¾ãã
ããã«ãAPI ãã¶ã¤ã³ã«ãå²å¦çãªéããããããã«ãæãã¾ããèå³ãããã°ããããããåç´ãª TODO ãªã¹ãã®ä½æãã©ã®ããã«æ±ãã®ããè¦ãã°ãããããããã¾ãããããã¯ç¢ºãã«å°ã 主観çã§ãããå¤ãã®äººã¯ Vue ã® API ã¯ããè¤éã§ãªããããæ§é åããã¦ããã¨èãã¦ãã¾ãã
Polymer
Polymer 㯠Google ãã¹ãã³ãµã¼ããã¦ãããã 1 ã¤ã®ããã¸ã§ã¯ãã§ããã®ä¸å®ã¯ Vue ãã¤ã³ã¹ãã¬ã¼ã·ã§ã³ãåãã¦ãããã®ã§ãããVue ã®ã³ã³ãã¼ãã³ã㯠Polymer ã® Custom Elements ã¨ç·©ãæ¯è¼ãããã¨ãã§ããããã«ä¸¡æ¹ã¨ãã¨ã¦ãããä¼¼ãéçºã¹ã¿ã¤ã«ãæä¾ãã¦ãã¾ããæã大ããªéã㯠Polymer ãææ°ã® Web Component ã®æ©è½ãåºã«æ§ç¯ããã¦ããããã¤ãã£ãã§ãããã®æ©è½ããµãã¼ããã¦ããªããã©ã¦ã¶ä¸ã§ï¼ããå£ã£ãæ§è½ã§ï¼åããããã«ã¯å°ãããªã Polyfill ãå¿ è¦ã¨ããç¹ã§ããããã¨æ¯è¼ãã¦ãVue 㯠IE9 ã¾ã§ä¾åã Polyfill ç¡ãã§åãã¾ãã
Polymer ã§ã¯ããã®éçºãã¼ã ã¯æ§è½ãè£ãããã«ãã¼ã¿ãã¤ã³ãã£ã³ã°ã·ã¹ãã ãããªãå¶éãã¾ãããä¾ãã°ãPolymer ã®ãã³ãã¬ã¼ãã¯çå½å¤ã®å転ã¨åä¸ã®ã¡ã½ããå¼ã³åºãã®æ§æã®ã¿ãããµãã¼ãããã¦ãã¾ããããã®ç®åºããããã£ã®å®è£ ã«ã¤ãã¦ããã¾ãæè»ã§ã¯ããã¾ããã
Riot
Riot 3.0 ã¯ããä¼¼ãã³ã³ãã¼ãã³ããã¼ã¹ã®éçºã¢ãã«ï¼âã¿ã°â㨠Riot ã§ã¯å¼ã°ãã¦ãã¾ãï¼ãæä¾ãã¦ãããå¿ è¦æå°éã®ç¾ããè¨è¨ããã API ãæã£ã¦ãã¾ããRiot 㨠Vue ã¯ãããããã®è¨è¨å²å¦ã®å¤ããå ±éãã¦ããã®ã§ããããããããªãããRiot ãããå°ãéãã«ãé¢ããããVue ã¯ããã¤ãèããåªããç¹ãæã£ã¦ãã¾ãï¼
- ããåªããæ§è½ãRiot ã¯ ä»®æ³ DOM ã使ç¨ãã¦ããã¨ãããããããDOM ããªã¼ããã©ãã¼ã¹ãã¦ãããããAngularJS ã¨åãæ§è½åé¡ã«è¦ããããã¦ãã¾ãã
- ããçæãããã¼ã«ã®ãµãã¼ããVue 㯠webpackãBrowserify ã®å ¬å¼ãµãã¼ããæä¾ãã¦ãã¾ããã対ã㦠Riot ã¯ãã«ãã·ã¹ãã ã®çµ±åã«ã¤ãã¦ã¯ã³ãã¥ããã£ã®ãµãã¼ãã«é ¼ã£ã¦ãã¾ãã