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

Angular 4 がやってくる！？新機能ダイジェスト

2017/3/5Angular 4 の最新動向と、2017年再注目のDart、そして Angular Dart

masahiko.asai

プロフィール

Masahiko Asaiビズリーチ HRMOS事業部フロントエンドエンジニア

• 2005-2006AMラジオディレクター/TV番組 AD

• 2007-2010飲食運営本部 Web担当/アーティストサイト運営

• 2011-2014PHP エンジニア兼コーダー（ソシャゲー/某大手ECサイト）

• 2015-フロントエンドエンジニア ← いまここ

アジェンダ

1. Angular のリリースサイクル

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

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

1Angular のリリースサイクル

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 . Zmajor minor patch


Bug Fix 向けのリリース。

機能追加はない。

週 1 回リリースしていく予定。



後方互換のあるアップデート。月 1 回リリースしていく予定。機能追加が含まれるが破壊的変更はない。依存関係の変更はあり得る

beta版・RC版の提供をスケジュールに含めており、徐々に品質を向上させていく。



Stable Phase x.0.0 ~ x.2.0比較的安定したアップデート

Creative Phase x.3.0 ~ x+1 .0.0 beta次のmajorでの導入も意識した意欲的なアップデート



破壊的変更を含む大きなリリース。概ね半年に1回実施。

4.0.0 は今年 3 月、5.0.0 は今年 9~10 月頃、6.0.0 は来年 3 月予定。

beta版・RC版の提供をスケジュールに含めており、徐々に品質を向上させていく。


まとめると

まとめると

いまここ(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 を参照

https://github.com/angular/angular/blob/master/docs/PUBLIC_API.md

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

はじめに

● 公式リポジトリの CHANGELOG.md を追いかけていけば網羅できるけど、正式

版リリースの際には、変更点のトピックスおよびドキュメントが

アップデートされるはず

● ここからは僕の独断と偏見で、印象的な変更点をダイジェストでご紹介

○ あまりアプリケーション実装時にお世話にならない箇所は割愛します

https://github.com/angular/angular/blob/master/CHANGELOG.md#whats-new

主な変更点ダイジェスト

● 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を予めコンパイルしておく

ことで、アプリケーションのパフォーマンスを大きく向上できる仕組み

● 公式ドキュメントはこちら

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

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/cling set --global packageManager=yarnng new angular2-sample-appng new --ng4 angular4-sample-app


npm uninstall -g angular-cli // beta28より前のangular-cliをインストールしている場合

npm install -g @angular/cling set --global packageManager=yarnng new angular2-sample-appng 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 の辛みが少し軽減されるかも

https://github.com/zachsnow/ng-elif

*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 ベースに

3Angular 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 をもとに移行を行なう

https://github.com/angular/angular-cli/wiki/stories-rc-update

https://github.com/angular/angular-cli/wiki/stories-rc-update

まだまだ進化を続ける @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が出るが動作に影

響はなし

4所感まとめ

所感まとめ

● Semantic Versioning 導入後の、初 Major Release

○ 想像していたより小さなアップデート。破壊的変更は少ない印象

○ 現時点では、非推奨はあれど廃止になった機能はまだないよ！

● View Engine の改善は大きい

○ これだけのために Angular 4 にアップデートしていいと思う！

● 周辺環境もアップデートされるので良い機会

○ TypeScript 1.8 から TypeScript 2.1 ベースに

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

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

Software

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