Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular v7について
Search
puku0x
January 19, 2019
Technology
1
250
Angular v7について
Angular & Ionic Meetup Fukuoka
puku0x
January 19, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディでのGitHub Actions活用事例
puku0x
9
1.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
500
Angularコーディングスタイルガイドはいいぞ
puku0x
1
200
Nx CloudでCIを爆速にした話
puku0x
0
630
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.2k
Nxはいいぞ
puku0x
0
690
Other Decks in Technology
See All in Technology
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
870
DroidKaigi 2024 たすけて!ViewModel
mhidaka
4
400
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
290
Functional TypeScript
naoya
10
4.4k
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
210
EitherT_with_Future
aoiroaoino
1
950
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
190
2024年版 運用者たちのLLM
nwiizo
3
490
waitany と waitall を作った話
mrkn
0
120
LandingZoneAccelerator と学ぶ 「スケーラブルで安全なマルチアカウントAWS環境」と 私たちにもできるベストプラクティス
maimyyym
1
120
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
540
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
110
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Side Projects
sachag
451
42k
Infographics Made Easy
chrislema
239
18k
Debugging Ruby Performance
tmm1
72
12k
Automating Front-end Workflow
addyosmani
1365
200k
Typedesign – Prime Four
hannesfritz
39
2.3k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
In The Pink: A Labor of Love
frogandcode
139
22k
Web Components: a chance to create the future
zenorocha
308
41k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Transcript
Angular v7について Ionic & Angular Meetup Fukuoka
Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.
Angular 主にGoogleが開発するフロントエンドフレームワーク • フルスタック • 堅牢で高速 • 充実したエコシステム https://angular.io/ 3
TypeScript • 人気のAltJS ◦ JSのスーパーセット ◦ 漸進的型付け言語 → JSよりも保守性に優れる •
2017年にGoogleで標準採用 4 TypeScript ES201x ES5
コンポーネント @Component({ selector: 'my-app', template: `Hello, {{title}} !` }) export
class AppComponent { title = 'Angular'; } 5
サービス 6 @Injectable() export class AppService { constructor(private http: HttpClient)
{} getTodos() { return this.http.get<User[]>('/users'); } }
開発ツール 7
Angular CLI 8 環境構築 $ ng new コード生成 $ ng
generate $ ng add バージョンアップ $ ng update https://cli.angular.io/
ng add 対応ライブラリ 9 Elements PWA Material ng-bootstrap Ionic
Language Service(VS Code 拡張) 10 • コード補完 • テンプレートチェック •
定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template
StackBlitz 11 オンライン版 VS Code 様々なテンプレート • Angular • Ionic
• React https://stackblitz.com/
Angular Console Angular CLIのGUI版 デスクトップアプリと VS Code拡張がある VS Code拡張をインストールした場合は コマンドパレットから起動できる
12 https://angularconsole.com/
なぜ Angular? 13
なぜ Angular?(1) • フルスタック ◦ Router、HTTP、SSR、PWA、テスト、ツール... ◦ 常にメンテナンスされ、最新版に保たれる • ライブラリ選定・メンテナンスで疲弊しない
14
なぜ Angular?(2) • 強いオピニオン ◦ Angularチームのベストプラクティス ◦ 高品質なデフォルトセット ◦ 意思決定のコスト削減
• プロダクトの価値に集中できる 15
コミュニティ 790以上のミートアップ 53万人以上のメンバー 16 ng-japan 2018 Keynote
17 140万人/月のアクティブユーザ ng-japan 2018 Keynote
国内コミュニティ 18
19 https://angular.jp/ Angularをはじめよう 日本語ドキュメント もあります
Angular v7 20
Angularのバージョン • セマンティックバージョニング採用 7.2.1 Patch: バグ修正 Minor: 機能追加(破壊的変更なし) Major: 半年毎に更新(破壊的変更あり)
21
サポート期間 v5 v6 v7 v5 LTS v6 LTS v7 LTS
半年 1年 今ここ 22
Angular v7 • ライブラリ・ツール周り更新 ◦ TypeScript & RxJS 最新版対応 ◦
Node.js 10対応 ◦ CLI、Material、Elements等も更新 • v6 → v7 で破壊的変更なし 23
新機能 • Routerの使い勝手向上 ◦ Guardの戻り値にUrlTreeを指定可(v7.1) ◦ 画面遷移時に任意データを渡せる(v7.2) • Bazelビルドサポート(v7.2) 24
Router Guard Redirect @Injectable() export class AuthGuard implements CanActivate {
canActivate(router: Router,...) { // /login にリダイレクト return router.parseUrl('/login'); } } 25
Router Navigation State this.router.navigateByUrl('/users/1', { state: { foo: 'bar', //
任意のデータ } }); // extra.stateにデータが入る this.router.getCurrentNavigation().extras.state 26
新機能 • Routerの使い勝手向上 ◦ Guardの戻り値にUrlTreeを指定可(v7.1) ◦ 画面遷移時に任意データを渡せる(v7.2) • Bazelビルドサポート(v7.1) 27
Bazelビルドサポート $ npm i -g @angular/bazel $ ng new my-app
--collection=@angular/bazel $ cd my-app $ ng serve $ ng build --prod 28
Angular CLI v7 29
Angular CLI v7 • 公式ドキュメントにCLIリファレンス追加 • ビルド最適化 • プロンプト追加 ◦
ng new や ng add 時に選択肢表示 30
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
x-prompt schematic "routing": { "type": "boolean", "description": "Generates a routing
module.", "default": false, "x-prompt": "Would you like to add Angular routing?" }, 32
ビルド最適化 • プロダクションビルド時に不要なPolyfill削除 • budgetsオプション ◦ バンドルサイズ制限を超えると警告/エラー ◦ v7から新規作成時にデフォルト設定 33
Bundle budgets "budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb"
}] バンドル単位, %設定も可 { "type": "bundle", "name": "main", "baseline": "300kb", "maximumWarning": “10%" } 34
Angular Material 35
Angular Material / CDK v7 • 新Material Design対応 • CDK新機能
◦ バーチャルスクロール ◦ ドラッグ&ドロップ 36
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
Virtual Scroll(2) <cdk-virtual-scroll-viewport itemSize="50"> <div *cdkVirtualFor="let item of items">{{item}}</div> </cdk-virtual-scroll-viewport>
38
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
Drag and Drop(2) <div cdkDropList (cdkDropListDropped)="drop($event)"> <div *ngFor="let item of
items" cdkDrag>{{item}}</div> </div> 40
Angular Elements 41
Angular Elements • v6: ShadowDOM v1対応 • v7: Content Projection対応
<custom-element>この部分</custom-element> 42
Content projection @Component({ selector: 'app-hello', template: `<h1><slot></slot></h1>`, encapsulation: ViewEncapsulation.ShadowDom //
必須 }) export class HelloComponent {} 43
Custom Elementsとして出力 export class AppModule implements DoBootstrap { constructor(injector: Injector)
{ const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 44
Ivy 45
Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ※ v7には含まれない ng-conf 2018: Angular
Keynote https://docs.google.com/presentation/d/1zgpjyV kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I 46
47 ng-conf 2018: Angular Keynote(和訳)
$ ng new my-app --experimental-ivy ※Ivyは現在開発中です 48
まとめ • v6 → v7 はスムーズに移行できる • ツールの拡充でさらに便利に • Angular
Elements と Ivyの今後に期待 49
新福 宜侑 @puku0x ng-fukuoka organizer Thank you! 50