Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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-20...
アジェンダ
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-an...
Semantic Versioning の導入
http://semver.org/lang/ja/
● バージョン番号の付与ルールの一種。
Semantic Versioningの導入
X . Y . Z
major minor patch
Semantic Versioningの導入
Bug Fix 向けのリリース。
機能追加はない。
週 1 回リリースしていく予定。
X . Y . Z
major minor patch
Semantic Versioningの導入
後方互換のあるアップデート。月 1 回リリースしていく予定。
機能追加が含まれるが破壊的変更はない。依存関係の変更はあり得る
beta版・RC版の提供をスケジュールに含めており、徐々に品質を向上させ...
Semantic Versioningの導入
Stable Phase x.0.0 ~ x.2.0
比較的安定したアップデート
Creative Phase x.3.0 ~ x+1 .0.0 beta
次のmajorでの導入も意識した意欲的なア...
Semantic Versioningの導入
破壊的変更を含む大きなリリース。概ね半年に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の既存...
非推奨ポリシーの導入
● Angular エコシステムの発展には、ライブラリやチュートリアル、ツール、
学習コストがムダにならないように、Angular フレームワークには安定性
が必要
● 一方で、Angular が進化し続けることも望んでい...
Semantic Versioning 対象のモジュール
● @angular/core
● @angular/common
● @angular/platform-browser
● @angular/platform-browser-dyn...
Semantic Versioning 対象のモジュール
● @angular/core
● @angular/common
● @angular/platform-browser
● @angular/platform-browser-dyn...
Semantic Versioning 対象のモジュール
● TypeScript, Zone.js, RxJS といったPeer-Dependencies は、API の一
部じゃないけど、Semantic Versioning のポリシーで...
2
Angular 4 の変更点ダイジェスト
はじめに
● 公式リポジトリの CHANGELOG.md を追いかけていけば網羅できるけど、正式
版リリースの際には、変更点のトピックス および ドキュメントが
アップデートされるはず
● ここからは僕の独断と偏見で、印象的な変更点をダイジェス...
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
View Engine の改善
● AOT コンパイルで書き出されるソースコードにチューニングが入った
● 場合によっては Component の生成コードのサイズが半分以上削減される
● この改善案件は最優先事項ではなかったし、AOTが優れた...
What is AOT?
● AOT = Ahead of Time
○ 反対にWeb ブラウザがアプリケーションをロードして実行する際にコンパイルする方法は
Just in Time(JIT)方式と呼ばれる(AngularJS含め従来の方法)...
JIT Compile の弱点
● ランタイム・パフォーマンスの低下が発生する
○ Web ブラウザを実行しているマシンスペックに依存してしまう
● ブラウザ内でコンパイルするため、ビューのレンダリングに時間がかかる
● アプリケーションサイズ...
AOT Compile にすると
● View Templateの構文エラーもビルド時に把握できるようになる
● Compiler ライブラリが不要になるので、アプリケーションのファイルサイズが減
る(こともある)
○ Angular アプリケ...
実際ためしてみた
● @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 pa...
実際ためしてみた
npm uninstall -g angular-cli // beta28より前のangular-cliをインストールしている場合
npm install -g @angular/cli
ng set --global pa...
実際ためしてみた
実際ためしてみた
main.bundle.js
Angular 2 … 27.1KB
Angular 4 … 19.2KB
実際ためしてみた
main.bundle.js
Angular 2 … 27.1KB
Angular 4 … 19.2KB
29.1% の削減
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
<template> タグが非推奨に
● template タグ(または template 属性を持つ要素)は、ng-template タグに書き
換えが必要
○ 単純に、記述する要素名がng-template に変わっただけ
● ただ置換する...
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
*ngIf 構文の拡張
● *ngIf の記述で、if/then, if/then/else スタイルの記述が可能になった
○ AngularJS でいう ng-elif module みたいなようなことができる
○ 痒いところに手が届くオプシ...
*ngIf 構文の拡張(Example)
*ngIf 構文の拡張(Example)
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
@angular/animations の独立
● アニメーションに関する処理を @angular/core モジュールから削除し、
@angular/animations という独自のモジュールに移した
○ アニメーションを使用しない場合、余...
@angular/animations の独立
app.module.ts
@ngModule の imports: 配列の中に追記するだけで OK
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
TypeScript 2.1 へのアップデート
● Angularをより新しいバージョンのTypeScriptにアップデート
○ これにより、ngc の速度が向上。
アプリケーション全体でより良い型チェックの恩恵に預かれる
○ TypeScri...
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
DOMまわり: meta タグの追加・更新・削除が可能に
● <meta name=”” content=””> みたいなタグをDOMに埋め込みできるようになった
○ SPA ではあまりお世話にならないかもしれないけど、
Angular Uni...
主な変更点ダイジェスト
● View Engine の改善
● <template> タグが非推奨に
● *ngIf 構文の拡張
● @angular/animations の独立
● TypeScript 2.1 へのアップデート
● DOM...
フォームまわり: Email Validator, EqualTo Validator の追加
● Email フォーマットのバリデーションが実装されました
○ 内部では正規表現を用いてチェック
○ Regex は AngularJS の Em...
所感
● Semantic Versioning 導入後の、初 Major Release
○ 想像していたより、大きな破壊的変更は少ない印象
○ 現時点では、非推奨はあれど廃止になった機能はまだないよ!
● View Engine の改善は大...
3
Angular 2 で作った
社内向け管理ツールを
Angular 4 に移行してみた
ハーモニーお菓子管理
● HRMOS 事業部には、お菓子コーナーがあります
● お菓子を持っていく際に、カンパを出していただく
● そのカンパのお金でバイヤーが入荷
● このお菓子の商品ラインアップを見れる管理画面
○ Angular 2.4 ...
ハーモニーお菓子管理
ハーモニーお菓子管理
ハーモニーお菓子管理
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. ビルドを実行
アップデート パス
1. angular-cli から @angular/cli へアップデート
2. 書き換えが必要な箇所をひとつずつ修正
3. ビルドを実行
angular-cli から @angular/cli へアップデート
● 最短で Angular 4 へアップデートするなら、angular-cli。
● angular-cli は、現在 rc.1
● beta28 でパッケージ名が変わり、...
まだまだ進化を続ける @angular/cli
● guard を generate できるようになったり
● ng eject コマンドで webpack 設定を取り出せるようになったり
● ng init, ng update コマンドが削...
angular-cli から @angular/cli へアップデート
● ng new --ng4 sampleApp で空のAngular 4 アプリケーションを
構築
● 生成されたファイルとの diff を元に、お菓子管理アプリケーショ...
アップデート パス
1. angular-cli から @angular/cli へアップデート
2. 書き換えが必要な箇所をひとつずつ修正
3. ビルドを実行
書き換えが必要な箇所をひとつずつ修正
● とはいえ小さなアプリなので、変更箇所は少なめ
○ <template> を <ng-template> に変更した程度
書き換えが必要な箇所をひとつずつ修正
● アニメーション処理には、@angular/animations を
用いるように修正
Angular 2
Angular 4
アップデート パス
1. angular-cli から @angular/cli へアップデート
2. 書き換えが必要な箇所をひとつずつ修正
3. ビルドを実行
ビルドを実行
本当に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 が動作し...
4
所感まとめ
所感まとめ
● Semantic Versioning 導入後の、初 Major Release
○ 想像していたより小さなアップデート。破壊的変更は少ない印象
○ 現時点では、非推奨はあれど廃止になった機能はまだないよ!
● View Eng...
Thanks!
ご静聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

12,377 views

Published on

もうすぐリリースされる Angular 4 について、rc 版をさわってみました。Angular 2 からの変更点をダイジェストにご紹介します。
後半では、社内運用している Angular 2 アプリケーションを、実際に Angular 4 に移行してみたお話をしました。

Published in: Software
  • Be the first to comment

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

  1. 1. Angular 4 がやってくる!? 新機能ダイジェスト 2017/3/5 Angular 4 の最新動向と、2017年再注目のDart、そして Angular Dart masahiko.asai
  2. 2. プロフィール Masahiko Asai ビズリーチ HRMOS事業部 フロントエンドエンジニア 2005-2006 AMラジオ ディレクター/TV番組 AD 2007-2010 飲食運営本部Web担当/アーティスト サイト運営 2011-2014 PHP エンジニア 兼 コーダー(ソシャゲー/某大手ECサイト) 2015- フロントエンドエンジニア← いまここ
  3. 3. アジェンダ 1. Angular のリリースサイクル 2. Angular 4 の変更点ダイジェスト 3. Angular 2 で作った社内向け管理ツールを Angular 4 に移行してみた
  4. 4. 1 Angular のリリースサイクル
  5. 5. 2016.10.7 Angular Blog “Versioning and Releasing Angular” http://angularjs.blogspot.jp/2016/10/versioning-and-releasing-angular.html ● Semantic Versioning の導入 ● タイムベースのリリースサイクル ● 非推奨ポリシー ● 安定した API と 実験的な API
  6. 6. Semantic Versioning の導入 http://semver.org/lang/ja/ ● バージョン番号の付与ルールの一種。
  7. 7. Semantic Versioningの導入 X . Y . Z major minor patch
  8. 8. Semantic Versioningの導入 Bug Fix 向けのリリース。 機能追加はない。 週 1 回リリースしていく予定。 X . Y . Z major minor patch
  9. 9. Semantic Versioningの導入 後方互換のあるアップデート。月 1 回リリースしていく予定。 機能追加が含まれるが破壊的変更はない。依存関係の変更はあり得る beta版・RC版の提供をスケジュールに含めており、徐々に品質を向上させていく。 X . Y . Z major minor patch
  10. 10. Semantic Versioningの導入 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
  11. 11. Semantic Versioningの導入 破壊的変更を含む大きなリリース。概ね半年に1回実施。 4.0.0 は 今年 3 月、5.0.0 は 今年 9~10 月頃、6.0.0 は 来年 3 月予定。 beta版・RC版の提供をスケジュールに含めており、徐々に品質を向上させていく。 X . Y . Z major minor patch
  12. 12. まとめると
  13. 13. まとめると いまここ (2017/3/6時点)
  14. 14. まとめると いまここ (2017/3/6時点) rc.0 は一部のバグ修正がリリースに漏れてたらしく、幻になったらしい…
  15. 15. まとめると いまここ (2017/3/6時点) 3 月 23 日頃 リリース予定(たぶん)
  16. 16. 非推奨ポリシーの導入 ● オワコンになる機能が実際に削除されるまでに、開発者が事前に 準備できるようにするためのポリシー。 ○ リリースノートで廃止予定を発表する際は、推奨アップデートパスもお知らせ するよ ○ 非推奨期間中は安定版APIの既存の使用方法(コードは機能し続ける)をサ ポートし、コードから削除するまでには 6 ヶ月以上(2 つのメジャーリリース) を経るようにするよ
  17. 17. 非推奨ポリシーの導入 ● Angular エコシステムの発展には、ライブラリやチュートリアル、ツール、 学習コストがムダにならないように、Angular フレームワークには安定性 が必要 ● 一方で、Angular が進化し続けることも望んでいる ● 両方のニーズを満たすための運用方針
  18. 18. 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(コマンドラインで使用する場合のみ)
  19. 19. 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-cli、Angular Material 2 のような、Angular チームによって開発された 他のプロジェクトにも、ゆくゆく対象となっていく予定だそう
  20. 20. Semantic Versioning 対象のモジュール ● TypeScript, Zone.js, RxJS といったPeer-Dependencies は、API の一 部じゃないけど、Semantic Versioning のポリシーで運用するよ ● マイナーリリースでこれらの依存関係が保てる必要なバージョンにアッ プデートすることがあるよ ● 詳しくは PUBLIC_API.md を参照
  21. 21. 2 Angular 4 の変更点ダイジェスト
  22. 22. はじめに ● 公式リポジトリの CHANGELOG.md を追いかけていけば網羅できるけど、正式 版リリースの際には、変更点のトピックス および ドキュメントが アップデートされるはず ● ここからは僕の独断と偏見で、印象的な変更点をダイジェストでご紹介 ○ あまりアプリケーション実装時にお世話にならない箇所は割愛します
  23. 23. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  24. 24. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  25. 25. View Engine の改善 ● AOT コンパイルで書き出されるソースコードにチューニングが入った ● 場合によっては Component の生成コードのサイズが半分以上削減される ● この改善案件は最優先事項ではなかったし、AOTが優れたパフォーマンスを出 すと思っていたそう ○ (競合の)新しいフレームワークは、 Angular と変わらないパフォーマンスを持つようになり、 Angular と比較してテンプレートのサイズが小さい …!
  26. 26. What is AOT? ● AOT = Ahead of Time ○ 反対にWeb ブラウザがアプリケーションをロードして実行する際にコンパイルする方法は Just in Time(JIT)方式と呼ばれる(AngularJS含め従来の方法)。 ● ビルド時にAngular の Module や Componentを予めコンパイルしておく ことで、アプリケーションのパフォーマンスを大きく向上できる仕組み ● 公式ドキュメントはこちら
  27. 27. JIT Compile の弱点 ● ランタイム・パフォーマンスの低下が発生する ○ Web ブラウザを実行しているマシンスペックに依存してしまう ● ブラウザ内でコンパイルするため、ビューのレンダリングに時間がかかる ● アプリケーションサイズが大きくなってしまう ○ Angular Compilerなど、アプリケーションの実動作には必要としない多くのライブラリコードが含 まれてしまう ● View Template にコンパイルに失敗するような誤った書き方をすると エラーとなるが、そのエラーはWeb ブラウザ上で確認することになる ○ 本当はビルド時にわかった方が素敵じゃない?
  28. 28. AOT Compile にすると ● View Templateの構文エラーもビルド時に把握できるようになる ● Compiler ライブラリが不要になるので、アプリケーションのファイルサイズが減 る(こともある) ○ Angular アプリケーションファイルの約半分はCompiler が占めている? ● Webブラウザ上では、アプリケーションの初回コンパイルが不要になり、パ フォーマンスが向上する ● Component で用いる HTML や CSS も予め内包するため、Ajaxによる非同期 fetch が不要になる ○ テンプレートを読み込む必要がなくなるため、クライアント側のHTMLやJavaScriptに よる注入攻撃の機会が少なくなります。
  29. 29. 実際ためしてみた ● @angular/cli を用いて、Angular 2 アプリと Angular 4 アプリをセットアップ ● 画面に「app-works!」と表示されるだけのもの ○ いわゆる cli で init したら初期構築されるもので純粋に検証 ○ 実アプリケーションでのお話は後述
  30. 30. 実際ためしてみた 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
  31. 31. 実際ためしてみた 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 でアプリケーションが初期構築可能
  32. 32. 実際ためしてみた
  33. 33. 実際ためしてみた main.bundle.js Angular 2 … 27.1KB Angular 4 … 19.2KB
  34. 34. 実際ためしてみた main.bundle.js Angular 2 … 27.1KB Angular 4 … 19.2KB 29.1% の削減
  35. 35. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  36. 36. <template> タグが非推奨に ● template タグ(または template 属性を持つ要素)は、ng-template タグに書き 換えが必要 ○ 単純に、記述する要素名がng-template に変わっただけ ● ただ置換するだけで OK だけど、依存している外部モジュールは多そう ○ Angular Material 2, ng-bootstrap, etc… ● Angular 4.x.x では非推奨となっただけ。 ○ template のままでも問題なく動作する
  37. 37. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  38. 38. *ngIf 構文の拡張 ● *ngIf の記述で、if/then, if/then/else スタイルの記述が可能になった ○ AngularJS でいう ng-elif module みたいなようなことができる ○ 痒いところに手が届くオプション ● Observable にも対応 ○ 「ローディング中はプログレスバーを表示、API からレスポンスが到着したらデータを 表示」といったケースは、よりスマートに記述できるようになった ○ RxJS の辛みが少し軽減されるかも
  39. 39. *ngIf 構文の拡張(Example)
  40. 40. *ngIf 構文の拡張(Example)
  41. 41. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  42. 42. @angular/animations の独立 ● アニメーションに関する処理を @angular/core モジュールから削除し、 @angular/animations という独自のモジュールに移した ○ アニメーションを使用しない場合、余分なコードとなってしまう問題の解消 ● Angular Material 2 のような、アニメーションを必要とするライブラリがあれば、 モジュールを(npm経由でインストールすると)自動的にインポートされる ○ もちろんapp.module.ts に手動追加することも可能
  43. 43. @angular/animations の独立 app.module.ts @ngModule の imports: 配列の中に追記するだけで OK
  44. 44. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  45. 45. TypeScript 2.1 へのアップデート ● Angularをより新しいバージョンのTypeScriptにアップデート ○ これにより、ngc の速度が向上。 アプリケーション全体でより良い型チェックの恩恵に預かれる ○ TypeScript 2.1.6 以降が必要 ● StrictNullChecks のサポート ○ TypeScript の StrictNullChecks に対応 ■ StrictNullChecks … nullやundefined の代入を許可しないように設定するフラグ ○ 必要に応じて、プロジェクトでStrictNullChecksを有効にすることができる ■ tsconfig.json の compilerOptions に追記するだけ
  46. 46. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  47. 47. DOMまわり: meta タグの追加・更新・削除が可能に ● <meta name=”” content=””> みたいなタグをDOMに埋め込みできるようになった ○ SPA ではあまりお世話にならないかもしれないけど、 Angular Universal を用いた Server-side Rendering では重宝される機能では? ● @angular/platform-browser module に追加されています ○ 使い方は Title とほぼ同様
  48. 48. 主な変更点ダイジェスト ● View Engine の改善 ● <template> タグが非推奨に ● *ngIf 構文の拡張 ● @angular/animations の独立 ● TypeScript 2.1 へのアップデート ● DOMまわり: meta タグの追加・更新・削除が可能に ● フォームまわり: Email Validator, equalTo Validator の追加
  49. 49. フォームまわり: Email Validator, EqualTo Validator の追加 ● Email フォーマットのバリデーションが実装されました ○ 内部では正規表現を用いてチェック ○ Regex は AngularJS の Email Validation と同じ ● equalsTo は2つの配列が一致しているかどうかチェックできるバリデーション ● 使い方 <input type="email" name="email" ngModel email>
  50. 50. 所感 ● Semantic Versioning 導入後の、初 Major Release ○ 想像していたより、大きな破壊的変更は少ない印象 ○ 現時点では、非推奨はあれど廃止になった機能はまだないよ! ● View Engine の改善は大きい ○ これだけのためにAngular 4 にアップデートしていいと思う! ● 周辺環境もアップデートされるので良い機会 ○ TypeScript 1.8 から TypeScript 2.1 ベースに
  51. 51. 3 Angular 2 で作った 社内向け管理ツールを Angular 4 に移行してみた
  52. 52. ハーモニーお菓子管理 ● HRMOS 事業部には、お菓子コーナーがあります ● お菓子を持っていく際に、カンパを出していただく ● そのカンパのお金でバイヤーが入荷 ● このお菓子の商品ラインアップを見れる管理画面 ○ Angular 2.4 + Firebase で構築 ○ angular-cli で運用している
  53. 53. ハーモニーお菓子管理
  54. 54. ハーモニーお菓子管理
  55. 55. ハーモニーお菓子管理 https://snacks-staging.firebaseapp.com/
  56. 56. アプリケーションの規模感 ● 14 Components ● 4 Services ● 5 Routes
  57. 57. 使っている 3rd-party modules ● @angular/material ● ng-bootstrap ● ng2-toastr ● angularfire2
  58. 58. アップデート パス 1. angular-cli から @angular/cli へアップデート 2. 書き換えが必要な箇所をひとつずつ修正 3. ビルドを実行
  59. 59. アップデート パス 1. angular-cli から @angular/cli へアップデート 2. 書き換えが必要な箇所をひとつずつ修正 3. ビルドを実行
  60. 60. angular-cli から @angular/cli へアップデート ● 最短で Angular 4 へアップデートするなら、angular-cli。 ● angular-cli は、現在 rc.1 ● beta28 でパッケージ名が変わり、@angular に統合された ○ angular-cli.json の設定フォーマットも変更点あり ○ RC Migration Guide をもとに移行を行なう
  61. 61. まだまだ進化を続ける @angular/cli ● guard を generate できるようになったり ● ng eject コマンドで webpack 設定を取り出せるようになったり ● ng init, ng update コマンドが削除された ○ 現時点では、@angular/cli を用いて簡単にフレームワークを アップデートできる仕組みは無いが、ゆくゆく提供する意思は ある様子
  62. 62. angular-cli から @angular/cli へアップデート ● ng new --ng4 sampleApp で空のAngular 4 アプリケーションを 構築 ● 生成されたファイルとの diff を元に、お菓子管理アプリケーション に反映
  63. 63. アップデート パス 1. angular-cli から @angular/cli へアップデート 2. 書き換えが必要な箇所をひとつずつ修正 3. ビルドを実行
  64. 64. 書き換えが必要な箇所をひとつずつ修正 ● とはいえ小さなアプリなので、変更箇所は少なめ ○ <template> を <ng-template> に変更した程度
  65. 65. 書き換えが必要な箇所をひとつずつ修正 ● アニメーション処理には、@angular/animations を 用いるように修正 Angular 2 Angular 4
  66. 66. アップデート パス 1. angular-cli から @angular/cli へアップデート 2. 書き換えが必要な箇所をひとつずつ修正 3. ビルドを実行
  67. 67. ビルドを実行 本当にAOT ビルドで、ファイルサイズが軽くなるのか? Angular 2 と Angular 4 で比較
  68. 68. ビルドを実行 Angular 2 Angular 4
  69. 69. ビルドを実行 Angular 2 Angular 4 1.02 MB 452 KB + 155KB = 607KB
  70. 70. ビルドを実行 Angular 2 Angular 4 1.02 MB 452 KB + 155KB = 607KB アプリケーション本体のソースファイルサイズが 41 % 削減!
  71. 71. アップデートの所感 ● ほとんどハマらずに移行ができた(作業時間はおおよそ半 日) ○ 非推奨になった構文やコードは、実行したら console.warn() で 表示される、ありがたい。
  72. 72. アップデートの所感 ● 3rd-party module の Angular 4 対応が進んだら、本格移行 できそう ○ ng2-toastr はもう対応していた! ○ ng-bootstrap の tooltip directive が動作しなかった ■ 仕方ないので、Angular Material 2 の tooltip に置き換え ■ Angular Material 2 もいくつか非推奨warningが出るが動作に影 響はなし
  73. 73. 4 所感まとめ
  74. 74. 所感まとめ ● Semantic Versioning 導入後の、初 Major Release ○ 想像していたより小さなアップデート。破壊的変更は少ない印象 ○ 現時点では、非推奨はあれど廃止になった機能はまだないよ! ● View Engine の改善は大きい ○ これだけのためにAngular 4 にアップデートしていいと思う! ● 周辺環境もアップデートされるので良い機会 ○ TypeScript 1.8 から TypeScript 2.1 ベースに
  75. 75. Thanks! ご静聴ありがとうございました

×