æè¿ãæã JavaScriptããŒãã«æ»ããŸãã ç§ãã¡ã¯ãES6æšæº ïŒKyle SimpsonïŒã«ç¹åããã·ãªãŒãºãYou Do n't Know JSãã®æ¬¡ã®æ¬ã«ç¹ã«èå³ããããŸããã

ãšããã§ã誰ãããã§ã«Adam Boduhã®æ°ããæ¬ã JavaScript at Scale ããããèŠãŠããã·ã¢èªã§èŠãããšæã£ãŠãããããããŸããã

ããã«ã€ããŠã¯èª¿æ»ã§ã ãããŠãã¢ã³ããŒã«ãã-Cody Lindleyæ°ã«ããéèŠãªïŒ1æïŒèšäºã§ãJavaScriptã®äžçãã©ã®ããã«å€åããæºåãã§ããŠããããèããã®ã«åœ¹ç«ã¡ãŸãã
倧äŒæ¥åãã®JavaScript Webéçºã®äžçã§ã¯ãå°ãªããšãECMAScript 3ïŒES3æšæºïŒã®æ¡ä»¶äžã§æ©èœãããããªãœãªã¥ãŒã·ã§ã³ãäœæãããããŒã«ã䜿çšãããŸãã ããªãã«ã¯é©ãã®æš©å©ããããŸã-ããããããã¯ã©ã®ããã«ã§ããŸããïŒ æçµçã«ãECMAScript 5ã¯2011幎6æã«æºåãæŽããIE 9ïŒ strictã¢ãŒããé€ãïŒãå«ããã¹ãŠã®ææ°ãã©ãŠã¶ãŒã§ãµããŒããããŠããŸã ã
ãã®èšäºã§ã¯ã倧äŒæ¥ã®ãã¹ãŠã§ã¯ãªãã«ããŠãå€ãã®JavaScriptéçºè ããŸã ES3ãæ€èšããå¿ èŠãããçç±ã«ã€ããŠèª¬æããES5 / ES6æ©èœãä»æ¥äœ¿çšããã人ã®ããã®ããã€ãã®æŠç¥ã«ã€ããŠã説æããŸãã æåŸã«ããªãèªåã§ãããªãã®ãã説æããŸãã
IE8ã¯ãŸã ããã«ãããŸãã ããã«æ £ããŠãã ããã
IE 8ã7ãããã«ã¯6ã®ãµããŒãã¯ãäŸç¶ãšããŠäŒæ¥ã®é¢é£èŠä»¶ã§ããå¯èœæ§ããããŸãã ããªãããããæããã©ãããããªããããã«åæãããã©ãã-ããã¯ããã§ãã èšãæããã°ãæŠéã³ãŒãã§JavaScript ES5ãŸãã¯ES6ã®æ©èœã䜿çšããããšã¯ãå€ãã®äŒæ¥ç°å¢ã§ã¯ãŸã æªæ¥ã®ããšã§ãã
ååãšããŠãäŒæ¥ã®éçºè ãäœæããã³ãŒããšåœŒãã䜿çšããããŒã«ã¯ãES3ç°å¢ããµããŒãããå¿ èŠããããŸãã ããšãã°ãKendo UIã®ã»ãšãã©ã®ãŠã£ãžã§ããïŒã¢ãã€ã«ãŠã£ãžã§ãããé€ãïŒã¯IE7 +ã§ãã¹ãããã³ãµããŒããããŠããŸãã äŒæ¥ã®éçºè åãã«æžãããã»ãšãã©ãã¹ãŠã®JavaScriptãœãªã¥ãŒã·ã§ã³ã®ç°¡åãªèª¿æ»ã§ããããããã®ãœãªã¥ãŒã·ã§ã³ã®ã»ãšãã©ã¯ES3æšæºãèæ ®ããŠäœæãããŠãããšç¢ºä¿¡ããŠããŸãã
ããã¯ãäŒæ¥éçºã«æãæãã人ãé©ãããã¹ãã§ã¯ãããŸããã ãã ãã ææ°ã® JavaScriptããŒã«ïŒAngular 1.3ãªã©ïŒã®å€ãã¯ãçŽç²ãªES3ç°å¢ã§ã®çæ³çãªåäœã«é¢ä¿ãªããã¹ãããã³éçºãããŠããããããŸã£ããæ ¹ä»ããŠããªãå¯èœæ§ããããšããäºå®ãç解ããã®ãé£ããå ŽåããããŸãã å°ãªããšãã圌ãã¯æ·±å»ãªãã©ãã«ãåŒãèµ·ãããåé¿çãšããªãã£ã«ãå¿ èŠãšããŸãã
ä»æ¥ãäŒæ¥ã®ããŒã«ã¯ãããã°ã©ããçŽé¢ã§ããæãè€éãªã¿ã¹ã¯ã®ã¿ã解決ããããã«ãéåžžã«ä¿¡é Œæ§ãé«ããäžæµã®ãå®çžŸã®ãããéå©ãªãã®ãšããŠèªèããã称è³ãããããšããããããŸãã ãããçŸå®ã«ã¯ããšã³ã¿ãŒãã©ã€ãºJavaScriptã³ãŒããšé¢é£ããŒã«ã®ã»ãšãã©ã¯ã16幎åã«å®æããä»æ§ã«åºã¥ããŠèšè¿°ããã³æšæºåãããŠããŸãã
ééããªããES3æšæºã¯æãçµãŠãã¹ããããŠããŸããã倧äŒæ¥ãžã®é«ãä¿¡é Œæ§ãšé©åæ§ã«ã€ããŠã¯ãçŸåšã®JavaScriptéçºè ã®å€ããè°è«ã§ãããšæããŸãã æçµçã«ãæ°ããES5ããã³ES6ä»æ§ã®æ©èœã¯ãå®çŸ©äžãES3ã®æ¬ é¥ãä¿®æ£ããçŸåšçŽé¢ããŠããè€éãªåé¡ã解決ããããã®ææ°ã®JavaScriptã®ããã«ç¹å¥ã«äœæãããŸããã ããã«ã16幎åã«å®çŸãããåãªãæ©äŒã ãã§ã¯ãçŸä»£ã®JavaScriptéçºã«ã¯äžååã§ããããšã«çãã®äœå°ã¯ãããŸããã
éçºè åãã®ã¢ã¯ã·ã§ã³ãã©ã³ã¯äœã§ããïŒ
倧äŒæ¥ã®å¹³åçãªJavaScriptéçºè ã«ãšã£ãŠããããã©ãã»ã©æ²èŠ³çã§ãããæ³åããŠã¿ãŠãã ããã JavaScriptã®å°é家ãšããŠãç§èªèº«ãæçµçãªéçºãšå®è£ ãåŸ ããã«ããã¹ãŠã®ååãæ°ããJavaScriptæ©èœã®äœ¿çšãéå§ã§ããããã«ããããšèããŠããŸãã ãã©ãŠã¶ãšäŒæ¥ãæ°ã«ãªããŸãïŒ
ããããæãŸãããã®ãšå®éã®ãã®ãšã®éã«ã¯å€§ããªéãããããŸãã ã ãããããæ°ããæ©èœãã·ãã¥ã¬ãŒãããããã«ããªãã£ã«ãäœæããã人ã ã¯å€ããã©ãŠã¶ãŒçšã«JavaScriptãã³ã³ãã€ã«ããããã¯ã©ã€ã¢ã³ãã³ãŒããããããããŠNodeãåŠç¿ãããããŸãã ç¬ã£ãŠã¯ãããŸãããããã¯èµ·ãããŸãã ã¯ã©ã€ã¢ã³ããšãã©ãŠã¶ã¯æ¬åœã«éçºè ãåŒãä»ããããšãã§ããã®ã§ã圌ã¯JavaScriptã®ããè¯ãã©ã³ã¿ã€ã ç°å¢ã®æ¢çŽ¢ã«çã£åããèµ°ããŸãã
çå£ã«ãES3ããŒã«ã䜿çšããES3ç°å¢ã§å®è¡ãããã³ãŒããèšè¿°ããäŒæ¥éçºè ã«ãšã£ãŠæãè³¢ãããšã¯ããã ä»äºãããããšã§ãã ãã€ãå€ããã©ãŠã¶ïŒES3ïŒããµããŒãããããšãå¿ããŠãES5ãŸãã¯ES6ã®ææ°ã®ãã€ãã£ãã³ãŒãã®ã¿ãäœæã§ãããšãã倢ã誰ãæ°ã«ããªããšæããŸãã ãã¡ããããšã³ã¿ãŒãã©ã€ãºéçºè ã¯å€ããã©ãŠã¶ã®æ»ãåŸ ã€å¿ èŠããããŸã-ççŽã«èšã£ãŠãããã¯å€§äŒæ¥ã§ã¯ããã«ã¯èµ·ãããŸããã
ããªãã£ã«ãŸãã¯ã³ã³ãã€ã«ã䜿çšããªãçç±
å人çã«ã¯ã倧èŠæš¡ãªããªãã£ã«ã䜿çšããããšããããšã¯ãªããES5ãŸãã¯ES6ããæ©èœããES3ã³ãŒããäœæããããã®ã³ã³ãã€ã«ã«é ŒããŸããã§ããã ã¯ããæã ããªãã£ã«ã«é ŒããŸããããããªãã£ã«ãŸãã¯ã³ã³ãã€ã«æé ã®å æ¬çãªäœ¿çšã«äŒŽãå°é£ãšã³ã¹ãã«å¯ŸåŠããããšãã§ããŸããã§ããïŒã€ãŸããES5ãŸãã¯ES6ãœãŒã¹ã³ãŒãããES3ã³ãŒããäœæããŸãïŒã èœãšãç©Žãè¿œå ã®ããªãã£ã«ã䜿çšäžã®å¶éãããã³å£ã£ãæ©èœ-ããããç§ã«ããããããªãã£ãçç±ã§ãã ããšãã°ãæ°ãã6to5ã³ã³ãã€ã©ãŒã䜿çšããå Žåã®ES6æ©èœã®äœ¿çšã«é¢ãããã¹ãŠã®è©³çŽ°ã«ã€ããŠèªãã§ã¿ãŠãã ããã
ããã¯ããã®ãããªæ©äŒããã£ããšãã«æ°ããJavaScriptæ©èœã楜ããã ããããã°ã©ã ãããã䜿çšãããããããã§ã¯ãããŸããã åãããšãããŸãã å®éã®ãšãããES3ç°å¢ããã®ãµããŒããå¿ èŠãªå Žåã次ã®ãããªæãæµæã®å°ãªããã¹ãéžæããŸãããã®ãããªããŒã«ã䜿çšããŠãES3ã®ãéå±ãã«ã§ããã ãè¿ãã³ãŒããäœæããŸãã æåŸã«ãããŒã«ãES5 +ãå¿ èŠãšãããšããåãªãäºå®ã¯ãããªãã£ã«ãŸãã¯ã³ã³ãã€ã«ã«é¢é£ããå¥ã®ãµãŒãããŒãã£ãœãªã¥ãŒã·ã§ã³ã«åºæã®æ¡ä»¶äžã§åäœã§ããããšãæå³ããŸãã-ãã¡ããããã®ãœãªã¥ãŒã·ã§ã³ãäºåã«ãã¹ããããŠããããå¿ èŠãªããªãã£ã«ãä»å±ããŠããå Žåæãããªçç±ïŒãã¡ã€ã«ãµã€ãºãåæãè€è£œãªã©ïŒã¯éåžžè¡ãããŸããã
ãã®ãããããªãã£ã«ãã³ã³ãã€ã«ã«é Œãããšã¯ã»ãšãã©ãããŸããã§ããã JavaScriptã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ã¯ãããèªäœãéåžžã«è€éãªäŒæ¥ã ãšæããŸãã 倧èŠæš¡ãªäŒæ¥ãããžã§ã¯ããã³ã¹ãããŸãã¯å®å䞻矩ïŒç¹ã«ãµãŒãããŒãã£ã®å®å䞻矩ïŒã®ããããªå䜵çã¯ãããããéçºã«æ ¹æ¬çãªå©çãããããå Žåã«ã®ã¿æ£åœåãããŸãã ç§ã®ç·Žç¿ã§ã¯ãES3ããŒã¹ã®ã³ãŒãããŒã¹ã«æ°ããJavaScriptæ©èœãè¿œå ããããšã§ããã®ãããªå©çãéæããããšã¯ã§ããŸããã§ãã-ããã¯ãšãŠãé£ããããšã§ãã
ãããã誰ããç§ã«åæããããã§ã¯ãããŸããã ãã¡ãããããããã«è¿œå ã®è€éããæ£åœãªãªã¹ã¯ã®èš±å®¹é床ããããŸãã ãããã£ãŠããã®èšäºã®äžéšãšããŠãç§ãšã¯ç°ãªããåŸã®ä»æ§ã§ç»å ŽããES3ã³ãŒãããŒã¹ã§ãã®ãããªæ©èœã䜿çšããããšã«ãããšæããŸãïŒæ³šïŒãµãŒãããŒãã£ã³ãŒãã®ããªãã£ã«ã«ã€ããŠè©±ããŠããïŒã
äŒæ¥ã§æ°ããES6 + JavaScriptæ©èœã掻çšããããã®æŠç¥
ãã®èšäºã®æ®ãã®éšåã§ã¯ããšã³ã¿ãŒãã©ã€ãºã§æ°ããES6 + JavaScriptæ©èœã䜿çšããããã®3ã€ã®æŠç¥ã«ã€ããŠèª¬æããŸãã
æŠç¥1.æ¿å ¥ãããããªãã£ã«ã®é©çš
ES3ç°å¢ãES5ããã³ES6æšæºïŒããã«ã¯ES7ããïŒã®æ©èœã§æºãããªãã®ã¯éåžžã«ç°¡åã§ã-HTMLããã¥ã¡ã³ãã«core.jsãããžã§ã¯ãã®shim.jsãã¡ã€ã«ãå«ããã ãã§ãã
shim.js㯠ãå®è¡/解æããæåã®JavaScriptãã¡ã€ã«ãšããŠHTMLããã¥ã¡ã³ãã«å«ãŸããŠãããããã«ç¶ããã¹ãŠã®JavaScriptã³ãŒãã¯ãããªãã£ã«æ©èœããã€ãã£ãã®ãã®ãšããŠäœ¿çšã§ããŸãïŒcore.jsã®ã³ãŒãäŸã以äžã«ç€ºããŸãïŒã
console.log(Array.from(new Set([1, 2, 3, 2, 1]))); // => [1, 2, 3] console.log('*'.repeat(10)); // => '**********' Promise.resolve(32).then(console.log); // => 32 setImmediate(console.log, 42); // => 42
core.jsã¯ãECMAScriptäºæã®ããªãã£ã«ã®å®å šãªã»ãããæäŸããã ãã§ãªããshim.jsã®ä»£ããã«core.jsã䜿çšããå Žåã«å©çšã§ãã次ã®éæšæºJavaScriptæ©èœãæäŸããããšã«æ³šæããŠãã ããã
- Mozilla JavaScriptïŒé åãžã§ããªãã¯
- setTimeout / setInterval
- setImmediate
- ã³ã³ãœãŒã«
- 察象
- å£è¿°
- éšåé©çš
- æ¥ä»ã®ãã©ãŒããã
- é å
- æ°
- ãšã¹ã±ãŒãæå
æŠç¥2.ãªããã€ã³ååã®äœ¿çš
奜ããšå¥œãŸãããšã«ããããããäžèšã®ãã©ã°ã€ã³ããªãã£ã«ã¯ãå®è¡æã«ESç°å¢ã«æ°ããæ©èœãè¿œå ããŸãã ãã¹ãŠã®ã³ã¹ãã§ã ãããããªãã«åããªãå Žåãå¥ã®ãªãã·ã§ã³ããããŸãã core.jsãããžã§ã¯ãã¯ãæ°æ©èœãå®è£ ããæ瀺çãªãªããã€ã³polizolneniyaãæäŸããŸããããããã®æ©èœã¯éžæçã«äœ¿çšã§ãããããããåå¥ã«ã¢ã¯ãã£ãåã§ããŸãã åæ§ã®æ¹æ³ã¯ãlodashã®ãããªã©ã€ãã©ãªã§äœ¿çšãããŸããlodashã¯ã1ã€ã®ã°ããŒãã«å€ïŒ_ãªã©ïŒãæäŸãããã¹ãŠã®å¯èœæ§ãçµã³ä»ããããŠããŸãã
ã³ãŒãã§ES5ããã³ES6ãæ瀺çã«æå¹ã«ããã«ã¯ãcore.jsã®library.jsãã¡ã€ã«ãå«ããããšãã§ããŸãã 次ã«ããcoreãã®ã°ããŒãã«å€ã«é¢é£ä»ããããŠããã¡ãœããã®æ©èœã«å¯Ÿå¿ããã³ãŒããèšè¿°ããããšã«ãããå¿ èŠã«å¿ããŠæ°ããECMAScriptæ©èœãé©çšã§ããŸãã åæ§ã®ç¶æ³ã¯ã次ã®ã³ãŒããµã³ãã«ã§å®è£ ãããŠããŸãïŒäŸã¯core.jsããåãããŠããŸãïŒã
var log = core.console.log; log(core.Array.from(new core.Set([1, 2, 3, 2, 1]))); // => [1, 2, 3] log(core.String.repeat('*', 10)); // => '**********' core.Promise.resolve(32).then(log); // => 32 core.setImmediate(log, 42); // => 42
æŠç¥3. ES3ã®ããªãã£ã«ã®ä»¥äžã®é©çšã«ããES6 + ES5ã®äºåã³ã³ãã€ã«
ES5ããã³ES6ã®æšæºæ©èœãES3ã³ãŒãã«çŽæ¥ã³ã³ãã€ã«ããããšã¯ã§ããŸããïŒããšãã°ãå€ãæ©èœã䜿çšããŠæ°ããåçã®æ©èœãäœæãããªã©ïŒã ããã§ãªããã°ãããªãã¯ãããã®æ©äŒãçå£ã«å¶éããŸãã æŸéããããšãã§ããŸãã ES6ã³ãŒããES5ã«ã³ã³ãã€ã«ãããããªã³ã³ãã€ã«ã¹ããŒãžã䜿çšãããã©ã°ã€ã³polyfill shim.jsã䜿çšããŠES3ãžã®æåŸã®ã¢ããã°ã¬ãŒããå æããã®ãçŸå®çã§ãã
ãããè¡ãã«ã¯ãæ°ãã6to5ãã©ã³ã¹ãã€ã©ãŒã䜿çšããŠãgulpã䜿çšããäºåãã«ãã¿ã¹ã¯ãäœæããŸããgulpã¯ãES6ãæªä¿®æ£ïŒããã©ïŒES5ã«å€æããŸãã 次ã«ã6to5ã®ããã¥ã¡ã³ãã«ãããšã ES6ã®æ¬æ Œçãªã©ã³ã¿ã€ã ç°å¢ãååŸããã«ã¯ã åçæã©ã³ã¿ã€ã ã shim.js ã ES6ã¢ãžã¥ãŒã«ããŒããŒã㪠ãã£ã«ã䜿çšããŠãã®ç°å¢ãæºåããå¿ èŠããããŸã ïŒæ³šïŒcore.jsã®client / shim.jsã䜿çšããŸãã ES3ãµããŒããæäŸãããŸãïŒã
6to5ã§ã³ã³ãã€ã«ãããã³ãŒããå«ãHTMLãã¡ã€ã«ã¯æ¬¡ã®ããã«ãªããŸãã
<!DOCTYPE html> <html> <body> <script src="runtime.js"></script> <script src="client/shim.js"></script> <script src="es6-module-loader.js"></script> <script> System.parser = '6to5'; // es6-module-loader.js 6to5 // , 6to5 </script> </body> </html>
åçšã³ãŒãã§ãããè¡ãå Žåã¯ã èãããã ãã¹ãŠã® ãã¥ã¢ã³ã¹ã 絶察ã«æ¢çŽ¢ããããšã匷ããå§ãããŸãã
ãµãŒãããŒãã£ã®ã³ãŒãã¯ã©ãã§ããïŒ
çè«çã«ã¯ãES3ç°å¢ã§æ°ããJavaScriptæ©èœã䜿çšããããã«ã³ãŒããããªã³ã³ããªãŒããŸãã¯ããªãã£ã«+ããªã³ã³ãã€ã«ããŠããå ŽåãES5 +ç°å¢ã§ã®ã¿åäœãããµãŒãããŒãã£ããŒã«ãå®å šã«äœ¿çšã§ããŸããïŒ ããïŒ
ES3ç°å¢ã§ãµãŒãããŒãã£ããŒã«ãå®å šã«äœ¿çšã§ããããã«ããå¯äžã®ãªãã·ã§ã³ã¯ããµãŒãããŒãã£ã³ãŒãã¬ãã«ã§ç¹å®ã®ããªãã£ã«/ã³ã³ãã€ã©ãçŽæ¥ãµããŒãããããšã§ãã ãã以å€ã®å Žåããã®ã»ã¯ã·ã§ã³ã®æåã®æ®µèœã®åæã¯éåžžã«æãã§äžæçãªãŸãŸã§ãã å€ãç°å¢ãžã®æ°ããæ©äŒã®ãã®ãã¹ãŠã®æåºã¯ãç¹å®ã®èœãšãç©Žãè€éãªããªãã¯ãããã³å人çãªæèŠã«é¢é£ããŠããŸãã ãããã®éçºè ãããªãã®ç°å¢ã«æ£ç¢ºã«é©å¿ããŠããããšãå人çã«ç¢ºèªããŠããªãéãããµãŒãããŒãã£ã®éçºè ããã®ãããªè©³çŽ°ã«å¯ŸåŠãããšæ³å®ããªãã§ãã ããã ããããããªãå Žåã¯ããµãŒãããŒãã£ã®éçºè ãããªãã£ã«ãšã³ã³ãã€ã«æžã¿åºåããã¹ãããå¯èœæ§ã¯äœãããšã«çæããŠãã ããã ååãšããŠããµãŒãããŒãã£ã³ãŒãã®è§£æã«ES5 +ç°å¢ãå¿ èŠãªå Žåãå®éã®ES5 +ç°å¢ãæå³ããŸãã