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
260
Angular v7について
Angular & Ionic Meetup Fukuoka
puku0x
January 19, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
1
140
ファインディでのGitHub Actions活用事例
puku0x
9
2.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
530
Angularコーディングスタイルガイドはいいぞ
puku0x
1
230
Nx CloudでCIを爆速にした話
puku0x
0
700
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
760
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.4k
Other Decks in Technology
See All in Technology
Engineer Career Talk
lycorp_recruit_jp
0
170
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
120
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
AGIについてChatGPTに聞いてみた
blueb
0
130
Lambdaと地方とコミュニティ
miu_crescent
2
370
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
870
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6.1k
Designing for Performance
lara
604
68k
Site-Speed That Sticks
csswizardry
0
25
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
How STYLIGHT went responsive
nonsquared
95
5.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Statistics for Hackers
jakevdp
796
220k
A Modern Web Designer's Workflow
chriscoyier
693
190k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
YesSQL, Process and Tooling at Scale
rocio
169
14k
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