Version 6 of Angular Now Available – Angular 6がついに利用できるようになりました

The 6.0.0 release of Angular is here! This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future.

Angular 6.0.0をリリースしました！今回のメジャーリリースは、フレームワーク自体というよりは、ツールチェーンやAngularと共に迅速に将来に向けて進んでいけるようにすることにフォーカスを当てています。

As a part of this release, we are synchronizing the major versions going forward for the framework packages (@angular/core, @angular/common, @angular/compiler, etc), the Angular CLI, and Angular Material + CDK. All are releasing as 6.0.0 today. We made this change to clarify cross compatibility. The minor and patch releases for these projects will be issued based on the project’s needs.

今回のリリースでは、フレームワーク（@angular/core、@angular/common、@angular/compilerなど）、Angular CLI、Angular Material + CDKのバージョンを同じものに揃えました。すべてを6.0.0として本日リリースしています。これは、それぞれの互換性を明確にするためです。今後のマイナーリリースやパッチリリースは、それぞれのプロジェクトのニーズに基づいて行っていく予定です。

See the full list of changes in our changelogs: framework, material+cdk, cli.

変更のすべては、次の変更ログでご確認ください。framework、material+cdk、cli。

ng update

ng update <package> is a new CLI command that analyzes your package.json and uses its knowledge of Angular to recommend updates to your application. To see it in action, check out our update guide.

ng update <package>は、package.jsonを解析し、アプリケーションに対してアップデートを勧めてくれる新しいCLIのコマンドです。実際にどんなものか確認するには、アップデートガイドをチェックしてみてください。

Not only will ng update help you adopt the right version of dependencies, and keep your dependencies in sync, but 3rd parties can provide update scripts using schematics. If one of your dependencies provides an ng update schematic, they can automatically update your code when they need to make breaking changes!

ng updateは、依存関係にとって適切なバージョンの導入を手助けし、依存関係の同期状態を維持させるだけなく、サードパーティがSchematicsを使用するアップデートスクリプトを提供するのを手助けします。もし依存関係のひとつがng updateのschematicを提供していれば、依存関係に破壊的変更が生じたとしても、自動的にコードをアップデートします。

ng update will not replace your package manager, but uses npm or yarn under the hood to manage dependencies. In addition to updating dependencies and peer dependencies, ng update will apply needed transforms to your project.

ng updateはパッケージマネージャーを置き換えるのではなく、依存関係を管理するためにnpmやyarnを使用します。依存関係やpeer dependencyのアップデートに加えて、ng updateはプロジェクトのために必要な変換を適用します。

For example, the command ng update @angular/core will update all of the Angular framework packages as well as RxJS and TypeScript, and will run any schematics available on these packages to keep you up to date. As part of this one command, we’ll automatically install rxjs-compat into your application to make the adoption of RxJS v6 smoother.

例えば、ng update @angular/coreコマンドは、RxJSやTypeScriptだけでなくAngularフレームワークのすべてをアップデートし、最新の状態に保つためにこれらのパッケージで使用可能なschematicsを実行します。この一度のコマンドで、RxJS v6の導入をよりスムーズにするためにアプリケーションにrxjs-compatを自動的にインストールしたりします。

We expect to see many more libraries and packages add ng update schematics over the coming months, and have already heard from enterprise component library teams that are planning to use ng update to push through important changes in an automated way to save their developers time.

われわれは、今後数ヶ月の間に多くのライブラリやパッケージがng update schematicsを追加してくれるのを期待しています。また、すでにエンタープライズコンポーネントのライブラリチームからは、開発者の時間を節約するのを目的として、自動化された方法で重要な変更を反映させられるようにng updateの使用を計画していると聞いています。

Learn more about how the ng update command works. To get started creating your own ng update schematic, take a look at the entry in the package.json of rxjs and its associated collection.json.

こちらでどのようにng updateコマンドが動くのかについての詳細をご確認いただけます。オリジナルのng update schematicの作成を開始するには、rxjsのpackage.json内のエントリーと、それに関連するcollection.jsonを見てください。

ng add

Another new CLI command ng add <package> makes adding new capabilities to your project easy. ng add will use your package manager to download new dependencies and invoke an installation script (implemented as a schematic) which can update your project with configuration changes, add additional dependencies (e.g. polyfills), or scaffold package-specific initialization code.

もうひとつの新しいCLIのコマンドng add <package>は、皆さんのプロジェクトに新しい機能を追加するのを容易にします。ng addは、プロジェクトのパッケージマネージャを使って、新しい依存関係をダウンロードし、（schematicとして実装された）インストール用のスクリプトを実行します。このスクリプトは、設定の変更と共にプロジェクトをアップデートすること、追加された依存関係（polyfillなど）を追加すること、さらにパッケージ固有の初期化コードをscaffoldすることができます。

Try out some of the following on your fresh ng new application:

新たにng newしたアプリケーションで、以下のいくつかをお試しください。

・ng add @angular/pwa — Turn your application into a PWA by adding an app manifest and service worker
・ng add @ng-bootstrap/schematics — Add ng-bootstrap to your application
・ng add @angular/material — Install and setup Angular Material and theming and register new starter components into ng generate
・ng add @clr/angular@next — Install and setup Clarity from VMWare
・ng add @angular/elements — Add the needed document-register-element.js polyfill and dependencies for Angular Elements (see below)

• ng add @angular/pwa — app manifestとservice workerを追加することによってアプリケーションをPWAに変換します。
• ng add @ng-bootstrap/schematics — アプリケーションにng-bootstrapを追加します。
• ng add @angular/material — Angular Materialとテーマのインストールとセットアップを行い、新しいスターターコンポーネントをng generateに登録します。
• ng add @clr/angular@next — VMWareのClarityをインストールし、セットアップします。
• ng add @angular/elements — Angular Elements（以下で紹介）に必要なpolyfillであるdocument-register-element.jsと依存関係を追加します。

Because ng add is built on top of schematics and the npm registry, our hope is that libraries and the community will help us build a rich ecosystem of ng add supporting packages.

ng addは、schematicsやnpmレジストリ上で構築されています。従いまして、われわれはライブラリやコミュニティがng addのサポーティングパッケージのリッチなエコシステムを構築してくれるのを願っています。

Take a look at Angular Material’s ng-add schematic for an example to help you get started building your own ng-add schematics.

Angular Material’s ng-add schematicにて、オリジナルのng-add schematicsの構築を手助けしてくれる事例を確認できます。

Angular Elements

The first release of Angular Elements is focused on allowing you to bootstrap Angular components within an existing Angular application by registering them as Custom Elements. We use this extensively in angular.io as part of our content management system to allow dynamic bootstrapping of capabilities via embedded HTML. This replaces the need to manually bootstrap Angular components found in static html content.

Angular Elementsの最初のリリースでは、既存のAngularアプリケーション内のAngularコンポーネントをカスタムエレメントとして登録することによってブートストラップできるようになったことにフォーカスしています。われわれは埋め込まれたHTMLを通して動的なブートストラップができるようにコンテントマネージメントシステムの一部として、このAngular Elementsをangular.io内で大々的に使用しています。Angular Elementsによって、静的なHTMLのコンテンツ内でAngularコンポーネントを手動でブートストラップする必要がなくなります。

Check out an example of registering a component as a custom element or learn more about Angular Elements.

カスタムエレメントとしてコンポーネントを登録する事例をご確認ください。また、こちらでAngular Elementsについての詳細を学べます。

One of our community members has also produced an Angular Elements Quick Start video that we highly recommend.

われわれのコミュニティメンバーのひとりにより、Angular Elements Quick Start videoが作られています。大変オススメです。

Angular Material + CDK Components

The biggest addition is the new tree component for displaying hierarchical data. Following patterns from the data-table component, the CDK houses the core tree directives, with Angular Material offering the same experience with Material Design styles on top. We recently gave a talk about the component, so check that out for more information (video, slides). These new tree components come in both styled (Material’s mat-tree) and unstyled versions (CDK’s cdk-tree).

最も大きな追加内容となるのが、階層データを表示するための新しいtreeコンポーネントです。データテーブルコンポーネントのパターンに従って、CDKはコアとなるtreeディレクティブを、Materialデザインスタイルと同じ体験を提供するAngular Materialと一緒に格納します。われわれは先日コンポーネントについて話をしました。より詳しい情報を知りたい場合はチェックしてください（動画、スライド）。これらの新しいtreeコンポーネントは、スタイル有りのバージョン（Angular Materialのmat-tree）とスタイル無しのバージョン（CDKのcdk-tree）の両方で提供されます。

Alongside the tree, we also have new badge and bottom-sheet components. Badges help display small bits of helpful information, such as unread item counts. Bottom-sheets are a special type of mobile-centric dialogs that come up from the bottom of the viewport, commonly used to present a list of options following an action.

treeコンポーネントと一緒に、新たにbadgeコンポーネントとbottom-sheetコンポーネントも追加しました。badgeコンポーネントは、未読件数のような、ちょっとした役立つ情報を表示するために使います。bottom-sheetコンポーネントは、ビューポートの底から這い上がってくるモバイル専用の特別なタイプのダイアログです。一般的に、アクションに従ってオプションのリストを表示するために使われます。

The @angular/cdk/overlay package is one of the most powerful pieces of infrastructure in the CDK today. With the release of v6, this package now includes new positioning logic that helps make pop-ups that intelligently remain on-screen in all situations.

@angular/cdk/overlayパッケージは、今日のCDKの中でも最も強力なインフラのひとつです。v6のリリースで、このパッケージには新しい位置決めのロジックが追加されました。これにより画面がどんな状況でも賢くポップアップを残すことができるようになりました。

Angular Material Starter Components

Once you have run ng add @angular/material to add material to an existing application, you will also be able to generate 3 new starter components.

既存のアプリケーションにAngular Materialを追加するために、一度ng add @angular/materialを実行すると、3つの新しいスターターコンポーネントを生成することができます。　

—

Material Sidenav

You can now generate a starter component including a toolbar with the app name and the side navigation. This component is responsive based on breakpoints.

アプリのタイトルを含んだツールバーとサイドナビゲーションを含んだスターターコンポーネントです。このコンポーネントはブレイクポイントに基づきレスポンシブに対応しています。

Run:

コマンド:

This will create this starter component:

コマンドを実行すると、以下のスターターコンポーネントを生成します。

—

Material Dashboard

You can now generate a starter dashboard component containing a dynamic grid list of cards.

カードの動的なグリッドリストを含んだダッシュボードコンポーネントです。

Run:

コマンド:

This will create this starter component:

コマンドを実行すると、以下のスターターコンポーネントを生成します。

—

Material Data Table

You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.

ソートとページネーションを行うためのデータソースによって、予め設定されたスターターデータテーブルコンポーネントです。

Run:

コマンド:

This will create this starter component:

コマンドを実行すると、以下のスターターコンポーネントを生成します。

—

Learn more about the available Angular Material Schematics.

利用可能なAngular Material Schematicsについての詳細はこちらでご確認ください。

CLI Workspaces

CLI v6 now has support for workspaces containing multiple projects, such as multiple applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration.

CLI v6は、複数のアプリケーションやライブラリのような複数のプロジェクトを含んでいるワークスペースをサポートしています。CLIプロジェクトでは、ビルドやプロジェクトの設定のために、これまでの.angular-cli.jsonに代わってangular.jsonを使用するようになりました。

Each CLI workspace has projects, each project has targets, and each target can have configurations.

それぞれのCLIワークスペースはプロジェクトを持っていて、それぞれのプロジェクトにターゲットがあり、ターゲットごとに設定を行うようにします。

{
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

Learn more about the new configuration file

新しい設定ファイルについての詳細はこちらでご確認ください。

Library Support

One of the most requested features for our CLI has been support for creating and building libraries, and we are proud to introduce:

最もリクエストの多かったCLIの機能のひとつが、ライブラリの作成とビルドのサポートでした。自信を持って紹介します。

This command will create a library project within your CLI workspace, and configure it for testing and for building.

このコマンドはCLIワークスペース内にライブラリのプロジェクトを作成し、テストとビルドのための設定を行います。

Learn more about creating libraries with the Angular CLI

Angular CLIでのライブラリの作成についての詳細はこちらでご確認ください。

Tree Shakable Providers

To make your applications smaller, we’ve moved from modules referencing services to services referencing modules. This allows us to only bundle services into your code base in modules where they are injected.

アプリケーションをより小さくするために、moduleからserviceを参照していたのを、serviceからmoduleを参照するように変更しました。これにより、serviceがインジェクトされているmodule内のコードベースに、そのserviceをバンドルするだけでよくなりました。

Before

@NgModule({
  ...
  providers: [MyService]
})
export class AppModule {}

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  constructor() { }
}

After

No references are needed in our NgModule.

NgModule内での参照は必要ありません。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() { }
}

Read more about Dependency Injection

Dependency Injectionについての詳細はこちらをお読みください。

Animations Performance Improvements

We’ve updated our implementation of Animations to no longer need the web animations polyfill. This means that you can remove this polyfill from your application and save approximately 47KB of bundle size, while increasing animations performance in Safari at the same time.

Web Animationのpolyfillをもう必要ないものとするために、アニメーションの実装をアップデートしました。これにより、このpolyfillをアプリケーションから取り除くことで、約47KBのバンドルサイズを節約でき、同時にSafariでのアニメーションのパフォーマンスが向上しています。

RxJS v6

Angular has been updated to use v6 of RxJS. RxJS is an independent project that released v6 several weeks ago. RxJS v6 brings with it several major changes, along with a backwards compatibility package rxjs-compat that will keep your applications working.

AngularはRXJSのv6を使用するようにアップデートされました。RxJSは独立したプロジェクトで、v6は数週間前にリリースされています。RxJS v6は、いくつかの大きな変更があるため、アプリケーションの動作を維持するための下位互換のパッケージrxjs-compatも用意されています。

RxJS has been rearranged to make it more tree-shakable, ensuring that only the pieces of RxJS that you use are included in your production bundles.

RxJSは、よりtree-shakableなものとなるために、つまり使用するRxJSの一部だけがプロダクションバンドルの中に含まれていることを保証するために、再調整が行われています。

If you use ng update, your application should keep working, but you can learn more about the 5.5 to 6.0 migration.

ng updateを使用すれば、アプリケーションの動作を維持させられますが、5.5から6.0への移行についての詳細を知っておくとよいでしょう。

Long Term Support (LTS)

We are expanding our Long Term Support to all major releases.

Long Term Suportをすべてのメジャーリリースに拡張しています。

Previously we announced that only v4 and v6 would be LTS releases but in order to make updating from one major to the next easier, and give bigger projects more time to plan updates, we have decided to extend the long-term support to all major releases starting with v4.

これまでは、v4とv6だけがLTSリリースであるとアナウンスしてきましたが、ひとつのメジャーリリースから次のリリースにアップデートすることを容易にし、大きなプロジェクトにアップデートを計画する時間をより多く与えるために、v4から始まるすべてのメジャーリリースに長期サポート（LTS）を拡張することに決めました。

Each major release will be supported for 18 months with around 6 months of active development followed by 12 months of critical bugfixes and security patches.

それぞれのメジャーリリースは、約6ヶ月のアクティブな開発に続き、12ヶ月の重大なバグ修正とセキュリティパッチを伴った18ヶ月間のサポートが予定されています。

Learn more about how Angular versions and releases.

Angularのバージョンやリリースがどのようになっているかについての詳細はこちらでご確認ください。

How to update to 6.0.0

Visit update.angular.io for information and guidance on updating your application.

アプリケーションのアップデートについての情報やガイダンスはupdate.angular.ioでご確認ください。

The update generally follows 3 steps, and will take advantage of the new ng update tool.

アップデートは一般的に3つのステップを踏みます。その際に、新しいng updateツールを利用することになります。

1. Update @angular/cli
2. Update your Angular framework packages
3. Update other dependencies

1. @angular/cliをアップデートします。
2. Angularフレームワークのパッケージをアップデートします。
3. 他の依存関係をアップデートします。

Making it easy for developers to stay up to date with the latest releases is extremely important to us, so let us know what you think about this release in the comments!

開発者が気軽に最新のリリースに遅れずについてきてくれることはわれわれにとって大変重要なことです。このリリースに関して何か思うことがありましたら、ぜひコメントでお知らせください！

What about Ivy?

At ng-conf we mentioned a new initiative called Ivy — our next generation rendering pipeline. Ivy is currently under active development and is not part of the 6.0 release. We will announce an opt-in preview of Ivy as soon as it is ready in the coming months. Keep an eye on this blog for the latest information.

ng-confでわれわれはIvyと呼ぶ新しいイニシアチブについて言及しました。これは次世代のレンダリングパイプラインとなります。Ivyは現在目下開発中であり、6.0リリースには含まれていません。今後数ヶ月で準備が整いましたら、opt-inプレビューを発表する予定です。Angularブログで最新の情報を常にチェックしておいてください。

まとめ

以上、Angular公式ブログの記事『Version 6 of Angular Now Available』の翻訳となります。原文も載せていますので、わかりにくい部分があれば、そちらも合わせてお読みいただくとよいかと思います。

本文内でも触れられているように、今回のリリース内容は、Angularの機能というよりは、Angularをいかに使ってもらえるかというところに重点が置かれています。ng addにより、様々な用途に対応できるようになったり、Angular Matrialのスターターコンポーネントにより管理ツール系の開発が始めやすくなったり、複数のプロジェクトを含んだワークスペースに対応したり、さらにはメジャーリリースごとにLTSが対応されたり、Angularで開発をしたくなるような機能が追加されたんじゃないでしょうか。

それからWeb componentsのCustom ElementsとしてAngularのコンポーネントを使えるようにするAngular Elementsは、いろいろ期待させてくれますね（Web Componentsが流行ればの話ですが）。私自身もこれから試してみたいと思っているところです。

Angular 6で、CLIもだいぶ進化し、Angularはかなり使いやすくなったと思います。これからAngularを始めようと思っている方も、Angular 6から始めてもらえれば、そこまで苦労せずに気軽にAngularでの開発が始められるのではないかと思っています。