Angular 2018å¹´é²è·¯äºæ³
ãã®è¨äºã¯ Angularã¢ããã³ãã«ã¬ã³ãã¼2017 ã®1æ¥ç®ã®è¨äºã§ãã
ããã«ã¡ã¯ãlacoã§ããAngular 2.0.0ã®ãªãªã¼ã¹ãã1年以ä¸çµéããSemVerã«ããã¢ãããã¼ãããªã·ã¼ãã¿ã¤ã ãã¼ã¹ã®ãªãªã¼ã¹ã¹ã±ã¸ã¥ã¼ã«ã®éç¨ãããã£ããè»éã«ä¹ã£ã¦å®çãã¦ãã¾ãããã¡ã¸ã£ã¼ãã¼ã¸ã§ã³ã2ãã5ã¸ä¸ãããæ¥å¹´ã«ã¯6ã7ã¨ã¢ãããã¼ããç¶ãããã¦ããã¾ãã
ãã®è¨äºã§ã¯2017å¹´ã®Angularã®åããæ¯ãè¿ãã¤ã¤ã2018å¹´ã®Angularãé²ãã§ããé²è·¯ã«ã¤ãã¦ãçè ãç¥ãæ å ±ãå ã«äºæ³ãã¾ãã
2017å¹´ã®Angular
2017å¹´ã«èµ·ãã£ãåºæ¥äºãæ¯ãè¿ããªãããAngularãé²ãã§ããæ¹åãå確èªãã¾ãããã
1æ: ãã©ã³ãã£ã³ã°ã¬ã¤ãã©ã¤ã³ã®çå®
ããã¾ã§ âAngular2â ã âAngularJS 2â ãªã©å称ãå®ã¾ã£ã¦ããªãã£ãæ°ããAngularã«ã¤ãã¦ããã©ã³ãã£ã³ã°ã®ã¬ã¤ãã©ã¤ã³ãæ£å¼ã«çå®ãããã®ã2017å¹´1æã®ãã¨ã§ãã #ItsJustAngular ã¨ããããã·ã¥ã¿ã°ãä½ãããAngular2ã§ã¯ãªãAngularã¨å¼ã¶ããã«ãä¸ççã«çµ±ä¸ãé²ãããã¾ããããã¾ã§ã¯ããªãå®çãã¦ãã¾ãããã
3æ: Angular 4.0.0ã®ãªãªã¼ã¹
2.0.0ã®ãªãªã¼ã¹ããåå¹´ãçµéããäºå®éãã¡ã¸ã£ã¼ãã¼ã¸ã§ã³ã4.0.0ã«ã¢ãããã¼ãããã¾ãããã¡ãªã¿ã«v2ã®æ¬¡ãv4ã§ãããã¨ã¯2016å¹´12æã®æç¹ã§çºè¡¨ããã¦ãã¾ããã
4.0ã§å°å
¥ããã *ngIf
ã *ngFor
ã® as
ãµãã¼ãã¯Observableãæ±ãä¸ã§æ¬ ãããªãå½ããåã®æ©è½ã«ãªãã¾ããããAngular Universalãã移æ¤ããã platform-server
ããã±ã¼ã¸ããã£ããå®å®ãã¾ãããAngularã«ãªã£ã¦ããã¯ããã¦ã®ã¡ã¸ã£ã¼ãã¼ã¸ã§ã³ã¢ããã§ãããã大ããªæ··ä¹±ã¯ãªãå°ãæåæãããã»ã©ã§ããã
4æ: GoogleãTypeScriptã社å æ¨æºè¨èªã«æ¡ç¨
ng-conf 2017ã§ã¢ãã¦ã³ã¹ããããã®ãã¥ã¼ã¹ã¯Angularã³ãã¥ããã£ãè¶ãã¦éçºè ãã¡ã®éã«æ³¢ç´ãå¼ã³ã¾ãããAtScriptã®æ代ããç´ä½æ²æãçµã¦TypeScriptãæ¡ç¨ããAngularãã¼ã ã¯ãTypeScriptãã¼ã ã¨å ±åã§AoTã³ã³ãã¤ã©ãLanguage Serviceãªã©ã®éçºã«åãçµãã§ãã¾ããããã®é ããAngular以å¤ã®æèã«ããã¦ããGoogleããTypeScriptã¸ã®ã³ã³ããªãã¥ã¼ã·ã§ã³ãå¢ãã¦ãã¾ããæè¿ã§ã¯Bazelã®TypeScriptç¨ãã«ãã«ã¼ã«ããgtsã¨ããGoogle製ã®TypeScriptãã©ã¼ããã¿ã¼ãå ¬éããããããããGoogle社å ã«ãããTypeScriptéçºãã¼ã«ã®ãªã¼ãã³ã½ã¼ã¹åãå§ããããã§ãããã
7æ: Angular 4.3ã®ãªãªã¼ã¹ãHttpClientã®å°å ¥
v4.3ã¯ããæå³ã§ã¯v4.0ã®ãªãªã¼ã¹ããã大ããªå½±é¿ãããã¾ãããããã¾ã§ã®æ¨æºããã±ã¼ã¸ã§ãã£ã @angular/http
ããã±ã¼ã¸ã«ããããæ°ãã @angular/common/http
ããã±ã¼ã¸ã§æä¾ãããHttpClient APIãå°å
¥ããã¾ãããå®ã¯v4.0ã®æç¹ã§ãªãªã¼ã¹ãããè¨ç»ã ã£ãã®ã§ãããå®è£
ãé·å¼ãã¦v4.3ã§ã®å°å
¥ã«ãªãã¾ããã
10æ: Angular Labsã®çºè¡¨
10æã«éå¬ãããAngularMixã¨ããã¤ãã³ãã§ã Angular Labs ã¨ããæ°ããåãçµã¿ã«ã¤ãã¦çºè¡¨ããã¾ãããAngular Labsã¯å®é¨çãªæ©è½ã®ç·ç§°ã§ãMaterialãã¼ã ã®Component Dev KitããBazelã¨Closure Compilerãçµã¿åããããã«ãã·ã¹ãã (ABCããã¸ã§ã¯ã)ãCLIãã¼ã ã®Schematicsãªã©ãå«ã¾ãã¾ããã¾ããAngularã³ã³ãã¼ãã³ããWeb Componentsåãã Angular Elements ããã¸ã§ã¯ãã«ã¤ãã¦ãåæã«çºè¡¨ãããã¾ããã
11æ: Angular 5.0.0ã®ãªãªã¼ã¹
v5.0ã§ã¯DatePipeãã¯ããã¨ããå¹¾ã¤ãã®ãã¤ãã«ç ´å£çãªå¤æ´ãå ããã¾ãããv5.0ã§ã®å¤æ´ã«ã¤ãã¦ã¯æ¬¡ã®ã¹ã©ã¤ããåç»ã§è§£èª¬ãã¦ãã¾ãã
2018å¹´ã®Angular
2017å¹´ï¼ã¾ã 1ã¶ææ®ã£ã¦ãã¾ããï¼ã®Angularã«ã¤ãã¦å¤§ããªã¤ãã³ããæ¯ãè¿ãã¾ãããã2016å¹´ã®ã¢ããã³ãã«ã¬ã³ãã¼ã®æå¾ã§è¿°ã¹ãã2017å¹´ã®Angularãã¨ããã»ã¯ã·ã§ã³ã®å 容ã¯ã©ãã»ã©å½ãã£ã¦ããã®ã確èªãã¦ã¿ã¾ãã
Service Workerã¨PWAs
mobile-toolkitã¯ã»ã¼åãããªãã¾ã¾ã§ãService Workerã ãã angular/service-worker
ããã±ã¼ã¸ã ããåé¢ããã¦ã³ã¢ãªãã¸ããªã«åæµãã¾ãããããããå½ããã¾ããã§ãããã
ngIfã®æ°æ©è½
ããã¯è¥å¹²æ§æã®å¤æ´ã¯ããã¾ããããã»ã¨ãã©ãã®ã¾ã¾å ¥ãã¾ããã
DOM Eventã®Cold Observableåã·ã³ã¿ãã¯ã¹ãµãã¼ã
ããã¯å®å ¨ã«ä½ãåãã¾ããã§ãããç³ã訳ãªã ð
4.0ã«åãã¦ä»ããã§ãããã¨
ããã«ã¤ãã¦ã¯ããCLIã«ã§ããããã¸ã§ã¯ãã¯CLIã«ãã¦ããã¾ããããã¨ããã¢ããã¤ã¹ã¯ééã£ã¦ããªãã£ãã¨ç¢ºä¿¡ãã¦ãã¾ããv4ãv5ã¨ãã¼ã¸ã§ã³ã¢ãããé²ããã³ã«ãAngular CLIã¯ã©ãã©ãå¼·åã«ã便å©ã«é²åãã¤ã¥ãã¦ãã¾ããæè¿ã§ã¯å ¬å¼ããã¥ã¡ã³ã (https://angular.io) ã®ã¯ã¤ãã¯ã¹ã¿ã¼ãããã¥ã¼ããªã¢ã«ã«ã¤ãã¦ãå¾æ¥ã®SystemJSãã¼ã¹ããCLIãã¼ã¹ã®ã³ã³ãã³ãã«æ´æ°ããã¾ããããããããCLIãAngularéçºã®ãã¹ããã©ã¯ãã£ã¹ã¨ãã¦åè¨ãã¤ã¥ããã§ãããã
ãã¦ãé·ããªãã¾ããã2018å¹´ã®Angularã«ã¤ãã¦ä»å¹´ãäºæ³ãè¡ãã¾ãã2018å¹´ã¯å¤§ãã2ã¤ã®è»¸ã§Angularã大ããå¤ããã¨è¦è¾¼ã¾ãã¾ãã
第ä¸ã®è»¸: I18nã®å¤§æ¹é
ã²ã¨ã¤ãã¯I18næ©è½ã®å¤§æ¹é ã§ããv2.0ããã²ã£ããã¨åå¨ããå°éãªã¢ãããã¼ããç¶ãããã¦ããAngularã®I18næ©è½ã¯ããã¾ãã¾ãªçç±ã«ããããå ããªéçºè ããå©ç¨ãã¦ãã¾ãããä»å¹´Angularã³ã¢ãã¼ã ã«åå ããOlivier Combe (ocombe)æ°ã¯æåã©ã¤ãã©ãª ng-translate ã®ä½è ã§ããã伸ã³æ©ãI18næ©è½ãçºå±ããããã¨ãã¦ãã¾ãã
次ã®Issueã¯ocombeæ°ã«ããããããã®I18næ©è½ã®ãã¼ããããã§ããv5.0ã§ã¯ã¾ã æªéæã®ãã®ãã»ã¨ãã©ã§ãããv5ç³»ã®ã©ããã§ãã³ãã¬ã¼ãå¤ã®ã½ã¼ã¹ã³ã¼ãä¸ã§ã®I18nããµãã¼ãããäºå®ã§ããã¾ããAoTã³ã³ãã¤ã«æã«ãã¼ã«ã©ã¤ãºããã®ã§ã¯ãªããng-translateã®ããã«ã©ã³ã¿ã¤ã ã§å¤æããããªãæ©è½ãv6ã¾ã§ã«ã¯æå ¥ãããè¦è¾¼ã¿ã§ãã
第äºã®è»¸: åçã¢ããªã±ã¼ã·ã§ã³ã®ãµãã¼ã
ãµãã¤ãã¯åçã¢ããªã±ã¼ã·ã§ã³ã®ãµãã¼ãã§ããããã¾ã§ã®Angularã¯éçãªã¢ããªã±ã¼ã·ã§ã³ãå®å ¨ã«é«éã«æ§ç¯ããã¨ããæ¹éã§ãAoTã³ã³ãã¤ã«ã«åãå ¥ãã¦ãã¾ããããã®æ¹éã«ãããã¤ããã©ã¼ãã³ã¹ã§ã¹ã±ã¼ã©ãã«ãªã¢ããªã±ã¼ã·ã§ã³éçºã¨ã³ã·ã¹ãã ãä½ãä¸ãããã¨ã«æåãã¾ããããå¾æ¥ã®AngularJSã¦ã¼ã¶ã¼ã«å¥½ã¾ãã¦ããã¦ã£ã¸ã§ããçãªã¦ã¼ã¹ã±ã¼ã¹ãWebãã¼ã¸ã®ä¸ã§ãã¤ãããã¯ã«å®è¡ãããããã®ä»çµã¿ã¯ããã¾ããã§ããã
ãã®èª²é¡ã¯Angular v2ã®ãªãªã¼ã¹åããææããã¦ãã¾ããããã³ã¢ãã¼ã ã¯ä¸è²«ãã¦ãã¢ããªã±ã¼ã·ã§ã³ã¯éçã§ããã¹ããåçãªã¦ã£ã¸ã§ããã«é ¼ãã®ããããããã¨éçºè ãã¡ãè«ãã¦ãã¾ãããããããã®æµãã¯å¥ãããã³ã¢ãã¼ã èªèº«ã®æã§æã¡åããããå¾ãªããªãã¾ããAngularå ¬å¼ããã¥ã¡ã³ãã§ãã angular.ioãAngularã§å®è£ ãããªãããã¾ãããããã®å®è£ ã®ããã«å½¼ãã¯åçãªããã¥ã¡ã³ãã³ã³ãã³ãã¨Angularã¢ããªã±ã¼ã·ã§ã³ã®å ±åã®åé¡ã«ããããæ£é¢ããã¶ã¤ããã¾ãããããã¦è¡ãçããã®ã EmbeddableComponent ã¨ããæ³¥èãããã¯ã§ãããã®é¡æ«ã¯Angular Connect 2017ã§èµ¤è£¸ã ã«èªããã¦ãã¾ãã
ã»ãã·ã§ã³ä¸ã§ãè¿°ã¹ããã¦ãã¾ãããããããåçãªã¢ããªã±ã¼ã·ã§ã³ã«å¯¾ãã解決çã¨ãã¦é²ãããã¦ããããã¸ã§ã¯ãã®ã²ã¨ã¤ããAngular Elements ã§ããAngular Elementsã¯Angularã¢ããªã±ã¼ã·ã§ã³ãã²ã¨ã¤ã®Custom Elementsã«åºãã¦ãæ¨æºã®HTMLä¸ã§ã¦ã£ã¸ã§ããã®ããã«é ç½®ãããã¨ãã§ããä»çµã¿ã§ããAngular Elementsã¯v6.0ã§Labsãåæ¥ãã¦Stableã«ãªãªã¼ã¹äºå®ã§ããææ°ã®ã¹ãã¼ã¿ã¹ã«ã¤ãã¦ã¯Angular Connect 2017ã®Rob Wormaldã®ã»ãã·ã§ã³ãè¦ã¾ãããã
ããã¦å®ã¯åçãªã¢ããªã±ã¼ã·ã§ã³ããµãã¼ãããããã®ããã¸ã§ã¯ããããã²ã¨ã¤ããã¾ããããã iv ã§ããivã¯Angularã«ããåçãªãã¥ã¼æ§ç¯ãæ¯æ´ããããã®ã¾ã£ããæ°ããã¢ã¼ããã¯ãã£ã§ããããææã ãmheveryæ°ã®å人ãªãã¸ããªã¨ãã¦å ¬éããã¦ãã¦éçºä¸ã®ã½ã¼ã¹ã³ã¼ããèªããã¨ãã§ãã¾ãããããã¾ã¯éå ¬éã«ããã¦ãã¾ããå®æ ã¯è¬ã«å ã¾ãã¦ãã¾ãã¾ããããå æ¥Chrome Dev Summitã«åå ããéã«å¶ç¶ä¼ã£ãRob Wormaldã«ãã£ããivã«ã¤ãã¦èãã¦ãã¾ããã
Robæ°ããivã¯Angularã®æ°ãããã¥ã¼æ§ç¯ã®ä»çµã¿ã§ããç¾å¨ã®Angularã§ãã¥ã¼ãæ§ç¯ããã«ã¯ãã³ã³ãã¼ãã³ããä½ãã³ã³ãã¼ãã³ãã®ãã³ãã¬ã¼ãã使ãããããã¾ããããivã¯ãã®å£ãæã¡ç ´ãã¾ããã¤ã¡ã¼ã¸ã¨ãã¦ã¯ç¾å¨ã®NgFactoryã®ãããªDOMã®å½ä»¤çãªçµã¿ç«ã¦å¦çãããã¥ã¼ãã³ãªã¼ããã«ã»ã©ã¤ã¿ãã«ãªAPIã§ææ¸ãã§ããä»çµã¿ã§ãã³ã³ãã¼ãã³ããããä½ã¬ã¤ã¤ã¼ãNgFactoryããã¯é«ã¬ã¤ã¤ã¼ãã¨ããä¸éã®å±¤ã¨ãã¦åå¨ãã¾ããivã®ç®çã¯3ã¤ããã¾ãã
- ããé«éã§è»½éãªãã¥ã¼ã¨ã³ã¸ã³ã¨ãªããã¨
- AoTã³ã³ãã¤ã«ããããã¥ã¼ã¨åçãªãã¥ã¼ãå ±åãããã¥ã¼ã®æ§ç¯ãpublic & stableãªAPIã§ææ¸ãã§ãããã¨
- æè»ã§ãã¼ã¿ãã«ãªAPIã¨ãªããã¨
ivã¯Angular Elementsã¨ã¯éã«ãAngularã¢ããªã±ã¼ã·ã§ã³ä¸ã«åçãªãã¥ã¼çµã¿ç«ã¦ãåãè¾¼ãããã®ä»çµã¿ã§ããRobã«ããã¨ãã®ææ³ã¯Emberã«ãããGlimmerã«è¿ããã¨ã®ãã¨ã§ãããã³ã³ãã¼ãã³ãã§ããã£ã¬ã¯ãã£ãã§ããªãæ°ããæ¦å¿µãivã¯v6ã§ã®ãªãªã¼ã¹ãç®æ¨ã«ãã¦ããã¨ã®ãã¨ã§ãçè ã2018å¹´ãã£ã¨ã注ç®ãããããã¯ã§ãã
ã¡ãªã¿ã« iv ã¨ããåå㯠âIsomorphic Viewengineâã§ããï¼ã¨Robã«èããã¨ãããâmaybeï¼ç¬ï¼â ã¨ããæãã§ããã仮称ãªã®ã§åã³è¡¨ã«ç¾ããã¨ãã«ã¯éã£ãååã«ãªã£ã¦ãããã¨ã§ãããã
ããã¶ãé·ããªã£ã¦ãã¾ãã¾ãããã2017å¹´ã®æ¯ãè¿ãã¨ã2018å¹´ã®é²è·¯äºæ³ã¯ãããã§ããã§ãããããé 調ã«ããã°v6ã®ãªãªã¼ã¹ã¯4æé ãã¡ããã©ng-conf 2018ã®ææã«ãªãã¾ããæ¥ã«ã¯äºæ³ãã©ããããå½ãã£ã¦ãããçãåãããã§ãããã§ããã¾ããã¢ããã³ãã«ã¬ã³ãã¼ã®25æ¥ç®ã«ã¯ç¹å¥ã²ã¹ãããã®å¯ç¨¿ãæ²è¼äºå®ã§ãããããããã¨ããã§ããããã¨èªããã¦ãã¾ãããããã¾ãããã楽ãã¿ã«ã
ããã§ã¯ã¿ãªããè¯ããå¹´ãã2018å¹´ãAngularããããããé¡ããã¾ãã
2æ¥ç®ã¯ Quramyããã§ãã