Reactã«å¿é ãã¦jQueryãæ¨ã¦ãã¹ãããæãã¯ãã¤å¤éå ·ã売ãæããã®è©±
ãã®è¾ºãèªãã§bh.mgzl.jpã§ãReactã使ã£ã¦ããã®ã§æã£ããã¨ãªã©ãæ¸ãã¦ã¿ããé°å²æ°çã«ã¯å¢ç°ã«æ¦ãåæãããã
SPAåå¤
SPAã使ããéå ·ã«ãªã£ãã®ã¯location.hashã使ã£ããã¯ããã¯ãHistoryAPIãå®éã«ã¢ãã³ãã©ã¦ã¶ã§åãããã«ãªã£ããã®æ°å¹´ã®è©±ã§ãããã¾ã§ã¯ããããé¸æè¢ãããªãã£ãããã£ãã¨ãã¦ããURLãå¤ãããªãä¸å®å ¨ãªãã®ã ã£ãã ã ããã1ã¤ã®URLã§1ã¤ã®ç¶æ ã表ç¾ããããã«ã¯å®éã«ãã¼ã¸é·ç§»ããããããç¡ãã£ãããã¡ããGmailã¨ãä¾å¤çãªç©ã¯ãã£ãããã©èª°ã«ã§ãå®è£ ã§ãããããªãã®ã§ã¯ãªãã£ãã
ããã誰ã«ã§ã使ããããã«ãªã£ãã®ã¯ãjQuery.pjaxã®ãããªã©ã¤ãã©ãªï¼ã®ãã©ã°ã¤ã³ï¼ãåºã¦ãã¦ããã ã£ãã¨æããã ãjQueryã®DOMæ¸ãæãã¯åç´ã§ãã¾ãå¹ççã§ã¯ãªãã®ã§ãä¾ãã°1000è¡ãããªã¹ããããã¹ãããã¯ã¹ã«å ¥åããæåã§é次çµãè¾¼ãã¿ãããªæ©è½ã¯ããã©ã¼ãã³ã¹ãåºãªãã£ããç¹ã«CPUã¨ã¡ã¢ãªã®éãããã¹ããã§ã¯ã
ã ãããããSPAã¨ããé¸æè¢ã¯é常ã«éããããã®ã ã£ãããjQueryMobileã§å·¨å¤§ãªWebã¢ããªã±ã¼ã·ã§ã³ãä½ãã®ã¯è²ã ãªé¢ã§é£ããã£ãã
æã ã¯æ°ããªéå ·ãæã«å ¥ãã
ããã«AngularJSãReact.jsãç»å ´ãããã¨ã«ãã£ã¦ã誰ããé¸ã³ããé¸æè¢ã®1ã¤ã¨ãã¦SPAãå ãã£ããä»ã¾ã§èªåã®ãããªå¡äººãä½ããªãã£ãç©ãä½ããããã«ãªã£ãã®ã ãæå以å¤ã®ä½ç©ã§ããªãã
ã ãã©ã¤ãã©ãªã¯éå ·ã ãéå ·ã¯å¿ è¦ãªæã«å¿ è¦ãªç©ãé¸ãã§ä½¿ããªããã°ãªããªãã4tãã©ãã¯ãæã«å ¥ããããã¨ãã£ã¦åä»ããã¤ã¯ãä¸è¦ã«ã¯ãªããªãã ããã
AngularJS 1.xã®å¤±æãããããããããã¨React.jsã空é£ã¶è»ã§ã¯ãªããã¨ããå¸æãæã¡ããæ°æã¡ã¯åãããå®éã«jQueryã¯ç©ºé£ã¶è»ã ã£ãããããã«ä¹ããã¨ãã§ãããã¨ã«æè¬ããã¦ããã
React.jsã«ä¹ãã¹ãã
ä»ã¯ã¾ã React.jsã空é£ã¶è»ã§ãããã¯åãããªããã ãå°ããããä¹ã£ã¦ããã¦æã¯ãªããJavaScriptãæ¸ããï¼â jQueryãæ¸ããï¼äººéã«ã¨ã£ã¦ã¯å¦ç¿ã³ã¹ãã大ãããã¨ãç¡ãããä»ä¹ã£ã¦ãããã¨ã«æã¯ãªãã
ã ãå®éã«ãã®éå ·ã使ããã©ããã¯ã¾ãå¥ã®è©±ã ãSPAã¨ããæ¦å¿µãReact.jsã¨ãã£ãã©ã¤ãã©ãªã¯åã«é¸æãã¹ãéå ·ã®1ã¤ã«éããªãã
æ°ããªéå ·ãæã«å ¥ããããã¨è¨ã£ã¦ãå¤éå ·ãæ¨ã¦ã¦æ°ãããã®ãã使ããªãã®ã¯æãã§ããããã¨ããæè¡ã¨ããéå ·ã«ããã¦ã¯ãå®éã«å ´æãã¨ãããã§ããªãã®ã ããæ¬å½ã«ä¸è¦ã«ãªã£ããã®æã«æ¨ã¦ãã°ãã話ã ã
ã5å¹´å¾ã®ãã¸ã§ã³ã¯ä½ã ï¼ãããï¼ããããããªãããã
ãããããã³ãã¨ã³ãããã£ã¦ãã人éã§ã5å¹´å¾ã®ãã¸ã§ã³ãæã£ã¦ãã人ã¯å°ãªãã ããããããæã£ã¦ãã人ã¯é常ã«åªããã¨ã³ã¸ãã¢ã¨ãã¦è³è³ãã¦ããã
æããï¼å½æã¯åã«Webãã¶ã¤ãã¼ãã³ã¼ãã¼ã¨å¼ã°ãã¦ããï¼ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã¯å¸¸ã«ãä»ãã¨æ¦ã£ã¦ããããã©ã¦ã¶ã¯æ´æ°ããç¶ããæ°ããªæ¦å¿µã®ããã¤ã¹ãèªçããã
ãããããä»ã©ãã®ã¢ããªã±ã¼ã·ã§ã³ãã¯ç°å¢ã®å¤åã«ãã£ã¦5å¹´ãæããªããã©ãã5å¹´å¾ã«ã¯ä½ããªãããã¨ã«ãªãã®ã§ãã ã£ãããã¾ä½¿ããéå ·ã¯ä½¿ã£ã¦ãæ§ããªãã ãããããããæå³ã§React.jsã¯ããéå ·ã§ããã
ã¤ã¾ã5å¹´å¾ã®ãã¸ã§ã³ãªã©ããé£ããã ãããã ãç°å¢ã®å¤åãæ¿ããã¨5å¹´å¾ã®ä¿å®ã³ã¹ããè¦ç©ãããã¨ãªã©ä¸å¯è½ã«è¿ããå°ãªãã¨ãèªåã¯è«¦ããã5å¹´å¾ã®è©±ã¯5å¹´å¾ã«ããããã¾ãã¯ææ¥ã®ç´æã®è©±ã ã
ï¼ããè¨ã£ã¦5å¹´å¾ã«ã¾ãå注ãããã¨ããã®ã¯å¥ã®ã話ãï¼