Angular v7について

Angular & Ionic Meetup Fukuoka

Transcript

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