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
270
Angular v7について
Angular & Ionic Meetup Fukuoka
puku0x
January 19, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
200
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
330
Nx CloudでCIを爆速にした話
puku0x
0
850
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
850
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
240
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
3.5k
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
kworkdev
PRO
2
370
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
240
「規約、知識、オペレーション」から考える中規模以上の開発組織のCursorルールの 考え方・育て方 / Cursor Rules for Coding Styles, Domain Knowledges and Operations
yuitosato
6
1.9k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
49
30k
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
250
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
190
産業機械をElixirで制御する
kikuyuta
0
170
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
9
2.5k
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
170
20250623 Findy Lunch LT Brown
3150
0
570
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Applications with DynamoDB
mza
95
6.4k
Being A Developer After 40
akosma
90
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Agile that works and the tools we love
rasmusluckow
329
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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