Slide 1
Slide 1 text
Angular v7について
Ionic & Angular Meetup Fukuoka
Slide 2
Slide 2 text
Noriyuki
Shinpuku
ng-fukuoka organizer
@puku0x
2
VEGA corporation Co., Ltd.
Slide 3
Slide 3 text
Angular
主にGoogleが開発するフロントエンドフレームワーク
● フルスタック
● 堅牢で高速
● 充実したエコシステム
https://angular.io/
3
Slide 4
Slide 4 text
TypeScript
● 人気のAltJS
○ JSのスーパーセット
○ 漸進的型付け言語
→ JSよりも保守性に優れる
● 2017年にGoogleで標準採用
4
TypeScript
ES201x
ES5
Slide 5
Slide 5 text
コンポーネント
@Component({
selector: 'my-app',
template: `Hello, {{title}} !`
})
export class AppComponent {
title = 'Angular';
}
5
Slide 6
Slide 6 text
サービス
6
@Injectable()
export class AppService {
constructor(private http: HttpClient) {}
getTodos() {
return this.http.get('/users');
}
}
Slide 7
Slide 7 text
開発ツール
7
Slide 8
Slide 8 text
Angular CLI
8
環境構築
$ ng new
コード生成
$ ng generate
$ ng add
バージョンアップ
$ ng update
https://cli.angular.io/
Slide 9
Slide 9 text
ng add 対応ライブラリ
9
Elements PWA
Material ng-bootstrap Ionic
Slide 10
Slide 10 text
Language Service（VS Code 拡張）
10
● コード補完
● テンプレートチェック
● 定義ジャンプ
https://marketplace.visualstudio.com/items?itemName
=Angular.ng-template
Slide 11
Slide 11 text
StackBlitz
11
オンライン版 VS Code
様々なテンプレート
● Angular
● Ionic
● React
https://stackblitz.com/
Slide 12
Slide 12 text
Angular Console
Angular CLIのGUI版
デスクトップアプリと
VS Code拡張がある
VS Code拡張をインストールした場合は
コマンドパレットから起動できる
12
https://angularconsole.com/
Slide 13
Slide 13 text
なぜ Angular？
13
Slide 14
Slide 14 text
なぜ Angular？（1）
● フルスタック
○ Router、HTTP、SSR、PWA、テスト、ツール...
○ 常にメンテナンスされ、最新版に保たれる
● ライブラリ選定・メンテナンスで疲弊しない
14
Slide 15
Slide 15 text
なぜ Angular？（2）
● 強いオピニオン
○ Angularチームのベストプラクティス
○ 高品質なデフォルトセット
○ 意思決定のコスト削減
● プロダクトの価値に集中できる
15
Slide 16
Slide 16 text
コミュニティ
790以上のミートアップ
53万人以上のメンバー
16
ng-japan 2018 Keynote
Slide 17
Slide 17 text
17
140万人/月のアクティブユーザ
ng-japan 2018 Keynote
Slide 18
Slide 18 text
国内コミュニティ
18
Slide 19
Slide 19 text
19
https://angular.jp/
Angularをはじめよう
日本語ドキュメント
もあります
Slide 20
Slide 20 text
Angular v7
20
Slide 21
Slide 21 text
Angularのバージョン
● セマンティックバージョニング採用
7.2.1
Patch: バグ修正
Minor: 機能追加（破壊的変更なし）
Major: 半年毎に更新（破壊的変更あり）
21
Slide 22
Slide 22 text
サポート期間
v5
v6
v7
v5 LTS
v6 LTS
v7 LTS
半年 1年
今ここ
22
Slide 23
Slide 23 text
Angular v7
● ライブラリ・ツール周り更新
○ TypeScript & RxJS 最新版対応
○ Node.js 10対応
○ CLI、Material、Elements等も更新
● v6 → v7 で破壊的変更なし
23
Slide 24
Slide 24 text
新機能
● Routerの使い勝手向上
○ Guardの戻り値にUrlTreeを指定可（v7.1）
○ 画面遷移時に任意データを渡せる（v7.2）
● Bazelビルドサポート（v7.2）
24
Slide 25
Slide 25 text
Router Guard Redirect
@Injectable()
export class AuthGuard implements CanActivate {
canActivate(router: Router,...) {
// /login にリダイレクト
return router.parseUrl('/login');
}
}
25
Slide 26
Slide 26 text
Router Navigation State
this.router.navigateByUrl('/users/1', {
state: {
foo: 'bar', // 任意のデータ
}
});
// extra.stateにデータが入る
this.router.getCurrentNavigation().extras.state
26
Slide 27
Slide 27 text
新機能
● Routerの使い勝手向上
○ Guardの戻り値にUrlTreeを指定可（v7.1）
○ 画面遷移時に任意データを渡せる（v7.2）
● Bazelビルドサポート（v7.1）
27
Slide 28
Slide 28 text
Bazelビルドサポート
$ npm i -g @angular/bazel
$ ng new my-app --collection=@angular/bazel
$ cd my-app
$ ng serve
$ ng build --prod
28
Slide 29
Slide 29 text
Angular CLI v7
29
Slide 30
Slide 30 text
Angular CLI v7
● 公式ドキュメントにCLIリファレンス追加
● ビルド最適化
● プロンプト追加
○ ng new や ng add 時に選択肢表示
30
Slide 31
Slide 31 text
CLI Prompts
$ ng new my-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
SCSS [ http://sass-lang.com ]
SASS [ http://sass-lang.com ]
LESS [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
31
Slide 32
Slide 32 text
x-prompt schematic
"routing": {
"type": "boolean",
"description": "Generates a routing module.",
"default": false,
"x-prompt": "Would you like to add Angular routing?"
},
32
Slide 33
Slide 33 text
ビルド最適化
● プロダクションビルド時に不要なPolyfill削除
● budgetsオプション
○ バンドルサイズ制限を超えると警告/エラー
○ v7から新規作成時にデフォルト設定
33
Slide 34
Slide 34 text
Bundle budgets
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
バンドル単位, ％設定も可
{
"type": "bundle",
"name": "main",
"baseline": "300kb",
"maximumWarning": “10%"
}
34
Slide 35
Slide 35 text
Angular Material
35
Slide 36
Slide 36 text
Angular Material / CDK v7
● 新Material Design対応
● CDK新機能
○ バーチャルスクロール
○ ドラッグ＆ドロップ
36
Slide 37
Slide 37 text
Virtual Scroll（1）
● 効率的なリスト表示
○ cdk-virtual-scroll-viewport
○ *cdkVirtualFor
https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-s
croll-drag-and-drop-and-more-c594e22e7b8c
https://stackblitz.com/angu
lar/bxoebkkjoyd
37
Slide 38
Slide 38 text
Virtual Scroll（2）
{{item}}
38
Slide 39
Slide 39 text
Drag and Drop（1）
● ディレクティブ指定だけ
○ cdkDropList
○ cdkDrag
https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-s
croll-drag-and-drop-and-more-c594e22e7b8c
https://stackblitz.com/angu
lar/glvkoklvppy
39
Slide 40
Slide 40 text
Drag and Drop（2）
40
{{item}}
Slide 41
Slide 41 text
Angular Elements
41
Slide 42
Slide 42 text
Angular Elements
● v6: ShadowDOM v1対応
● v7: Content Projection対応
この部分
42
Slide 43
Slide 43 text
Content projection
@Component({
selector: 'app-hello',
template: ``,
encapsulation: ViewEncapsulation.ShadowDom // 必須
})
export class HelloComponent {}
43
Slide 44
Slide 44 text
Custom Elementsとして出力
export class AppModule implements DoBootstrap {
constructor(injector: Injector) {
const el = createCustomElement(HelloComponent, { injector });
customElements.define('app-hello', el);
}
ngDoBootstrap(appRef: ApplicationRef) {}
}
44
Slide 45
Slide 45 text
Ivy
45
Slide 46
Slide 46 text
Ivy
新しいレンダラー
・バンドルサイズ削減
・高速なビルド
・シンプルなAPI
※ v7には含まれない ng-conf 2018: Angular Keynote
https://docs.google.com/presentation/d/1zgpjyV
kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I
46
Slide 47
Slide 47 text
47
ng-conf 2018: Angular Keynote（和訳）
Slide 48
Slide 48 text
$ ng new my-app --experimental-ivy
※Ivyは現在開発中です
48
Slide 49
Slide 49 text
まとめ
● v6 → v7 はスムーズに移行できる
● ツールの拡充でさらに便利に
● Angular Elements と Ivyの今後に期待
49
Slide 50
Slide 50 text
新福 宜侑 @puku0x
ng-fukuoka organizer
Thank you!
50