安心して2017年を迎えるためのAngular最新動向チェック

## 忙しい人向けのまとめ

- Angularは破壊的変更を含む可能性のあるメジャーアップデートを **半年に1回** に定めました
- 次のメジャーアップデートは3月1日予定です
- 諸事情により来年3月にリリースされるのはAngular 4.0.0です
- 2.xで書いてるものは基本壊れないから怯えないで
- あと`Angular2` って呼ばないで！ `Angular` だから！

## 時間がある人はここから読んでね

どうも、lacoです。ng-japanの代表とかやってます。

さて、2016年はAngularコミュニティにとって、とても重要な激動の1年になりました。去年の今頃からは考えられないほど状況は変化しました。日常的に動向をウォッチしている筆者でさえ突然の大本営発表に驚くことが何度もありました。しかしその結果、無事にAngularは2.0のFinalリリースを迎えることができて、ようやくコミュニティとエコシステムが軌道に乗りつつあります。
本稿では激動の2016年を振り返りつつ、安心して2017年を迎えられるように、最新動向と今後のアップデート内容（暫定）を紹介します。

### 2016年のAngularを振り返る

雑にいろいろなイベントを時系列順に並べていきましょう。

#### 2015年12月

- **Angular 2.0.0-beta.0のリリース**
- "Offline Compilation"のプロポーザルが初めて公開される

#### 2016年1月

- **Angular 2.0.0-beta.1のリリース**
- AngularのソースコードライセンスがMITに変更される ([公式ブログ](http://angularjs.blogspot.jp/2016/01/angular-2-mit-open-source-licensed.html))
- **「2016年中にAngular2を完成させる」と宣言**
- Angular Material2の開発がスタート
- Routerのアップデートの計画が上がる（のちのRouter v2）
- **Angular 2.0.0-beta.2のリリース**

#### 2016年2月

- **Angular 2.0.0-beta.3のリリース**
- AngularJS用のComponent Routerがリリースされる
- **Angular 2.0.0-beta.4,5,6のリリース** （バグ混入のため連続リリース）
- Template Language Serviceの構想が発表される
- `@angular/http` がangular/httpリポジトリに移される
- **Angular 2.0.0-beta.7のリリース**
- ng-nlがオランダで開催される

#### 2016年3月

- BatarangleがAngular2に対応
- **Angular 2.0.0-beta.8のリリース**
  - `replace`パイプが追加される
- 海外のニュースサイトに「GoogleがAngularのFinalリリースの準備をしている」と報じられる（[記事](http://thenewstack.io/google-preps-angular-2-final-release/)）
- **Angular 2.0.0-beta.9,10のリリース**
- メタデータからのコード生成による高速化の実装がスタート
- ng-japan 2016が開催される
- **Angular 2.0.0-beta.11,12のリリース**
    - `@View` 廃止
- **Angular 2.0.0-beta.13のリリース**

まだ3月ですよ。どんどん行きます

#### 2016年4月

- **Angular 2.0.0-beta.14のリリース**
- Material 2.0.0-alpha.2のリリース
- Angular-CLIのデザインドキュメントの作成がスタート
- **Angular 2.0.0-beta.15のリリース**
- **Angular 2.0.0-beta.16,17のリリース**
  - `Location`クラスが `angular2/router`から`angular2/platform/common` に移動
  - `Compiler`の廃止と`ComponentFactory`の導入
  - `#...`シンタックスの仕様変更と`let-`/`ref-`シンタックスの追加
  - `NgTemplateOutlet`の追加
  
#### 2016年5月

- **Angular 2.0.0-rc.0,1のリリース**
  - **npmパッケージを `@angular/`スコープ配下に移動**
  - `angular/router`を`@angular/router-deprecated`に移動
  - `angular2/alt_router`を`@angular/router`に移動
  - `platform-browser`と`platform-browser-dynamic`の分割
- ng-conf 2016が開催される
- 新しいForm APIのデザインドキュメントが公開される

ついにRCリリースが始まりましたがまだ5月です。

#### 2016年6月

- **Router 3.0.0-alpha.3のリリース**
  - angular/vladivostokで開発が開始
- **Angular 2.0.0-rc.2のリリース**
  - `<ng-container>`の導入
  - `ngSwitchWhen` が `ngSwitchCase` に改名
  - **`@angular/common`のForms APIが非推奨になる**
  - **`@angular/forms`パッケージの導入**
  - パッケージごとに`.umd.js`を配布するようになる
  - Animation APIの導入
- **Angular 2.0.0-rc.3のリリース**

#### 2016年7月

- **Angular 2.0.0-rc.4のリリース**
  - `@angular/core/testing`から`it`や`describe`など多くのAPIが削除される
- Router 3.0.0-beta.0のリリース
  - `data`と`resolve`の機能が実装される

#### 2016年8月

- **Angular 2.0.0-rc.5のリリース**
  - **`NgModule`の導入**
  - プートストラッピングが `platformBrowserDynamic().bootstrapModule(MyAppModule);` に
  - `TestInjector`の廃止と`TestBed`の導入
  - アニメーションのトリガーシンタックスが `[@trigger]` に変更される
  - Routingのイベントでアニメーションをトリガーできるようになる
  - `@angular/compiler-cli`の導入
- Router 3.0.0-rc.1,2のリリース

#### 2016年9月

- **Angular 2.0.0-rc.6のリリース**
  - **ES Module形式でnpmパッケージを配布するように変更**
  - `@Component.directives/pipes`の廃止
  - プロバイダの宣言が `{provider: MyClass, toFactory: ...}` に統一される
  - `replace`パイプの廃止
- **Angular 2.0.0-rc.7のリリース**   
- 9/14 :tada:**Angular 2.0.0のリリース**:balloon:
- Semantic Versioningの導入を宣言
- 半年に1回のメジャーアップデートを宣言
- 呼称を**Angular**に統一することを宣言
- Angular-CLIがwebpackに対応
- **Angular 2.0.1/2.1.0-beta.0のリリース**
  - RouterにPreloading機構を導入
- AngularConnect 2016がロンドンで開催

#### 2016年10月

- **Angular 2.0.2/2.1.0-rc.0のリリース**
- **Angular 2.1.0のリリース**
- 今後のバージョニングとリリースサイクルについての記事を公開（[公式ブログ](http://angularjs.blogspot.jp/2016/10/versioning-and-releasing-angular.html)）
- **Angular 2.1.1/2.2.0-beta.0のリリース**
  - RouterがAngularJSとの共存をサポート
- **Angular 2.1.2/2.2.0-beta.1のリリース**
  - `@angular/upgrade`のAPIの多くが`@angular/upgrade/static`に移動
- Angular Universalのコア部分をangular/angularリポジトリに移動することを発表

#### 2016年11月

- **Angular 2.2.0-rc.0のリリース**
- **Angular 2.2.0のリリース**
  - ngUpgrade APIがAoTコンパイルをサポート
- **Angular 2.2.1/2.3.0-beta.0のリリース**
- **Angular 2.2.2のリリース**
- **Angular 2.2.3のリリース**
- **Angular 2.2.4/2.3.0-rc.0のリリース**
  - `@angular/language-service`モジュールの導入
  - ComponentやDirectiveなどのクラスで継承が正しく動作するように修正される

#### 2016年12月

- **Angular 2.3.0のリリース**
  - 最後のマイナーバージョンアップになるはずだった
- **次期メジャーバージョンが4.0.0であることを発表**
- **Angular 2.3.1/4.0.0-beta.0のリリース**
- **Angular 2.4.0のリリース**
  - RxJSが 5.0.1安定版リリースしたため慌ててアップデート
- **Angular 2.4.1/4.0.0-beta.1のリリース**

というわけで1年間ふりかえってみると、去年の今頃はまだbeta.0で、今では当たり前に行われているAoTコンパイルはまだ構想段階でした。何が起こるかわからないものですね。

### 2017年のAngular

ここまで辛抱強く読んでくれたAngular好きのみなさんのために、次期メジャーバージョン 4.0、そしてその先で計画・構想されていることについて今わかる範囲で紹介します。

#### Service WorkerとPWAs

Angular [mobile-toolkit](https://github.com/angular/mobile-toolkit)が近々betaバージョンとなるようです。mobile-toolkitはAngularのアプリケーションをPWAにするために便利なユーティリティを提供してくれるライブラリで、Service WorkerのAPIをAngularのサービスとして提供してくれたり、プロジェクトの構成から自動的にmanifest.jsonを生成してくれたりします。

当初mobile-toolkitのbetaリリースは2016年中と発表していましたが、`@angular/app-shell`が依存しているAngular Universalの進捗が芳しくないため、もう少し時間がかかりそうです。

#### ngIfの新機能

バージョン4からngIfが強化され、新たに `else` と `then` を扱えるようになります。さらに、右辺の式の計算結果をローカル変数として利用することもできます。意味がわからないかもしれないので、サンプルコードを貼っておきます。

```html
<!-- これまでのngIf -->
<div *ngIf="show"></div>

<!-- elseを使って右辺の式を満たさないときのテンプレートを宣言する -->
<div *ngIf="show; else elseBlock"></div>
<template #elseBlock></template>

<!-- thenを使って右辺の式を満たすときのテンプレートを分離する -->
<div *ngIf="show; then thenBlock; else elseBlock"></div>
<template #thenBlock></template>
<template #elseBlock></template>

<!-- 右辺の計算結果をテンプレートローカル変数に割り当てる -->

<div *ngIf="someValue(); let val">
  {{ val }}
</div>
```

これらは **Reactive Angular** という2017年のAngularコアチームの取り組みのひとつです。`let`により計算結果を変数に割り当てできるので、`async`パイプとの親和性が高まっています。テンプレート中で `async`パイプを書く回数を減らそうというのが大きな狙いです。

```html
<!-- こういうテンプレートが書けるようになる -->
<div *ngIf="user$ | async; else loading; let user">
  Hello {{user.last}}, {{user.first}}!
</div>
<template #loading><img src="/images/loading.gif"></template>
```

#### DOM EventのCold Observable化シンタックスサポート

Reactive Angularからもうひとつ、現在議論中の機能について紹介します。現在 `(click)` のようなイベントバインディングは、内部的には`addEventListener`によるイベント購読を行なっています。つまりコンポーネントが生成された時点で裏で自動的に`addEventListener`が呼ばれてしまい、イベントハンドリングの開始タイミングを制御できません。新しいテンプレートシンタックスによりDOM EventをCold Observableとして取り出すことができれば、明示的に`subscribe`メソッドなどでHotにするまで遅延させることができますし、`unsubscribe`することで任意のタイミングにイベント購読をやめることができます。

RxJSとの親和性を高めるために重要なこの機能ですが、現在はシンタックスの形についての議論がなされている真っ最中です。
https://github.com/angular/angular/issues/13248
興味のある方は覗いてみて、自分の意見を述べてみてもいいでしょう。

### 4.0に向けて今からできること

**ないです**。強いて言えばAngular-CLIで十分なプロジェクトはAngular-CLIでの開発に乗り換えておく程度でしょう。なぜかといえば、4.0になっても今の2.xのAPIは何も消えないからです。Angular通のみなさんなら当然ご存知でしょうが、AngularのAPI Deprecation Policyでは、たとえ4.0でAPIが非推奨になっても実際に削除されるのは6.0だと宣言されています。
先日日本でコアチームのRob Warmoldが発表してくれたスライドがとてもわかりやすいです。

![image](https://qiita-image-store.s3.amazonaws.com/0/20253/b0567ffa-c166-8e08-e6ac-37e4ede37b95.png)

https://docs.google.com/presentation/d/1ZpYKmq4oZhddxmE2rEoTefA2p8CXFuQqYs2VaFUUD7M/edit#slide=id.g1a818e6f13_0_110

つまり、4.0がリリースされて、アップデートしてから1年間かけてゆっくり考えればいいです。怯えることはありません。今ある機能で冬を過ごしましょう。

## まとめ

Angular 2のalpha、betaから追い続けてきたみなさん、rc.5のNgModuleで叩き潰されたみなさん、お疲れ様でした。**結果オーライ**です。:innocent:

今のAngularはとてもいい形になりました。Material2もbetaリリースを迎え、Universalもコアに吸収されれば、プラットフォームとしてのAngularは、より一層強固なエコシステムに成長するでしょう。2017年は今年よりは多少穏やかに、ほどよい緊張感のもとにAngularと仲良くしていけるんじゃないかと思います。
それでは良いお年を。