Angular v7 — CLI プロンプト、仮想スクロール、ドラッグアンドドロップなど
この記事は Angular 公式ブログ Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and moreを元に翻訳、加筆したものです。
Angular 7.0.0 がリリースされました！ これは、コアフレームワーク、Angular Material、メジャーバージョンに追随したCLIなど、プラットフォーム全体にまたがるメジャーリリースです。このリリースには、ツールチェーンの新機能が含まれており、いくつかの主要なパートナーとの協調が可能になっています。
v7 へのアップデート方法
アプリケーションのアップデートに関する詳細な情報とガイダンスについては、update.angular.ioを参照してください。しかし、v6で行った作業のおかげで、ほとんどの開発者にとってv7へのアップデートは以下のコマンドのみになるはずです。
ng update @angular/cli @angular/corev7を早期に試していた人々からは、このアップデートがこれまでになく高速であり、アップデートにかかる時間は多くのアプリケーションで10分以内に収まると報告されています。
CLI プロンプト
CLIはng newやng add @angular/materialのような一般的なコマンドを実行すると、ユーザにプロンプトを表示するようになりまし た。ルーティングやSCSSサポートなどのビルトイン機能を発見するのに役立ちます。
CLI プロンプトがSchematicsに追加されているので、パッケージを公開しているSchematicsコレクションにx-promptキーを追加することでそれらを利用できます。
アプリケーションのパフォーマンス
パフォーマンスに重点を置き、私たちはエコシステム全体のよくある間違いを分析し、ある発見をしました。多くの開発者が、reflect-metadataポリフィルをプロダクションに含めているのです。これは開発でのみ必要なものです。
これを修正するため、v7のアップデートの一部は polyfills.tsファイルからこれを自動的に削除し、その後JITモードのビルド時のみビルドのステップとして同梱し、プロダクションビルドからデフォルトで削除します。
v7では、CLIで新たにプロジェクトを立ち上げる時、Bundle Budgetsを活用するようにデフォルト設定しています。初期バンドルが2MBを超えると警告し、5MBでエラーになります。budgets は、angular.jsonで簡単に変更できます。
これらの budgets は、ChromeのData Saver機能を利用してユーザーに表示できる警告と一致します。
Angular Material & the CDK
マテリアルデザインは2018年に大きな更新がありました。v7にアップデートしたAngular Materialユーザーは、マテリアルデザイン新仕様への更新を反映した視覚的差異を想定してください。
CDKに新たに追加された、DragDropModuleやScrollingModuleをインポートすることで、仮想スクロールとドラッグアンドドロップを利用できるようになりました。
仮想スクロール
仮想スクロールは、リストの可視部分に基づいてDOMから要素をロード/アンロードするので、大きなスクロール可能リストを持つユーザーに対して非常に高速な体験を構築できます。
ドラッグアンドドロップ
ドラッグアンドドロップはCDKでサポートされており、ユーザーがアイテムを移動すると自動レンダリング、リストの並べ替え (moveItemInArray)、およびリスト間のアイテムの転送 (transferArrayItem) のヘルパーメソッドが含まれています。
selectのアクセシビリティの向上
mat-form-field内でネイティブselect要素を使用することによって、アプリケーションのアクセシビリティを向上させます。ネイティブのselectにはパフォーマンス、アクセシビリティ、ユーザビリティのメリットがありますが、オプションで表現を完全に制御できるmat-selectも用意しています。
mat-select と mat-form-field の詳細はこちらを参照してください。
Angular Elements
Angular Elements は、カスタム要素のためのWeb標準なコンテンツプロジェクションをサポートするようになりました。
<my-custom-element>This content can be projected!</my-custom-element>パートナーとの協調
Angularはコミュニティとして大きな成功を収めています。そのために、最近立ち上がったいくつかのコミュニティプロジェクトに協力しています。
- Angular Console — ローカルマシン上でAngularプロジェクトを開始/実行するためのダウンロード可能なコンソールです
- @angular/fire — AngualrFireはnpmに新しく拠点を移し、そしてAngularのための最初の安定版をリリースしました
- NativeScript — NativeScriptを使用して、Webとモバイルの両方に対応する単一のプロジェクトを作成できるようになりました
- StackBlitz — StackBlitz 2.0 がリリースされ、現在、 Angular Language Service やタブ編集などの機能が追加されています
ドキュメントの更新
私たちはガイドと参考資料を改善するため常に努力しています。 angular.ioのドキュメントに、Angular CLI のリファレンス資料が含まれるようになりました。
依存関係の更新
主要なサードパーティプロジェクトに対する依存関係を更新しました。
- TypeScript 3.1
- RxJS 6.3
- Node 10 — Node 10 をサポートしましたが、引き続きNode 8もサポートされています
Ivy はどうなってる？
私たちは、次世代のレンダリングパイプライン — ivy という新しいイニシアチブの作業を続けてきました。 Ivyは現在開発中であり、v7リリースには含まれていません。私たちは既存のアプリケーションとの下位互換性を検証し始めており、今後数か月以内に準備が整い次第Ivyのオプトインプレビューを発表する予定です。
