Angularの今とこれから

FUKUOKA Engineers Day 2018 ~Autumn~

1. Angularの今とこれから 新福 宜侑 @puku0x ng-fukuoka organizer
2. 最近のフロントエンド • 言語 • スタイル • パフォーマンス • ライブラリ • ビルドツール • テスト ：
4. Angular
5. Angular Googleが主導するフロントエンドフレームワーク • TypeScript • フルスタック • 高いパフォーマンス • 充実したエコシステム https://angular.io/
6. TypeScript • MS製のAltJS ◦ ESのスーパーセット ◦ 静的型付け言語 → 保守性に優れる TypeScript ES201x ES5
7. コンポーネント @Component({ selector: 'my-app', template: `Hello, {{title}} !` }) export class AppComponent { title = 'Angular'; }
8. サービス @Injectable() export class AppService { constructor(private http: HttpClient) {} getTodos() { return this.http.get<Todo[]>('/todos'); } }
9. なぜ Angular ? • フルスタック ◦ ビュー、ルーティング、非同期通信など全部入り • アプリケーション開発に専念できる ◦ ライブラリ選定や環境構築、保守で疲弊しない
10. Angularの今
11. Angular 6
12. Angularのバージョン • セマンティックバージョニング採用 6.0.0 Patch: バグ修正 Minor: 機能追加（破壊的変更なし） Major: 半年毎に更新（破壊的変更あり）
13. サポート期間 v4 v5 v6 v4 LTS v5 LTS v6 LTS 半年 1年 ※9/23 v4のLTSは終了しました
14. Angular 6 • 「Stability & Innovation」 • フレームワークとしての安定性UP • ツール周りの拡充
15. 新しいDI機構（Tree-shakable Providers） @Injectable({ providedIn: 'root' // シングルトンのサービスが作られる }) export class AppService { constructor(private http: HttpClient) {} }
16. Router Scroller（v6.1〜） @NgModule({ imports: [ RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', }) ],
17. Angular Elements
18. Angular Elements • コンポーネントをCustom Elementsにできる ◦ React/Vue.js/jQueryとの柔軟な組み合わせ • 起動処理を変更してビルドするだけ
19. Custom Elements 生成 export class AppComponent { constructor(injector: Injector) { const HelloElement = createCustomElement( HelloComponent, { injector }); customElements.define('app-hello', HelloElement); } } ※ ビルド時に tsconfig.json で "target": "es2015" の指定が必要です
20. Tools
21. Angular CLI 環境構築 $ ng new コード生成 $ ng generate $ ng add バージョンアップ $ ng update https://cli.angular.io/
22. ng add 対応モジュール Angular Elements Progressive Web App Angular Material
23. Angular Language Service（VS Code 拡張） • コード補完 • テンプレートチェック • 定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template
24. StackBlitz オンライン版 VS Code 様々なテンプレート • Angular • Ionic • React • Vue.js https://stackblitz.com/
25. 公式ドキュメント https://angular.io/ ドキュメント自体がAngular アプリケーション
26. Community
27. 790以上のミートアップ 53万人以上のメンバー 今後も成長 ng-japan 2018 Keynote コミュニティ
28. 140万人/月のアクティブユーザ ng-japan 2018 Keynote
29. 国内の コミュニティ • 東京 • 京都 • 神戸 • 福岡 • 群馬 [New] https://community.angular.jp/
30. 国内ユーザ数 https://angular.jp 月間9000人以上の アクティブユーザ
31. Angularのこれから
32. Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I
33. ng-conf 2018: Angular Keynote（翻訳）
34. 2.7kB すごい（語彙力）
35. 今すぐ試したい？
36. $ ng new my-app --experimental-ivy ※開発中のため動作保証されません
37. Angular Console Angular CLIのGUI版 まだベータ版 https://angularconsole.com/
38. Angular for Designers Cloud Prototyping Tool Angular用のビジュアル プロトタイピングツール が登場する？ ng-conf 2018: Angular for Designers - Stephen Fluin https://www.youtube.com/watch?v=LP-fNM8OITI
39. AngularJS 1.7.xで最後 LTSは2021年6月末まで Angularに移行しましょう 2009 − 2021
40. まとめ • Angularコミュニティは世界中で成長 • ツールの拡充でより使いやすくなった • v7以降で導入予定のIvyに期待
41. ng-fukuokaのイベントもよろしくお願いします https://ng-fukuoka.connpass.com/
42. 【宣伝】フロントエンドカンファレンス【福岡】 https://frontend-conf.fukuoka.jp/
43. 新福 宜侑 @puku0x ng-fukuoka organizer ご清聴ありがとうございました