Angular 4がやってくる！？新機能ダイジェスト

Angular 4 がやってくる！？
新機能ダイジェスト
2017/3/5
Angular 4 の最新動向と、2017年再注目のDart、そして Angular Dart
masahiko.asai

プロフィール
Masahiko Asai
ビズリーチ HRMOS事業部フロントエンドエンジニア
2005-2006
AMラジオディレクター/TV番組 AD
2007-2010
飲食運営本部Web担当/アーティストサイト運営
2011-2014
PHP エンジニア兼コーダー（ソシャゲー/某大手ECサイト）
2015-
フロントエンドエンジニア← いまここ

アジェンダ
1. Angular のリリースサイクル
2. Angular 4 の変更点ダイジェスト
3. Angular 2 で作った社内向け管理ツールを Angular 4 に移行してみた

1
Angular のリリースサイクル

2016.10.7 Angular Blog “Versioning and Releasing Angular”
http://angularjs.blogspot.jp/2016/10/versioning-and-releasing-angular.html
● Semantic Versioning の導入
● タイムベースのリリースサイクル
● 非推奨ポリシー
● 安定した API と実験的な API

Semantic Versioning の導入
http://semver.org/lang/ja/
● バージョン番号の付与ルールの一種。

Semantic Versioningの導入
X . Y . Z
major minor patch

Bug Fix 向けのリリース。
機能追加はない。
週 1 回リリースしていく予定。
X . Y . Z
major minor patch

後方互換のあるアップデート。月 1 回リリースしていく予定。
機能追加が含まれるが破壊的変更はない。依存関係の変更はあり得る
beta版・RC版の提供をスケジュールに含めており、徐々に品質を向上させていく。
X . Y . Z
major minor patch

Stable Phase x.0.0 ~ x.2.0
比較的安定したアップデート
Creative Phase x.3.0 ~ x+1 .0.0 beta
次のmajorでの導入も意識した意欲的なアップデート
X . Y . Z
major minor patch

破壊的変更を含む大きなリリース。概ね半年に1回実施。
4.0.0 は今年 3 月、5.0.0 は今年 9~10 月頃、6.0.0 は来年 3 月予定。
beta版・RC版の提供をスケジュールに含めており、徐々に品質を向上させていく。
X . Y . Z
major minor patch

まとめると
いまここ
(2017/3/6時点)

まとめると
いまここ
(2017/3/6時点)
rc.0 は一部のバグ修正がリリースに漏れてたらしく、幻になったらしい…

まとめると
いまここ
(2017/3/6時点)
3 月 23 日頃リリース予定（たぶん）

非推奨ポリシーの導入
● オワコンになる機能が実際に削除されるまでに、開発者が事前に
準備できるようにするためのポリシー。
○ リリースノートで廃止予定を発表する際は、推奨アップデートパスもお知らせ
するよ
○ 非推奨期間中は安定版APIの既存の使用方法（コードは機能し続ける）をサ
ポートし、コードから削除するまでには 6 ヶ月以上（2 つのメジャーリリース）
を経るようにするよ

非推奨ポリシーの導入
● Angular エコシステムの発展には、ライブラリやチュートリアル、ツール、
学習コストがムダにならないように、Angular フレームワークには安定性
が必要
● 一方で、Angular が進化し続けることも望んでいる
● 両方のニーズを満たすための運用方針

Semantic Versioning 対象のモジュール
● @angular/core
● @angular/common
● @angular/platform-browser
● @angular/platform-browser-dynamic
● @angular/platform-server
● @angular/platform-webworker
● @angular/platform-webworker-dynamic
● @angular/upgrade
● @angular/router
● @angular/forms
● @angular/http
● @angular/compiler-cli（コマンドラインで使用する場合のみ）

● @angular/core
● @angular/common
● @angular/platform-browser
● @angular/platform-browser-dynamic
● @angular/platform-server
● @angular/platform-webworker
● @angular/platform-webworker-dynamic
● @angular/upgrade
● @angular/router
● @angular/forms
● @angular/http
● @angular/compiler-cli（コマンドラインで使用する場合のみ）
angular-cli、Angular Material 2 のような、Angular チームによって開発された
他のプロジェクトにも、ゆくゆく対象となっていく予定だそう

● TypeScript, Zone.js, RxJS といったPeer-Dependencies は、API の一
部じゃないけど、Semantic Versioning のポリシーで運用するよ
● マイナーリリースでこれらの依存関係が保てる必要なバージョンにアッ
プデートすることがあるよ
● 詳しくは PUBLIC_API.md を参照

2
Angular 4 の変更点ダイジェスト

はじめに
● 公式リポジトリの CHANGELOG.md を追いかけていけば網羅できるけど、正式
版リリースの際には、変更点のトピックスおよびドキュメントが
アップデートされるはず
● ここからは僕の独断と偏見で、印象的な変更点をダイジェストでご紹介
○ あまりアプリケーション実装時にお世話にならない箇所は割愛します

主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOMまわり: meta タグの追加・更新・削除が可能に
● フォームまわり: Email Validator, equalTo Validator の追加

View Engine の改善
● AOT コンパイルで書き出されるソースコードにチューニングが入った
● 場合によっては Component の生成コードのサイズが半分以上削減される
● この改善案件は最優先事項ではなかったし、AOTが優れたパフォーマンスを出
すと思っていたそう
○ （競合の）新しいフレームワークは、 Angular と変わらないパフォーマンスを持つようになり、
Angular と比較してテンプレートのサイズが小さい …！

What is AOT?
● AOT = Ahead of Time
○ 反対にWeb ブラウザがアプリケーションをロードして実行する際にコンパイルする方法は
Just in Time（JIT）方式と呼ばれる（AngularJS含め従来の方法）。
● ビルド時にAngular の Module や Componentを予めコンパイルしておく
ことで、アプリケーションのパフォーマンスを大きく向上できる仕組み
● 公式ドキュメントはこちら

JIT Compile の弱点
● ランタイム・パフォーマンスの低下が発生する
○ Web ブラウザを実行しているマシンスペックに依存してしまう
● ブラウザ内でコンパイルするため、ビューのレンダリングに時間がかかる
● アプリケーションサイズが大きくなってしまう
○ Angular Compilerなど、アプリケーションの実動作には必要としない多くのライブラリコードが含
まれてしまう
● View Template にコンパイルに失敗するような誤った書き方をすると
エラーとなるが、そのエラーはWeb ブラウザ上で確認することになる
○ 本当はビルド時にわかった方が素敵じゃない？

AOT Compile にすると
● View Templateの構文エラーもビルド時に把握できるようになる
● Compiler ライブラリが不要になるので、アプリケーションのファイルサイズが減
る（こともある）
○ Angular アプリケーションファイルの約半分はCompiler が占めている？
● Webブラウザ上では、アプリケーションの初回コンパイルが不要になり、パ
フォーマンスが向上する
● Component で用いる HTML や CSS も予め内包するため、Ajaxによる非同期
fetch が不要になる
○ テンプレートを読み込む必要がなくなるため、クライアント側のHTMLやJavaScriptに
よる注入攻撃の機会が少なくなります。

実際ためしてみた
● @angular/cli を用いて、Angular 2 アプリと Angular 4 アプリをセットアップ
● 画面に「app-works!」と表示されるだけのもの
○ いわゆる cli で init したら初期構築されるもので純粋に検証
○ 実アプリケーションでのお話は後述

npm uninstall -g angular-cli // beta28より前のangular-cliをインストールしている場合
npm install -g @angular/cli
ng set --global packageManager=yarn
ng new angular2-sample-app
ng new --ng4 angular4-sample-app

npm uninstall -g angular-cli // beta28より前のangular-cliをインストールしている場合
npm install -g @angular/cli
ng set --global packageManager=yarn
ng new angular2-sample-app
ng new --ng4 angular4-sample-app
--ng4 オプションを付与すれば、
Angular 4 rc でアプリケーションが初期構築可能

main.bundle.js
Angular 2 … 27.1KB

main.bundle.js
29.1% の削減

<template> タグが非推奨に
● template タグ（または template 属性を持つ要素）は、ng-template タグに書き
換えが必要
○ 単純に、記述する要素名がng-template に変わっただけ
● ただ置換するだけで OK だけど、依存している外部モジュールは多そう
○ Angular Material 2, ng-bootstrap, etc…
● Angular 4.x.x では非推奨となっただけ。
○ template のままでも問題なく動作する

*ngIf 構文の拡張
● *ngIf の記述で、if/then, if/then/else スタイルの記述が可能になった
○ AngularJS でいう ng-elif module みたいなようなことができる
○ 痒いところに手が届くオプション
● Observable にも対応
○ 「ローディング中はプログレスバーを表示、API からレスポンスが到着したらデータを
表示」といったケースは、よりスマートに記述できるようになった
○ RxJS の辛みが少し軽減されるかも

*ngIf 構文の拡張（Example）

@angular/animations の独立
● アニメーションに関する処理を @angular/core モジュールから削除し、
@angular/animations という独自のモジュールに移した
○ アニメーションを使用しない場合、余分なコードとなってしまう問題の解消
● Angular Material 2 のような、アニメーションを必要とするライブラリがあれば、
モジュールを（npm経由でインストールすると）自動的にインポートされる
○ もちろんapp.module.ts に手動追加することも可能

@angular/animations の独立
app.module.ts
@ngModule の imports: 配列の中に追記するだけで OK

TypeScript 2.1 へのアップデート
● Angularをより新しいバージョンのTypeScriptにアップデート
○ これにより、ngc の速度が向上。
アプリケーション全体でより良い型チェックの恩恵に預かれる
○ TypeScript 2.1.6 以降が必要
● StrictNullChecks のサポート
○ TypeScript の StrictNullChecks に対応
■ StrictNullChecks … nullやundefined の代入を許可しないように設定するフラグ
○ 必要に応じて、プロジェクトでStrictNullChecksを有効にすることができる
■ tsconfig.json の compilerOptions に追記するだけ

DOMまわり: meta タグの追加・更新・削除が可能に
● <meta name=”” content=””> みたいなタグをDOMに埋め込みできるようになった
○ SPA ではあまりお世話にならないかもしれないけど、
Angular Universal を用いた Server-side Rendering では重宝される機能では？
● @angular/platform-browser module に追加されています
○ 使い方は Title とほぼ同様

フォームまわり: Email Validator, EqualTo Validator の追加
● Email フォーマットのバリデーションが実装されました
○ 内部では正規表現を用いてチェック
○ Regex は AngularJS の Email Validation と同じ
● equalsTo は2つの配列が一致しているかどうかチェックできるバリデーション
● 使い方
<input type="email" name="email" ngModel email>

所感
● Semantic Versioning 導入後の、初 Major Release
○ 想像していたより、大きな破壊的変更は少ない印象
○ 現時点では、非推奨はあれど廃止になった機能はまだないよ！
● View Engine の改善は大きい
○ これだけのためにAngular 4 にアップデートしていいと思う！
● 周辺環境もアップデートされるので良い機会
○ TypeScript 1.8 から TypeScript 2.1 ベースに

3
Angular 2 で作った
社内向け管理ツールを
Angular 4 に移行してみた

ハーモニーお菓子管理
● HRMOS 事業部には、お菓子コーナーがあります
● お菓子を持っていく際に、カンパを出していただく
● そのカンパのお金でバイヤーが入荷
● このお菓子の商品ラインアップを見れる管理画面
○ Angular 2.4 + Firebase で構築
○ angular-cli で運用している

https://snacks-staging.firebaseapp.com/

アプリケーションの規模感
● 14 Components
● 4 Services
● 5 Routes

使っている 3rd-party modules
● @angular/material
● ng-bootstrap
● ng2-toastr
● angularfire2

アップデートパス
1. angular-cli から @angular/cli へアップデート
2. 書き換えが必要な箇所をひとつずつ修正
3. ビルドを実行

angular-cli から @angular/cli へアップデート
● 最短で Angular 4 へアップデートするなら、angular-cli。
● angular-cli は、現在 rc.1
● beta28 でパッケージ名が変わり、@angular に統合された
○ angular-cli.json の設定フォーマットも変更点あり
○ RC Migration Guide をもとに移行を行なう

まだまだ進化を続ける @angular/cli
● guard を generate できるようになったり
● ng eject コマンドで webpack 設定を取り出せるようになったり
● ng init, ng update コマンドが削除された
○ 現時点では、@angular/cli を用いて簡単にフレームワークを
アップデートできる仕組みは無いが、ゆくゆく提供する意思は
ある様子

angular-cli から @angular/cli へアップデート
● ng new --ng4 sampleApp で空のAngular 4 アプリケーションを
構築
● 生成されたファイルとの diff を元に、お菓子管理アプリケーション
に反映

書き換えが必要な箇所をひとつずつ修正
● とはいえ小さなアプリなので、変更箇所は少なめ
○ <template> を <ng-template> に変更した程度

書き換えが必要な箇所をひとつずつ修正
● アニメーション処理には、@angular/animations を
用いるように修正
Angular 2
Angular 4

ビルドを実行
本当にAOT ビルドで、ファイルサイズが軽くなるのか？
Angular 2 と Angular 4 で比較

ビルドを実行
Angular 2
Angular 4

ビルドを実行
Angular 2
Angular 4
1.02 MB
452 KB + 155KB = 607KB

ビルドを実行
Angular 2
Angular 4
1.02 MB
452 KB + 155KB = 607KB
アプリケーション本体のソースファイルサイズが 41 % 削減！

アップデートの所感
● ほとんどハマらずに移行ができた（作業時間はおおよそ半
日）
○ 非推奨になった構文やコードは、実行したら console.warn() で
表示される、ありがたい。

アップデートの所感
● 3rd-party module の Angular 4 対応が進んだら、本格移行
できそう
○ ng2-toastr はもう対応していた！
○ ng-bootstrap の tooltip directive が動作しなかった
■ 仕方ないので、Angular Material 2 の tooltip に置き換え
■ Angular Material 2 もいくつか非推奨warningが出るが動作に影
響はなし

所感まとめ
● Semantic Versioning 導入後の、初 Major Release
○ 想像していたより小さなアップデート。破壊的変更は少ない印象
○ 現時点では、非推奨はあれど廃止になった機能はまだないよ！
● View Engine の改善は大きい
○ これだけのためにAngular 4 にアップデートしていいと思う！
● 周辺環境もアップデートされるので良い機会
○ TypeScript 1.8 から TypeScript 2.1 ベースに

Thanks!
ご静聴ありがとうございました

Angular 4がやってくる！？新機能ダイジェスト

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angular 4がやってくる！？新機能ダイジェスト

Similar to Angular 4がやってくる！？新機能ダイジェスト (20)