Stephen Fluin Jul 26

Angular version 6.1 has been released. This is a minor release that is a drop-in replacement for 6.0 containing new features and bugfixes.

Angular v6.1 がリリースされました。v6.1 はマイナーリリースで、新しい機能とバグフィックスを含む 6.0 の完全互換版となります。

What’s new?

Router Scroll Position Restoration

Developers can now configure the router to remember and restore scroll position as the user navigates around an application. New navigation events will reset the scroll position, and pressing the back button will restore the previous position.

ユーザーがアプリケーション内をナビゲートするときに、スクロール位置を記憶し復元するための設定を、開発者がルーターで行えるようになりました。新たなナビゲーションイベントは、スクロール位置をリセットし、ブラウザのバックボタンを押した際に、直前のスクロール位置を復元します。

Turn on restoration in the router configuration:

以下で、ルーター設定における復元を有効にします。

It is expected that this will become the default in a future major release.

これは将来のメジャーリリースでデフォルトとなる見込みです。

ShadowDOM v1 View Encapsulation

There are multiple ways of connecting your CSS to the components they are defined within, we call this View Encapsulation. Within your component decorator, you can now change the View Encapsulation to use ShadowDOM v1. The previous ViewEncapsulation.Native is now deprecated.

CSSを、その定義されているコンポーネントに結びつける方法は複数あり、これを View Encapsulation（Veiwのカプセル化）と呼んでいます。今回、ShadowDOM v1 を使用するために、コンポーネントのデコレーターで、View Encapsulation を変更できるようになりました。これまでの ViewEncapsulation.Native は非推奨となります。

ShadowDOM v1 has better cross-browser support than the previous version, and is being built as a shared standard across browsers.

ShadowDOM v1 は、以前のバージョンと比べてブラウザー間でのサポートが進んでおり、ブラウザー間で共有されるスタンダードな技術として構築されています。

Many of these changes apply more to library authors and advanced developers, but you can learn more about the differences between v1 and v0. ShadowDOM v1 is necessary for content projection with Angular Elements.

これらの変更の多くは、 どちらかと言うとライブラリーの作者や上級開発者向けのものとなりますが、こちらで v1 と v0 の違いについて詳細を知ることもできます。ShadowDOM v1 は、Angular Elements での content projection（コンテンツの投影）に必要です。

Select the new encapsulation in your component’s decorator:

コンポーネントのデコレーターで新しい encapsulation を選択してください。　

@Component({
  templateUrl: './my-component.html',
  encapsulation: ViewEncapsulation.ShadowDom
})
export class MyComponent { }

Schematics Chaining

We’ve improved the way that you can chain Schematics by adding support for returning a Rule from an existing Rule. This allows developers to more dynamically determine the set of rules to follow when designing Schematics.

既存の Rule から Rule を返すサポートを追加することによって、Schematics のチェイン方法を改善しました。これにより、開発者はSchematics を設計する際に従う一連のルールをより動的に決定できるようになりました。

TypeScript 2.9

Angular now supports TypeScript 2.8 and 2.9, in addition to 2.7.

Angular は、TypeScript 2.7に加えて、2.8 と 2.9 をサポートしました。

One important change in TypeScript 2.9 that many developers will benefit from is related to errors such as “Exported variable ‘x’ has or is using name ‘y’ from external module ‘z’ but cannot be named”. TypeScript has relaxed these declaration emit visibility rules which means you no longer will see this error and you will no longer have to change your code for such export patterns.

多くの開発者が恩恵を受けると思われる TypeScript 2.9 の重要な変更点のひとつは、“Exported variable ‘x’ has or is using name ‘y’ from external module ‘z’ but cannot be named”（出力された変数 x は、外部モジュール z からの y と言う名前を持っている、または使っているが、実際は名前がつけられていない。）のようなエラーに関連したものです。 TypeScript はこれらの宣言が発する可視性ルール（visibility rules）を緩和しました。これによって、もうこのエラーを見ることはなくなり、このような出力（export）パターンのコードを変更する必要がなくなります。

For the complete list of features and bugfixes please see the Angular changelog and the CLI release notes.

機能とバグフィックスの全リストについては、Angular changelog と CLI release notes を見てください。

This is the last planned minor for 6.x, so you should expect to see 7.0 betas released as we begin working towards the next major version.

今回のリリースは、6.x 系では計画されたものとしては最後のマイナーバージョンとなります。次のメジャーバージョンに向けて開発を進めているので、今後は、7.0 ベータ版のリリースにご期待ください。

訳者まとめ

翻訳は以上となります。今回の Angular v6.1 のリリースで、Angular CLI も v6.1 がリリースされています。最新の Angular v6.1 を試される場合は、手元の環境で、Angular CLI もバージョンアップしておく必要があります。必要に応じて、以下を実行してください。

記事内でも紹介されていた通り、Angular v6.1 では、SPA が苦手とするスクロール位置の制御が可能となりました。ブラウザバックした時に、遷移前のスクロールポジションを復元したり、「#」付きの URL でページ遷移した際に、該当の ID を持つ要素に自動でスクロールしたりする処理を容易に実装することができるようになりました。詳細については、以下のlacolacoさんの記事が参考になるかと思います。

• Angular v6.1で導入されるRouter Scrollerの紹介 – lacolaco

それから、ShadowDOM v1 や TypeScript 2.8, 2.9 のサポートが追加されています。詳細については、以下の記事が参考になるかと思います。

• Shadow DOM v1: 自己完結型ウェブ コンポーネント  |  Web |  Google Developers
• TypeScript 2.8.1 変更点 – Qiita
• TypeScript 2.9.1 変更点 – Qiita

記事では取り上げられていませんでしたが、数多くの機能やバグフィックスが追加されています。それらは、Angular changelog と CLI release notes をチェックしてもらえればと思います。ザッと見て私が気になったものを数点挙げておきます。

次回のリリースは、いよいよ Angular 7 ですかね。予定では、2018年9月-10月となっています。油断していると次から次へと新しいものが出てくるので、まずは今回の v6.1 の内容をしっかりと押さえておきたいところですね。