ES6ã¯ãã»ãšãã©ã®JavaScriptããã°ã©ãã«ã¯éŠŽæã¿ã®ãªãèšèªã®è€éãã«ã€ããŠèªã£ãŠããŸãã ãã®ç¥èãæŠåšã«ãçã®ãã¹ã¿ãªãŒãéæã§ããŸãã æ°ããæ§æãåŠã¶ ã€ãã¬ãŒã¿ãŒããžã§ãã¬ãŒã¿ãŒãã¢ãžã¥ãŒã«ãã¯ã©ã¹ãæ£ãã䜿çšããããšãåŠã¶ã ããŒã¿ãããå¹ççã«äœ¿çšã§ããŸãã ArrayãObjectãMathãNumberãStringãªã©ã®æ°ããAPIãã芧ãã ããã ã¡ã¿ããã°ã©ãã³ã°ã®å©ããåããŠããã°ã©ã ã®æ©èœãæ¡åŒµããŸãã
ç®æšãšç®ç
JavaScriptã§å¥åŠãŸãã¯ç解ã§ããªããšæããããã¹ãŠã®ãã®ããã©ãã¯ãªã¹ãã«èŒããåŸåãããå ŽåïŒããã³äžéšã¯ãããè¡ãã®ã«æ £ããŠããå ŽåïŒãããæç¹ã§ãªããèšèªããã®ç©ºã®ã·ã§ã«ããåŸãããŸããã
誰ããã¢ã¯ã»ã¹ã§ããJavaScriptã¡ã«ããºã ã®ãã®ãããªãµãã»ããã¯ããã®èšèªã®é·æãšèããããŠããŸãããåŠç¿ãããããå®å šãªããŸãã¯æå°éã®æ©èœãšåŒã¶æ¹ãæ£ããã§ãã
ç§ïŒèè ïŒã¯ãéã®ããšãè¡ãããšããå§ãããŸããJavaScriptã培åºçã«ç 究ããŠãæãè€éãªæ©èœãç解ããããšã§ãã ãã®æ¬ã§è°è«ãããã®ã¯ãããã«ã€ããŠã§ãã
JSéçºè ãç¹å®ã®åé¡ã解決ããããã«æäœéå¿ èŠãªããšã ããåŠã¶åŸåãããããšã¯ç¥ã£ãŠããŸãããç§ã®æ¬ã§ã¯å°é£ãé¿ããããã®äžè¬çãªæšå¥šäºé ã¯èŠã€ãããŸããã
äœããç§ãå¿ èŠãšããæ¹æ³ã§æ©èœããå Žåã§ããç§ã¯ãã®äºå®èªäœã«æºè¶³ããæºåãã§ããŠããŸãã-ããããªããããŠã©ã®ããã«æ©èœããããç解ããããšãéèŠã§ãã ç§ã®ã¢ãããŒããå ±æããŠã»ããã ç§ã¯æ§ããã«é»è©±ããŠãã»ãšãã©ã®äººãæ©ããŠããªãåä»ãªéãé²ã¿ãJavaScriptãäœã§ããããããã©ããªæ©äŒãæäŸããããå®å šã«ç解ããŠããŸãã ãããŠãããªãããã®ç¥èãæã£ãŠãããšããåäžã®ãã¯ããã¯ã§ããåäžã®ãã©ãããã©ãŒã ã§ããæ°ããã¢ãããŒãã§ããããªãã®ç解ãè¶ ããŠããŸãã
You Do nât Know JSã·ãªãŒãºã®åæ¬ã¯ã誀解ãããŠãããè¡šé¢çãªããšãå€ãèšèªã®ç¹å®ã®éèŠãªèŠçŽ ãæ·±ãå æ¬çã«æããã«ããŠããŸãã ãã®æç®ãèªãã åŸãããªãã¯çè«çã ãã§ãªãå®çšçãªãã¥ã¢ã³ã¹ãç解ããŠãããšãã確åºãã信念ãåŸãã§ãããã
JavaScriptã®ç¥èã¯ãã»ãšãã©ã®å Žåãèªåèªèº«ãç解äžè¶³ã®trapã«é¥ã£ã人ããåŸããã®ã§ãã ããã¯ãJavaScriptãå®éã«äœã§ãããã瀺ãåãªã圱ã§ãã ããªãã¯ãŸã 圌ãæ¬åœã«ç¥ããªãããããªããJSãç¥ããªãã·ãªãŒãºã®æ¬ã¯ããªããè¿œãã€ãã®ãå©ããã§ãããã ãããJavaScriptèšèªãããªããåŸ ã£ãŠããŸãïŒ
ESïŒçŸåšããã³å°æ¥
ãã®æ¬ãèªãã«ã¯ãES5ïŒããæ£ç¢ºã«ã¯ãES5.1ïŒãšåŒã°ããææ°ã®ïŒå·çæç¹ã®ïŒæšæºãŸã§ã®JavaScriptèšèªãååã«ç解ããŠããå¿ èŠããããŸãã ã
â¢UpïŒGoingïŒããã°ã©ãã³ã°ãšJSãåŠã³å§ããã°ããã§ããïŒ æ°ããç¥èåéãæ ããã®ã«åœ¹ç«ã€å°å³ã次ã«ç€ºããŸãã
â¢ã¹ã³ãŒããšã¯ããŒãžã£ãŒïŒã³ã³ãã€ã©ãŒã®ã»ãã³ãã£ã¯ã¹ïŒã€ã³ã¿ãŒããªã¿ãŒã§ã¯ãªãïŒãJSã¬ãã·ã«ã«ã³ã³ããã¹ãã®ã³ã¢ã§ããããšãç¥ã£ãŠããŸããïŒ ã¯ããŒãžã£ãå€ãšããŠã®ã¬ãã·ã«ã«ã¹ã³ãŒããšæ©èœã®çŽæ¥ã®çµæã§ããæ¹æ³ã説æã§ããŸããïŒ
â¢thisïŒObject PrototypesïŒåŒã³åºãã®ã³ã³ããã¹ãã«å¿ããŠãthisããŒã¯ãŒãã®æå³ã«ã€ããŠ4ã€ã®ãªãã·ã§ã³ãæå®ã§ããŸããïŒ ããåçŽãªåäœå§ä»»èšèšãã¿ãŒã³ã䜿çšãã代ããã«ãJSæ¬äŒŒã¯ã©ã¹ã§æ··ä¹±ããããšã¯ãããŸãããïŒ ä»ã®ãªããžã§ã¯ãïŒOLOOïŒã«é¢é£ä»ããããŠãããªããžã§ã¯ãã«ã€ããŠèããããšããããŸããïŒ
â¢åãšææ³ïŒJSã®çµã¿èŸŒã¿åã«ç²ŸéããŠãããããã«éèŠãªããšãšããŠãæ£ããå®å šã«åãã£ã¹ãããæ¹æ³ãç¥ã£ãŠããŸããïŒ ãã®èšèªã®ææ³ãšæ§æã®ãã¥ã¢ã³ã¹ãã©ã®çšåºŠèªä¿¡ããããŸããïŒ
â¢éåæãšããã©ãŒãã³ã¹ïŒã³ãŒã«ããã¯ã䜿çšããŠéåæã¢ã¯ã·ã§ã³ãå¶åŸ¡ããŠããŸããïŒ promiseãªããžã§ã¯ããšã¯äœããåããã¯ã°ã©ãŠã³ãæäœãã³ãŒã«ããã¯ã§çµæïŒãŸãã¯ãšã©ãŒïŒãè¿ãç¶æ³ãã©ã®ããã«åé¿ãããã説æã§ããŸããïŒ ãžã§ãã¬ãŒã¿ãŒã䜿çšããŠéåæã³ãŒãã®å¯èªæ§ãåäžãããæ¹æ³ãç¥ã£ãŠããŸããïŒ æåŸã«ãJSããã°ã©ã ãšåã ã®æäœã®æ¬æ Œçãªæé©åã®æ§æèŠçŽ ãç¥ã£ãŠããŸããïŒ
ãããã®æ¬ããã¹ãŠèªã¿ãããã§è°è«ãããŠãããããã¯ãç¿åŸããããJSèšèªã®é²åã«é£ã³èŸŒã¿ãè¿ãå°æ¥ãšé·æã®äž¡æ¹ã§ç§ãã¡ãåŸ ã£ãŠããå€åãæ¢ãæã§ãã
以åã®æšæºãšã¯ç°ãªããES6ã¯ãèšèªã«è¿œå ãããå¥ã®æ§ãããªAPIã»ãããšã¯åŒã°ããŸããã 圌ã¯å€ãã®æ°ããæ§æ圢åŒã圌ã«æã¡èŸŒã¿ãŸãããããã®ãã¡ã®ããã€ãã¯ããããããæ £ããã®ãããã»ã©ç°¡åã§ã¯ãªãã§ãããã ããŸããŸãªããŒã¿åã®æ°ããæ§é ãšæ°ããAPIãã«ããŒã¢ãžã¥ãŒã«ããããŸãã
ES6ã¯äžæ©å ãè¡ã£ãŠããŸãã ES5 JSãããç¥ã£ãŠãããšæã£ãŠããå€ãã®äžæ £ããªããšã«ééããã®ã§ãæºåãããŠãã ããïŒ ãã®æ¬ã¯ãES6ã®ãã¹ãŠã®äž»èŠãªé©æ°ãã«ããŒããŠããŸããããããªãã§ã¯ç©äºã®æµãã«å ¥ãããšã¯äžå¯èœã§ãããèšç»ãããŠããæ©èœã®ç°¡åãªæŠèŠã瀺ããŠããŸãã
ããŒãžã§ã³ã®ãµããŒã
JavaScriptæšæºã¯å ¬åŒã«ã¯ECMAScriptïŒãŸãã¯ç¥ããŠESïŒãšåŒã°ããæè¿ãŸã§ããã¹ãŠã®ããŒãžã§ã³ã¯æŽæ°ã®ã¿ã§ç€ºãããŠããŸããã ES1ãšES2ã¯ãå声ãšå€§éå°å ¥ãåããŠããŸããã JavaScriptã§æåã«åºã䜿çšããããã¬ãŒã ã¯ãŒã¯ã¯ãInternet Explorer 6ãã8ããã³Android 2.xã¢ãã€ã«ãã©ãŠã¶ãŒã®ãã®èšèªã®æšæºã§ããES3ã§ããã ç§ãèšåããªãæ¿æ²»ççç±ã®ããã«ãES4ã®äžå¹žãªããŒãžã§ã³ã¯æ±ºããŠæ¥ã®ç®ãèŠãŸããã§ããã
2009幎ã«ES5ã¯æ£åŒã«å®æãïŒ2011幎ã«ES5.1ãç»å ŽïŒãFirefoxãChromeãOperaãSafariãªã©ã®å€ãã®ææ°ãã©ãŠã¶ãŒã®æšæºãšããŠäººæ°ãé«ãŸã£ãŠããŸãã
JSã®æ¬¡ã®ããŒãžã§ã³ïŒå€èŠ³ã¯2013幎ãã2014幎ã次ã«2015幎ã«å»¶æãããŸããïŒã¯ãES6ãšããååã§è°è«ãããŠããŸãã ãããããã®åŸã次ã®ããŒãžã§ã³ã®å¹Žã«åºã¥ããŠåœåæ¹åŒã«åãæ¿ããææ¡ãå°çãå§ããŸãããããšãã°ã2016幎æ«ãŸã§ã«å®äºããES2016ïŒå¥åES7ïŒã§ãã 誰ãããã®ã¢ãããŒãã«åæããããã§ã¯ãããŸããããES6æšæºãES2015ãšããååã§ãŠãŒã¶ãŒã«ç¥ãããããã«ãªãå¯èœæ§ããããŸãã ãŸããES2016ããŒãžã§ã³ã®å€èŠ³ã¯ãæ°ããåœåã¹ããŒã ãžã®æçµçãªç§»è¡ã®èšŒæ ãšãªããŸãã
ããã«ãJSã®é²åçã¯1幎ã«1ã€ã®ããŒãžã§ã³ãè¶ ããŠããããšãããããŸããã æšæºã®è°è«ã§æ°ããã¢ã€ãã¢ãçãŸãããšããã«ããã©ãŠã¶éçºè ã¯æ°ããæ©èœã®ãããã¿ã€ããæäŸããå é§è ã®ããã°ã©ããŒã¯ã³ãŒãã®å®éšãéå§ããŸãã
éåžžãå ¬åŒã®æ¿èªã®ããªãåã«ããšã³ãžã³ãšããŒã«ã®åæã®ãããã¿ã€ãã®ãããã§ãæ°ããæ©èœãäºå®äžã®æšæºã«ãªããŸãã ãããã£ãŠãJSã®å°æ¥ã®ããŒãžã§ã³ããæ°ããæ©èœã®åºçŸã«é¢é£ãããã®ãšããŠæ€èšããã®ã¯çã«ããªã£ãŠããŸããåºæ¬æ©èœã®ä»»æã®ã»ããïŒçŸåšã®ããã«ïŒã1幎ïŒèšç»ã©ããïŒã§ã¯ãããŸããã
ãã®å ŽåãããŒãžã§ã³çªå·ã¯ä»¥åã®éèŠæ§ã倱ããJavaScriptã¯åžžã«å€åããæšæºã«ãªããŸãã ãŸããã³ãŒããããã®ãããªæšæºã«åŸã£ãŠäœæãããããšèšãã®ã§ã¯ãªãããµããŒããããŠããæ©èœã®ãµããŒããããŠããæ©èœã«å¿ããŠèæ ®ããããšããå§ãããŸãã
ãã©ã³ã¹ã³ã³ãã€ã«
æ©èœã®æ¥éãªé²åã¯ããµã€ããŸãã¯ã¢ããªã±ãŒã·ã§ã³ãã€ãããŒã·ã§ã³ããµããŒãããªãå€ããã©ãŠã¶ãŒã§åäœããç¶æ³ã§æ°ããæ©èœã䜿çšãããéçºè ã«ãšã£ãŠæ·±å»ãªåé¡ãåŒãèµ·ãããŸãã
ã©ããããES5ã¯å€ãã®å Žæã§å®çããªãã£ãããã§ããããã¯ãåºæ¬çã«ã以åã®ãã©ãããã©ãŒã ã®ãã¹ãŠã§ã¯ãªãã«ããŠãã»ãšãã©ã®ãã©ãããã©ãŒã ã®ãµããŒããåæ¢ãããŸã§ãã³ãŒãããŒã¹ãæ°ããæšæºã«æºæ ããªãã£ãããã§ãã ãã®çµæãå€ãã®éçºè ã¯ãããšãã°5幎以äžåã«ES5ã«ç»å Žããå³æ Œã¢ãŒããªã©ã䜿çšãå§ããã°ããã§ãã
ãã®ãããªé·æã®é 延ã¯ãäžè¬çã«å°æ¥ã®JSãšã³ã·ã¹ãã ã«æ害ã§ãããšèããããŠããŸãã èšèªã®éçºã«æºãã人ã ã¯ãä»æ§ãæ¿èªãããçŽåŸã«ãéçºè ãæ°ããæ©èœçãªæ©èœãšãã³ãã¬ãŒããèæ ®ããŠã³ãŒããäœæãå§ããããšã倢èŠãŠããããã©ãŠã¶ã¯ããããã¹ãŠå®è£ ã§ããŸãã
ççŸã解決ããã«ã¯ïŒ ããã§ã¯ãç¹å¥ãªããŒã«ãç¹ã«ãã©ã³ã¹ã³ã³ãã€ã«ææ³2ã圹ç«ã¡ãŸãã 倧ãŸãã«èšãã°ãç¹å¥ãªããŒã«ã䜿çšããŠãES6ã³ãŒããES5ç°å¢ã§åäœããåçã®ïŒãŸãã¯ããã«è¿ããã®ïŒã«å€æããŸãã
äŸãšããŠãççž®ãããããããã£å®çŸ©ã䜿çšããŸãïŒç¬¬2ç« ã®ããªããžã§ã¯ããªãã©ã«ã®æ¡åŒµãã»ã¯ã·ã§ã³ãåç §ïŒã ES6ã§è¡ãæ¹æ³ã¯æ¬¡ã®ãšããã§ãã
var foo = [1,2,3]; var obj = { foo // 'foo: foo' }; obj.foo; // [1,2,3] () : var foo = [1,2,3]; var obj = { foo: foo }; obj.foo; // [1,2,3]
ãã®ãããªå°ãããŠã䟿å©ãªå€æã«ãããåãååã®å Žåããªããžã§ã¯ããªãã©ã«fooïŒfooã®å®£èšãfooã«æžããããšãã§ããŸãã ãã®å Žåã®ãã©ã³ã¹ã³ã³ãã€ã©ã®ã¢ã¯ã·ã§ã³ã¯ããªã³ãã£ã³ã°ãçž®å°ãããã³ãã®ä»ã®åæ§ã®æäœã«äŒŒãçµã¿èŸŒã¿ã¯ãŒã¯ãããŒã§ãã
ã·ã ã©ã€ãã©ãª
ãã¹ãŠã®æ°ããES6æ©èœã«ãã©ã³ã¹ã³ã³ãã€ã©ãå¿ èŠãªããã§ã¯ãããŸããã Shimã©ã€ãã©ãªãšãåŒã°ããããªãã£ã«ã¯ãæ°ããç°å¢ããå€ãç°å¢ãžã®åäœãå®çŸ©ããããã®ãã¿ãŒã³ã§ãã ããªãã£ãªã³ã°ã¯æ§æã§ã¯èš±å¯ãããŠããŸããããããŸããŸãªAPIã«äœ¿çšã§ããŸãã
2ã€ã®å€ã®å³å¯ãªç䟡æ§ããã¹ãããããã«èšèšãããæ°ããObject.isïŒ..ïŒã¡ãœãããèŠãŠã¿ãŸãããããã ãã===æŒç®åãNaNããã³-0ã«å¯ŸããŠæã€è©³çŽ°ãªäŸå€ã¯ãããŸããã Object.isïŒ..ïŒã¡ãœããã®ããªãã£ã«ã¯éåžžã«ç°¡åã§ãã
if (!Object.is) { Object.is = function(v1, v2) { // '-0' if (v1 === 0 && v2 === 0) { return 1 / v1 === 1 / v2; } // 'NaN' if (v1 !== v1) { return v2 !== v2; } // return v1 === v2; }; }
ãã¹ãŠã®æ°ããJSãããžã§ã¯ãã«å«ããã¹ãçŽ æŽãããES6 Shimã³ã¬ã¯ã·ã§ã³ããããŸãã
JSã¯ç¶ç¶çãªéçºãåŸ ã£ãŠããããã©ãŠã¶ã®æ°ããæ©èœã®ãµããŒãã¯ã倧ããªãã©ã°ã¡ã³ãã§ã¯ãªããå©çšå¯èœã«ãªã£ãæç¹ã§åŸã ã«å®è£ ããããšæ³å®ãããŠããŸãã ãã®ãããé¢é£æ§ãç¶æããããã®æè¯ã®æŠç¥ã¯ãããŒã¿ããŒã¹ã«ã³ãŒããè¿œå ãããã«ãããã»ã¹ã«ãã©ã³ã¹ã³ã³ãã€ã«ãå«ããéçºè ãåžžã«å€æŽã«å¯Ÿå¿ã§ããããã«ããããšã§ãã
ä¿å®çã«èããæ°ããæ©èœã䜿çšããã«åäœãããã¹ãŠã®ãã©ãŠã¶ãŒãæ¶ãããŸã§å»¶æãã人ã¯ãåžžã«ã¯ããã«é ãããšãã§ãããã JavaScriptã³ãŒãã®èšè¿°ãããå¹ççã§åççã§ä¿¡é Œæ§ã®é«ããã®ã«ãããã¹ãŠã®é©æ°ã¯ããããããã€ãã¹ããŸãã
ãŸãšãããš
å·çæç¹ã§ã¯ãES6æšæºãç»å Žããã°ãããªã®ã§ãåŠã¶ã¹ãããšããããããããŸãã ãã ããJavaScriptèšèªã®éçºã®æ°ããããŒãžã§ã³ã«åŸã£ãŠãã¯ãŒã«ããã¥ãŒãåæ§ç¯ããããšãã¯ããã«éèŠã§ãã æšæºã®å€æŽãæ¿èªããå ¬åŒææžãäœå¹ŽãåŸ ã€çŸ©åã¯éå»ã®ãã®ã§ããã¹ãã§ãã
çŸåšãæ°ããJavaScriptæ©èœã¯ãã©ãŠã¶ã«è¡šç€ºãããåŸããã«å®çŸãããããã«äœ¿çšãéå§ããããçºä¿¡åè»ã«é£ã³ä¹ãããšããŠéå¹ççã«è¡åãç¶ãããã¯ããªã次第ã§ãã JavaScriptãä»ã®åœ¢åŒããšã£ãŠãããããŸã§ã«ãªãã»ã©éããªããŸãã ãã©ã³ã¹ã³ã³ãã€ã©ãšããªãã£ã«ã¯ãåžžã«èšèªéçºã®æåç·ã«ãšã©ãŸãããšãå¯èœã«ããããŒã«ã§ãã
JavaScriptã®æ°ããçŸå®ãåãå ¥ããå¿ èŠããããŸããéçºè ã¯ãåŸ æ©ããã¢ã¯ãã£ããªããžã·ã§ã³ã«ç§»è¡ããããšã匷ãæšå¥šãããŸãã ãããŠãããã¯ãã¹ãŠES6ã®ç 究ããå§ãŸããŸã
»æ¬ã®è©³çŽ°ã«ã€ããŠã¯ãåºç瀟ã®ãŠã§ããµã€ããã芧ãã ãã
» ã³ã³ãã³ã
» æç²
ããŒã«ãŒåãã¯ãŒãã³25ïŒ å²åŒ-ES6