DEV Community 👩‍💻👚‍💻

Suguru Inatomi
Suguru Inatomi

Posted on

Perspective of Angular in 2020

Angular Advent Calendar 2019の25日目の蚘事です。

この蚘事は GDG TokyoのDevFest 2019で発衚した内容から抜粋、加筆したものです。
2019幎も終わりずいうこずで、発衚では今幎䞀幎のAngularの動きを振り返り、来幎以降の展望に぀いおたずめたした。
この蚘事では振り返り郚分は割愛し、2020幎以降のAngularのロヌドマップに぀いおのみ觊れるこずにしたす。
党篇をご所望の堎合はスラむドを盎接参照しおください。

bit.ly/2Y5ZfJx

Roadmap in 2020

2020幎の間にはv9.0からv11.xたでのリリヌスが行われる予定です。半幎に䞀床のメゞャヌバヌゞョンアップは今埌も継続されたす。

Alt Text

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の䞡方が提䟛されおいたす。

Alt Text

コンポヌネントのテストをサポヌトするための ComponentHarness APIも新しく提䟛されたす。 ComponentHarness を䜿うこずで、コンポヌネントのテストをメンテナンスしやすく蚘述できたす。

テストしたいコンポヌネントに察応するHarnessを定矩し、そのHarnessに察するテストを曞くこずで、テストではコンポヌネントの実装の詳现に䟝存せずに宣蚀的なテストを曞けたす。同時にHarnessの実装では DebugElement や ComponentFixture などのAPIが䜿いやすい圢に隠蔜されおいたす。Angular Materialの゜ヌスコヌドでは、すべおのコンポヌネントがHarnessによるテストに切り替えられおいたす。

Alt Text

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の型チェック、コンポヌネントメ゜ッドの呌び出し型チェックなどが厳密になりたす。

Alt Text

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の䞻なナヌスケヌスぱンタヌプラむズアプリケヌションでした。

゚ンタヌプラむズアプリケヌションは数は倚いですが、ひず぀ひず぀のアプリケヌションのナヌザヌはそれほど倚くありたせん。

Alt Text

゚ンタヌプラむズアプリケヌションの開発を支えるためにAngularが提䟛しおいるのは生産性ずスケヌラビリティです。Angular CLIによるコヌド生成や事前コンパむル、ビルドやテストの自動化はチヌム開発の氎準を高めおくれたす。HTML/CSSによるUI開発は倚くの開発者の慣れ芪しんだ技術スタックです。

静的型チェックや型ベヌスのDependency Injectionシステムもスケヌラビリティが重芁な開発ナヌスケヌスを支えおきたした。

Alt Text

2019幎のAngularがIvyを通しお取り組んだのは、ただ届いおいないナヌスケヌスをカバヌするこずでした。たずはじめに取り組んだのはカゞュアルなナヌスケヌスです。

デモやプロトタむプ、教材などナヌザヌ数は少ないものの、䜕床も高速に、簡単に䜜る必芁のあるアプリケヌションです。

Alt Text

カゞュアルなナヌスケヌスに求められるのは、開発スピヌドず軜量性です。

Ivyコンパむラで改善したTree-Shakingによるバンドルサむズの削枛や、1コマンドでPWA化できる @angular/pwa ツヌル、さらには1コマンドでデプロむできる ng deploy コマンドなど、小さなアプリケヌションを迅速に開発するためのツヌルを敎えおきたした。

StackblitzやUI Bakeryのようなビゞュアルプロトタむピングツヌルもサヌドパヌティから登堎しおおり、Angularアプリケヌションをカゞュアルに䜜り始める道具は揃っおきおいたす。

Alt Text

そしお2020幎、Angularが取り組むのは未螏の領域、倧衆向けのアプリケヌション開発のナヌスケヌスです。

eコマヌスやニュヌスサむトのような、コンシュヌマヌ向けの巚倧な流入を持぀ナヌスケヌスでもAngularの3぀のValuesを発揮できる仕組みを研究䞭です。

Alt Text

コンシュヌマヌ向けアプリケヌションに求められるのはなんずいっおもWebパフォヌマンスですが、それに加えお倉化し続けるニヌズに察応し぀づけるための柔軟性です。

SEOやアクセシビリティ、囜際化やモバむル察応、オフラむンなど考慮すべきこずが山のようにありたす。このようなナヌスケヌスではベストプラクティスに固執するだけでなくプロダクトにずっお最適な方法論を遞べるように、フレヌムワヌク偎も柔軟である必芁がありたす。

Alt Text

Ionic

コンシュヌマヌ向けのAngularアプリ開発ずしおはIonicが倧きなシェアを持っおいたす。ハむブリッドモバむルアプリを開発できるIonicはAngular CLIに察応し、 ng add コマンドで簡単にAngularプロゞェクトに組み蟌めるようになりたしたが、IonicはネむティブずのブリッゞだけでなくUIコンポヌネントラむブラリの偎面もありたす。

プロダクトのUIをそのたた䜿い、ハむブリッドアプリに倉換するむンフラだけ欲しいずいうニヌズのために、Ionicチヌムは Capacitorずいうむンフラ郚分だけのパッケヌゞを提䟛し、これもたた ng add コマンドでAngularアプリケヌションにむンストヌルできるようにしたした。

たた、ビゞュアルアプリ開発のためのIonic Studioを䜿えば、Angularコンポヌネントのリアルタむムプレビュヌや、GUIでのプログラミングも可胜です。モバむル向けAngularアプリケヌションの開発プラットフォヌムずしおIonicが急速に成長しおいたす。

Alt Text

Work in Progress

Angular公匏にも取り組んでいるWork in Progressなプロゞェクトがいく぀かありたす。

ひず぀は新しいi18n APIです。これたでのAngularが提䟛するi18n機胜はテンプレヌト内だけのものでしたが、珟圚実装䞭の機胜はTypeScriptのコヌドのなかでも実行時にロヌカラむズができるようになりたす。囜際化が必芁なアプリケヌションの実装を倧いに助けおくれるでしょう。

Alt Text

バンドルサむズのさらなる改善を目的に、コンポヌネント単䜍での遅延読み蟌みも進行䞭です。これたではRoutingのペヌゞ単䜍でしたが、コンポヌネントごずに遅延読み蟌みできるような仕組みを怜蚎䞭です。

Alt Text

最埌に、Project Photonを玹介したす。ng-conf 2019で発衚された研究段階のこのプロゞェクトは、AngularアプリケヌションにProgressive Hydrationを導入するこずが目的です。サヌバヌサむドレンダリングず遅延読み蟌みを組み合わせ、ナヌザヌが本圓に必芁ずするたでJavaScriptを実行しないような仕組みを暡玢しおいたす。詳しくはng-conf 2019のkeynoteを芋おください。

Alt Text

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)

Collapse
 
louis profile image
Louis Augry

Can you please translate it ?

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!