Angular7アップデート内容ざっくり和訳
はじめに
Angular7がリリースされたらしい。
とりあえず更新内容をざっくり確認。
英語は得意じゃないので間違いもあるかも。
原文
主なアップデート
アップデート方法
Angular6以降はng updateが叩けるのでそれで行う。
それ以前のバージョンなら一旦6に上げるか、最初から7を入れるのが良いのかも？
# アップデートコマンド
$ ng update @angular/cli @angular/core
アップデート詳細
CLIプロンプト
CLIプロンプトにSchematicsが追加された。
Schematicsコレクションにx-promptkeyを追加することでパッケージを使える様になるっぽい。
Schematicsが何かわからなかったから調べないと恩恵を受けられなそう。
アプリケーションパフォーマンス
開発でのみ必要なreflect-metadataPolyfillがそのままproductビルドに組み込まれていたため、
v7からはpolyfill.tsから自動で削除されるようになった。
JITモードでビルドする時は組み込まれ、productビルド時にはデフォルトででは削除するようになったとのこと。
更にv7からは初期バンドルが2MBを超えると警告、5MBでエラーとなるようになった。
既存に組み込む場合は、angular.jsonに下記を加えればいいと思う。
"budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }]
Angular Material & CDK
v7でVirtual ScrollingとDrag & Dropが実装された。
ただし、v7にすると既存の部分で少し見た目が変わるかもとのこと。
Virtual Scrolling
リストの見えてる部分についてDOMからロード、アンロードをするようになった。
そのため、大量スクロールがあるページでは、とても高速化されたっぽい。
詳しくはこちら。
Drag & Drop
Angular Component Dev Kitで動作する。
要素のD&Dができる。よく見るやつだから説明もいらないと思う。
一応詳しくはこちら。
Improved Accessibility of Selects
mat-form-field内で普通のselectを使った時のアクセシビリティが改善された。
素のselectにはフォーマンス、アクセシビリティ、ユーザビリティのメリットがあるけど、
オプション制御ができるmat-selectも残すらしい。
Angular Elements
Angularの要素はカスタム要素のWeb標準を使用したコンテンツ投影をサポートするようになったらしい。
何のことかよくわからなかった。
その他
ドキュメントが更新された
公式ドキュメントにAngular CLIが追加。
今まで(おそらく)githubにしか情報が無かったからこれはありがたい。
依存パッケージが更新された
- TypeScript:3.1
- RxJS:6.3
- Node10(Node8も継続サポート)
まとめ
機能的には大きなアップデートは無いっぽい？
パフォーマンスとか容量とか良く話題になる気がするから、そこら辺が改善されるのは良さそう。
どっちかって言うとTSとかRxJSのアップデートの方が影響ありそう。
(それぞれ何が今と変わるかまでは調べてない)
とりあえず試しにサンプルプロジェクト作ってバージョン上げてみようと思う。
