Angular Advent Calendar 2019ã®25æ¥ç®ã®èšäºã§ãã
ãã®èšäºã¯ GDG Tokyoã®DevFest 2019ã§çºè¡šããå
容ããæç²ãå çãããã®ã§ãã
2019幎ãçµãããšããããšã§ãçºè¡šã§ã¯ä»å¹Žäžå¹Žã®Angularã®åããæ¯ãè¿ããæ¥å¹Žä»¥éã®å±æã«ã€ããŠãŸãšããŸããã
ãã®èšäºã§ã¯æ¯ãè¿ãéšåã¯å²æãã2020幎以éã®Angularã®ããŒããããã«ã€ããŠã®ã¿è§Šããããšã«ããŸãã
å
šç¯ããææã®å Žåã¯ã¹ã©ã€ããçŽæ¥åç
§ããŠãã ããã
Roadmap in 2020
2020幎ã®éã«ã¯v9.0ããv11.xãŸã§ã®ãªãªãŒã¹ãè¡ãããäºå®ã§ããå幎ã«äžåºŠã®ã¡ãžã£ãŒããŒãžã§ã³ã¢ããã¯ä»åŸãç¶ç¶ãããŸãã
v9.0ã§ã¯æ¬¡ã®ãããªå€§ããªå€æŽããããŸãã
- Ivyã®ããã©ã«ãæå¹å
- CDK Clipboard APIã®æäŸéå§
- CDK Testing Harnessã®æäŸéå§
- @angular/{youtube-player, google-maps} ããã±ãŒãžã®æäŸéå§
- ãã³ãã¬ãŒãåãã§ãã¯ã®å³å¯åãªãã·ã§ã³æäŸéå§
Ivyãžã®ç§»è¡ã¹ã±ãžã¥ãŒã«
v9.0ã§ã¯ããã¹ãŠã®ã¢ããªã±ãŒã·ã§ã³ã§Ivyã¢ãŒãã§ã®AoTã³ã³ãã€ã«ãããã©ã«ãæå¹ã«ãªããŸãã
ä»åŸv10.xãŸã§ã¯ãªããã¢ãŠãã®ææ®µãçšæãããŸãããv11.0ãæã£ãŠãªããã¢ãŠãã§ããªããªããŸãã11.0ããªãªãŒã¹ãããäºå®ã®2020幎æ«ã«ã¯ããã¹ãŠã®Angularã¢ããªã±ãŒã·ã§ã³ãIvyã«ããã³ã³ãã€ã«ããããªã£ãŠããããšãç®æšã«ããŠããŸãã
CDKã®æ°ããAPI
Clipboard APIã¯æååãã¯ãªããããŒãã«ã³ããŒã§ãããã®ã§ãããã³ãã¬ãŒãå ã§äœ¿ãããã£ã¬ã¯ãã£ã圢åŒã®APIãšãã¯ã©ã¹å ã§äœ¿ãããµãŒãã¹åœ¢åŒã®APIã®äž¡æ¹ãæäŸãããŠããŸãã
ã³ã³ããŒãã³ãã®ãã¹ãããµããŒãããããã® ComponentHarness
APIãæ°ããæäŸãããŸãã ComponentHarness
ã䜿ãããšã§ãã³ã³ããŒãã³ãã®ãã¹ããã¡ã³ããã³ã¹ããããèšè¿°ã§ããŸãã
ãã¹ããããã³ã³ããŒãã³ãã«å¯Ÿå¿ããHarnessãå®çŸ©ãããã®Harnessã«å¯Ÿãããã¹ããæžãããšã§ããã¹ãã§ã¯ã³ã³ããŒãã³ãã®å®è£
ã®è©³çްã«äŸåããã«å®£èšçãªãã¹ããæžããŸããåæã«Harnessã®å®è£
ã§ã¯ DebugElement
ã ComponentFixture
ãªã©ã®APIã䜿ãããã圢ã«é èœãããŠããŸããAngular Materialã®ãœãŒã¹ã³ãŒãã§ã¯ããã¹ãŠã®ã³ã³ããŒãã³ããHarnessã«ãããã¹ãã«åãæ¿ããããŠããŸãã
Angular official components
AngularéçºããŒã ã«ããå ¬åŒã³ã³ããŒãã³ãã©ã€ãã©ãªãæ°ãã«æäŸãããŸãã
v9.0æç¹ã§ã¯YouTubeãã¬ã€ã€ãŒã衚瀺ãã @angular/youtube-player
ããã±ãŒãžãšã Googleãããã衚瀺ãã @angular/google-maps
ããã±ãŒãžãæäŸãããŸãã
Strict Template Type-Checking
Ivyã³ã³ãã€ã«ã®æå¹åã«ãã£ãŠããã³ãã¬ãŒãã®é ã ãŸã§åãã§ãã¯ã§ããããã«ãªããŸãããããåŸæ¹äºææ§ã®ããã«v9.0ã«ãããŠã¯å³å¯ãªãã³ãã¬ãŒãåãã§ãã¯ã¯ãªãã·ã§ã³ã§æäŸãããŸãã
tsconfig.json
ã® angularCompilerOptions
ã§ strictTemplates
ãã©ã°ãæå¹ã«ãããšãTypeScriptã® strictã¢ãŒãã«è¿ãå³å¯ãã§ãã³ãã¬ãŒãåãã§ãã¯ããããªãããŸãã
代衚çãªãã®ã§ã¯ãã€ãã³ããã³ãã©ãŒã® $event
倿°ã®åãã§ãã¯ãInputã®åãã§ãã¯ãã³ã³ããŒãã³ãã¡ãœããã®åŒã³åºãåãã§ãã¯ãªã©ãå³å¯ã«ãªããŸãã
Imagine the Future
v9.0以éã®Angularã®å±æã¯Angularã®Valuesã軞ã«ããŠäºæ³ã§ããŸããã€ãŸãã
- Apps that users †to use
- Apps that developers †to build
- Community where everyone feels welcome
ã®3ã€ã§ãããªãã§ãã²ãšã€ãã® "Apps that users †to use"ã2020幎ã®å€§ããªç®æšã«ãªããšèããŠããŸãã
ng-conf 2019ã®keynoteããã¹ã©ã€ããåŒçšãããšã2018幎ãã2019幎ã«ãããŠãAngularã®äž»ãªãŠãŒã¹ã±ãŒã¹ã¯ãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã§ããã
ãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã¯æ°ã¯å€ãã§ãããã²ãšã€ã²ãšã€ã®ã¢ããªã±ãŒã·ã§ã³ã®ãŠãŒã¶ãŒã¯ããã»ã©å€ããããŸããã
ãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã®éçºãæ¯ããããã«AngularãæäŸããŠããã®ã¯çç£æ§ãšã¹ã±ãŒã©ããªãã£ã§ããAngular CLIã«ããã³ãŒãçæãäºåã³ã³ãã€ã«ããã«ãããã¹ãã®èªååã¯ããŒã éçºã®æ°Žæºãé«ããŠãããŸããHTML/CSSã«ããUIéçºã¯å€ãã®éçºè ã®æ £ã芪ããã æè¡ã¹ã¿ãã¯ã§ãã
éçåãã§ãã¯ãåããŒã¹ã®Dependency Injectionã·ã¹ãã ãã¹ã±ãŒã©ããªãã£ãéèŠãªéçºãŠãŒã¹ã±ãŒã¹ãæ¯ããŠããŸããã
2019幎ã®AngularãIvyãéããŠåãçµãã ã®ã¯ããŸã å±ããŠããªããŠãŒã¹ã±ãŒã¹ãã«ããŒããããšã§ããããŸãã¯ããã«åãçµãã ã®ã¯ã«ãžã¥ã¢ã«ãªãŠãŒã¹ã±ãŒã¹ã§ãã
ãã¢ããããã¿ã€ããææãªã©ãŠãŒã¶ãŒæ°ã¯å°ãªããã®ã®ãäœåºŠãé«éã«ãç°¡åã«äœãå¿ èŠã®ããã¢ããªã±ãŒã·ã§ã³ã§ãã
ã«ãžã¥ã¢ã«ãªãŠãŒã¹ã±ãŒã¹ã«æ±ããããã®ã¯ãéçºã¹ããŒããšè»œéæ§ã§ãã
Ivyã³ã³ãã€ã©ã§æ¹åããTree-Shakingã«ãããã³ãã«ãµã€ãºã®åæžãã1ã³ãã³ãã§PWAåã§ãã @angular/pwa
ããŒã«ãããã«ã¯1ã³ãã³ãã§ãããã€ã§ãã ng deploy
ã³ãã³ããªã©ãå°ããªã¢ããªã±ãŒã·ã§ã³ãè¿
éã«éçºããããã®ããŒã«ãæŽããŠããŸããã
StackblitzãUI Bakeryã®ãããªããžã¥ã¢ã«ãããã¿ã€ãã³ã°ããŒã«ããµãŒãããŒãã£ããç»å ŽããŠãããAngularã¢ããªã±ãŒã·ã§ã³ãã«ãžã¥ã¢ã«ã«äœãå§ããéå ·ã¯æã£ãŠããŠããŸãã
ãããŠ2020幎ãAngularãåãçµãã®ã¯æªèžã®é åã倧è¡åãã®ã¢ããªã±ãŒã·ã§ã³éçºã®ãŠãŒã¹ã±ãŒã¹ã§ãã
eã³ããŒã¹ããã¥ãŒã¹ãµã€ãã®ãããªãã³ã³ã·ã¥ãŒããŒåãã®å·šå€§ãªæµå ¥ãæã€ãŠãŒã¹ã±ãŒã¹ã§ãAngularã®3ã€ã®Valuesãçºæ®ã§ããä»çµã¿ãç ç©¶äžã§ãã
ã³ã³ã·ã¥ãŒããŒåãã¢ããªã±ãŒã·ã§ã³ã«æ±ããããã®ã¯ãªããšãã£ãŠãWebããã©ãŒãã³ã¹ã§ãããããã«å ããŠå€åãç¶ããããŒãºã«å¯Ÿå¿ãã€ã¥ããããã®æè»æ§ã§ãã
SEOãã¢ã¯ã»ã·ããªãã£ãåœéåãã¢ãã€ã«å¯Ÿå¿ããªãã©ã€ã³ãªã©èæ ®ãã¹ãããšãå±±ã®ããã«ãããŸãããã®ãããªãŠãŒã¹ã±ãŒã¹ã§ã¯ãã¹ããã©ã¯ãã£ã¹ã«åºå·ããã ãã§ãªããããã¯ãã«ãšã£ãŠæé©ãªæ¹æ³è«ãéžã¹ãããã«ããã¬ãŒã ã¯ãŒã¯åŽãæè»ã§ããå¿ èŠããããŸãã
Ionic
ã³ã³ã·ã¥ãŒããŒåãã®Angularã¢ããªéçºãšããŠã¯Ionicã倧ããªã·ã§ã¢ãæã£ãŠããŸãããã€ããªããã¢ãã€ã«ã¢ããªãéçºã§ããIonicã¯Angular CLIã«å¯Ÿå¿ãã ng add
ã³ãã³ãã§ç°¡åã«Angularãããžã§ã¯ãã«çµã¿èŸŒããããã«ãªããŸããããIonicã¯ãã€ãã£ããšã®ããªããžã ãã§ãªãUIã³ã³ããŒãã³ãã©ã€ãã©ãªã®åŽé¢ããããŸãã
ãããã¯ãã®UIããã®ãŸãŸäœ¿ãããã€ããªããã¢ããªã«å€æããã€ã³ãã©ã ãæ¬²ãããšããããŒãºã®ããã«ãIonicããŒã 㯠Capacitorãšããã€ã³ãã©éšåã ãã®ããã±ãŒãžãæäŸããããããŸã ng add
ã³ãã³ãã§Angularã¢ããªã±ãŒã·ã§ã³ã«ã€ã³ã¹ããŒã«ã§ããããã«ããŸããã
ãŸããããžã¥ã¢ã«ã¢ããªéçºã®ããã®Ionic Studioã䜿ãã°ãAngularã³ã³ããŒãã³ãã®ãªã¢ã«ã¿ã€ã ãã¬ãã¥ãŒããGUIã§ã®ããã°ã©ãã³ã°ãå¯èœã§ããã¢ãã€ã«åãAngularã¢ããªã±ãŒã·ã§ã³ã®éçºãã©ãããã©ãŒã ãšããŠIonicãæ¥éã«æé·ããŠããŸãã
Work in Progress
Angularå ¬åŒã«ãåãçµãã§ããWork in Progressãªãããžã§ã¯ããããã€ããããŸãã
ã²ãšã€ã¯æ°ããi18n APIã§ãããããŸã§ã®AngularãæäŸããi18næ©èœã¯ãã³ãã¬ãŒãå ã ãã®ãã®ã§ããããçŸåšå®è£ äžã®æ©èœã¯TypeScriptã®ã³ãŒãã®ãªãã§ãå®è¡æã«ããŒã«ã©ã€ãºãã§ããããã«ãªããŸããåœéåãå¿ èŠãªã¢ããªã±ãŒã·ã§ã³ã®å®è£ ã倧ãã«å©ããŠãããã§ãããã
ãã³ãã«ãµã€ãºã®ãããªãæ¹åãç®çã«ãã³ã³ããŒãã³ãåäœã§ã®é å»¶èªã¿èŸŒã¿ãé²è¡äžã§ãããããŸã§ã¯Routingã®ããŒãžåäœã§ããããã³ã³ããŒãã³ãããšã«é å»¶èªã¿èŸŒã¿ã§ãããããªä»çµã¿ãæ€èšäžã§ãã
æåŸã«ãProject Photonã玹ä»ããŸããng-conf 2019ã§çºè¡šãããç 究段éã®ãã®ãããžã§ã¯ãã¯ãAngularã¢ããªã±ãŒã·ã§ã³ã«Progressive Hydrationãå°å ¥ããããšãç®çã§ãããµãŒããŒãµã€ãã¬ã³ããªã³ã°ãšé å»¶èªã¿èŸŒã¿ãçµã¿åããããŠãŒã¶ãŒãæ¬åœã«å¿ èŠãšãããŸã§JavaScriptãå®è¡ããªããããªä»çµã¿ã暡玢ããŠããŸãã詳ããã¯ng-conf 2019ã®keynoteãèŠãŠãã ããã
Scully: Static Site Generator
æ°ãã話é¡ãšããŠãAngularã®ããã®éçãµã€ããžã§ãã¬ãŒã¿ãŒ Scully ãå ¬éãããŸãããScullyã¯å ¬åŒè£œã§ã¯ãªãã³ãã¥ããã£ã®æå¿ã§äœããããµãŒãããŒãã£ããŒã«ã§ãã
ãããŸã§Angularã«ã¯GatsbyJSãGridsomeã®ãããªéçãµã€ããžã§ãã¬ãŒã¿ãŒã¯ååšããªãã£ããããScullyãèµ·çå€ãšããŠJAMstackãAngularã®ãŠãŒã¹ã±ãŒã¹ã«å ãã£ãŠããããšã§ãããã
2020幎ã®Angular
2020幎ã®Angularã¯ããã©ãŒãã³ã¹æ¹åãç¶ããªãããIvyå°å ¥ã«ãã£ãŠå¯èœãšãªã£ãi18nãå§ããšãããã¬ãŒã ã¯ãŒã¯APIã®éçºã»æ¹åãéããŠããããšã§ããããŸã§åŒ±ãéšåã ã£ãã³ã³ã·ã¥ãŒããŒåãã®ãŠãŒã¹ã±ãŒã¹ã«æã䌞ã°ããŠããããšã§ãããã
Valuesã®3æ¬è»žããŠãŒã¶ãŒãæããã¢ããªã±ãŒã·ã§ã³ïŒãŠãŒã¶ãŒäœéšïŒãéçºè ãæããã¢ããªã±ãŒã·ã§ã³ïŒéçºè äœéšïŒããããŠäžçäžã«åºããã³ãã¥ããã£ã®åã§ããããŸã§ä»¥äžã«é åçãªWebéçºãã©ãããã©ãŒã ã«è²ã£ãŠãããšæåŸ ããŠããŸãã
ããã§ã¯è¯ãã幎ãã
Top comments (1)
Can you please translate it ?