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

この記事は GDG TokyoのDevFest 2019で発表した内容から抜粋、加筆したものです。
2019年も終わりということで、発表では今年一年のAngularの動きを振り返り、来年以降の展望についてまとめました。
この記事では振り返り部分は割愛し、2020年以降のAngularのロードマップについてのみ触れることにします。
全篇をご所望の場合はスライドを直接参照してください。

bit.ly/2Y5ZfJx

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開発プラットフォームに育っていくと期待しています。

それでは良いお年を。