Angular 7リリース — CLI Prompts, Virtual Scroll, Drag & Drop などに対応

Stephen Fluin Oct 19

The 7.0.0 release of Angular is here! This is a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. This release contains new features for our tool chain, and has enabled several major partner launches.

Angular の 7.0.0 をリリースしました！これはコアフレームワーク、Angular Material、CLI の同期されたメジャーバージョンを含んだプラットフォーム全体にまたがるメジャーリリースです。このリリースは、ツールチェーンのための新しい機能を含み、さまざまな主要パートナーがローンチすることを可能としています。

How to update to v7 – v7 へのアップデート方法

Visit update.angular.io for detailed information and guidance on updating your application, but thanks to the work we did in v6, updating to v7 should be one command for most developers:

アプリケーションのアップデートに関する詳細な情報やガイドについては、update.angular.io で確認してください。なお、v6 で行った作業によって、ほとんどの開発者はコマンド一発で v7 にアップデートできるはずです。

Early adopters of v7 have reported that this update is faster than ever, and many apps take less than 10 minutes to update.

v7 の初期採用者は、今回のアップデートはこれまでよりも時間がかからず、多くのアプリではアップデートするのに 10 分もかからないと報告しています。

CLI Prompts – CLI プロンプト

The CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support.

CLI は、ルーティングや SCSS のサポートのような組み込みの機能を見つけやすくするために、ng new や ng add @angular/material のような共通コマンドを走らせているときにプロンプトを表示するようになりました。

CLI Prompts have been added to Schematics, so any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.

Schematics に CLI プロンプトが追加されたので、Schematics に公開されているパッケージは、Schematics のコレクションに x-prompt キー を追加することによって、CLI プロンプトを利用できるようになりました。

"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},

Application Performance – アプリケーションパフォーマンス

Continuing our focus on performance, we analyzed common mistakes across the ecosystem. We discovered that many developers were including the reflect-metadata polyfill in production, which is only needed in development.

わたしたちはパフォーマンスに焦点を当て続けることにより、エコシステム全体に共通する誤りを分析してきました。多くの開発者はプロダクションの中に開発時にだけ必要な reflect-metadata polyfill をインクルードしているということを発見しました。

To fix this, part of the update to v7 will automatically remove this from your polyfills.ts file, and then include it as a build step when building your application in JIT mode, removing this polyfill from production builds by default.

これに対処するために、v7 へのアップデートの一部は、polyfills.ts ファイルからこれを自動的に取り除き、JIT モードでのアプリケーションのビルド時に、ビルドステップとしてこれをインクルードするようにして、プロダクションビルドからこの polyfill をデフォルトで取り除くようにしました。

With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI. New applications will warn when the initial bundle is more than 2MB and will error at 5MB. These budgets are easy to change in your angular.json.

v7 ではさらに、CLI で Bundle Budgets を利用するための設定が、新しいプロジェクトではデフォルトでなされています。新しいアプリケーションは、初期バンドルの容量が 2MB を超えた時に警告を出し、5MB でエラーとなります。これらの Budgets は angular.json で簡単に変更できます。

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

These budgets align with warnings that can be shown to users taking advantage of Chrome’s Data Saver features.

これらの Budgets は、Chrome の Data Saver 機能を利用しているユーザーに対して表示される警告と連携します。

Angular Material & the CDK – Angular Material と CDK

Material Design received a big update in 2018. Angular Material users updating to v7 should expect minor visual differences reflecting the updates to the Material Design specification.

マテリアル・デザインは、2018年に大きな更新がありました。Angular Material ユーザーは、v7 にアップデートすると、マテリアル・デザインの仕様に対する更新を反映したちょっとした視覚的な変化があると思ってください。

Newly added to the CDK, you can now take advantage of Virtual Scrolling and Drag and Drop by importing the DragDropModule or the ScrollingModule.

CDK に新たに追加されたので、DragDropModule または ScrollingModule を import することによって、Virtual Scrolling と Drag & Drop を利用することができます。

Virtual Scrolling

Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists.

Virtual Scrolling は、リストの可視部分に基づいて DOM から要素をロードおよびアンロードするので、とても大きなスクロールを伴うリストに対して、ユーザーにとても早い体験を提供することが可能です。

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Read more about Virtual Scrolling

Virtual Scrolling についての詳細はこちら

Drag and Drop

Drag and drop support is now in the CDK and includes automatic rendering as the user moves items and helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).

CDKで、ドラッグ＆ドロップをサポートし、ユーザーがアイテムを移動した時の自動レンダリング機能、レンダリングするリストのヘルパーメソッド（moveItemInArray）、 リスト間のアイテムの転送を行うヘルパーメソッド（transferArrayItem）が使えるようになっています。

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }

Read more about Drag and Drop

ドラッグ＆ドロップについての詳細はこちら

Improved Accessibility of Selects – select のアクセシビリティの改善

Improve the accessibility of your application by using a native select element inside of a mat-form-field. The native select has some performance, accessibility, and usability advantages, but we’re keeping mat-select which gives full control of the presentation of options.

mat-form-field の中でネイティブの select 要素を使用することで、アプリケーションのアクセシビリティが改善されます。ネイティブの select 要素はパフォーマスやアクセシビリティ、ユーザービリティの面でいくつかの優位性を持ち合わせています。なお、オプションの表示を完全にコントロールする mat-select も使い続けられるようにしています。

Learn more about mat-select and mat-form-field

mat-select と mat-form-field についての詳細はこちら

Angular Elements

Angular Elements now supports content projection using web standards for custom elements.

Angular Elements では、Custom Elements の Web 標準を使用してコンテンツを注入することをサポートしました。

Partner Launches – パートナーのローンチ状況

Angular owes a huge amount of its success to the community, and to that end we’ve been working to partner with several community projects that have launched recently.

Angular はコミュニティに対して大きな成功を収めています。わたしたちは、この成功を目指し、最近ローンチしたさまざまなコミュニティのプロジェクトに対して協力を行ってきました。

・Angular Console — A downloadable console for starting and running Angular projects on your local machine
・@angular/fire — AngularFire has a new home on npm, and has its first stable release for Angular
・NativeScript — It’s now possible to have a single project that builds for both web and installed mobile with NativeScript
・StackBlitz — StackBlitz 2.0 has been released and now includes the Angular Language Service, and more features like tabbed editing

• Angular Console — ローカル環境で Angular プロジェクトを準備し、起動するためのダウンロード可能なコンソールです。
• @angular/fire — AngularFire は 新たに npm に追加され、Angular のための最初の安定版を提供しています。
• NativeScript — 現在ひとつのプロジェクトで、Web と NativeScript を使ったモバイル（ネイティブアプリ）の両方をビルドすることが可能です。
• StackBlitz — StackBlitz 2.0 がリリースされ、Angular Language Service や 編集画面のタブ化などさまざまな機能が追加されています。

Documentation Updates – ドキュメントの更新

We’re always working hard to improve our guides and reference materials. The documentation on angular.io now includes reference material for the Angular CLI.

わたしたちは常にガイドや参考資料の改善に努めています。今回、angular.io のドキュメントに、Angular CLI の参考資料を追加しました。

Dependency Updates – 依存関係の更新

We’ve updated our dependencies on major 3rd party projects.

主要なサードパーティのプロジェクトへの依存関係を更新しました。

・TypeScript 3.1
・RxJS 6.3
・Node 10 — We’ve added support for Node 10, and we still support 8

• TypeScript 3.1
• RxJS 6.3
• Node 10 — Node 10 のサポートを追加しました。なお、Node 8 のサポートも続けています。

What about Ivy? – Ivy については？

We’ve been continuing work on a new initiative called Ivy — our next generation rendering pipeline. Ivy is currently under active development and is not part of the v7 release. We are beginning to validate the backwards compatibility with existing applications and will announce an opt-in preview of Ivy as soon as it is ready in the coming months.

わたしたちは、次世代のレンダリングパイプラインである Ivy と呼ばれる新しい取り組みについて作業を続けてきています。Ivy は、現在目下開発中であり、v7 のリリースには含まれていません。既存のアプリケーションを使って後方互換性のチェックを進めています。今後数ヶ月の間に準備が整い次第、Ivy のオプトインのプレビュー版を公開する予定です。

・　・　・

Keep an eye on this blog, on Twitter, and on YouTube for the latest information.

最新の情報については、Angular Blog や Twitter、YouTube などをチェックしてください。

Thanks to Brad Green.

Brad Green に感謝します。

訳者まとめ

以上、Angular公式ブログの記事『Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more』の翻訳でした。原文も載せていますので、わかりにくい部分があれば、そちらも合わせてお読みください。

今回のリリースは、メジャーバージョンアップとなりますが、内容としては、Vritual Scroll と ドラッグ＆ドロップ、パフォーマンス改善などが主なところです。結局 Ivy も既存のアプリとの互換性チェック中ということで含まれず、ちょっと寂しい内容だったかなと個人的には思っています。ここのところ Angular の存在感が薄くなりつつあるので（特に日本では）、このタイミングで Ivy など話題になりそうなリリースがなかったのは残念でした。なお、リリース内容の詳細は、以下でも確認できます。

• angular/CHANGELOG.md

ともかく、今回新たに追加された Virtual Scroll やドラッグ&ドロップは使える機能だと思います。それから新しいマテリアル・デザインの反映だったり、UI に即反映されるものなので、試し甲斐はありますね。