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
November 09, 2018
Technology
1
280
Angular v7 について
Angular触ろうの会 in Fukuoka #7 LT
https://ng-fukuoka.connpass.com/event/106685/
puku0x
November 09, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
210
ファインディでの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
A2Aのクライアントを自作する
rynsuke
1
220
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
280
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
150
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
250
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
920
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
190
本が全く読めなかった過去の自分へ
genshun9
0
640
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
140
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
810
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Statistics for Hackers
jakevdp
799
220k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Designing for humans not robots
tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Code Reviewing Like a Champion
maltzj
524
40k
What's in a price? How to price your products and services
michaelherold
246
12k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
Angular v7について 新福 宜侑 @puku0x ng-fukuoka organizer
Angular 主にGoogleが開発するフロントエンドフレームワーク • フルスタック • 高いパフォーマンス • 充実したエコシステム https://angular.io/
Angular 7
Angularのバージョン • セマンティックバージョニング採用 7.0.0 Patch: バグ修正 Minor: 機能追加(破壊的変更なし) Major: 半年毎に更新(破壊的変更あり)
サポート期間 v5 v6 v7 v5 LTS v6 LTS v7 LTS
半年 1年 今ここ
Angular v7 • 依存関係の更新 ◦ TypeScript 3.1 ◦ RxJS 6.3
◦ Node.js 10対応 • ツール群と周辺ライブラリの更新
CLI
Angular CLI v7 • angular.ioにドキュメント追加 • プロンプト追加 ◦ ng new
や ng add 時に選択肢が追加
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 ]
x-prompt schematic "routing": { "type": "boolean", "description": "Generates a routing
module.", "default": false, "x-prompt": "Would you like to add Angular routing?" },
ビルド周り • 不要なポリフィル削除 • budgetsオプション ◦ CLI v1.7の頃からあった ◦ v7から新規作成時にデフォルトで付く
Bundle budgets "budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb"
}] バンドル単位, %設定も可 { "type": "bundle", "name": "main", "baseline": "300kb", "maximumWarning": “10%" }
Angular Material
Angular Material / CDK v7 • 新Material Design対応 • 新機能
◦ バーチャルスクロール ◦ ドラッグ&ドロップ
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
Virtual Scroll(2) <cdk-virtual-scroll-viewport itemSize="50"> <div *cdkVirtualFor="let item of items">{{item}}</div> </cdk-virtual-scroll-viewport>
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
Drag and Drop(2) <div cdkDropList (cdkDropListDropped)="drop($event)"> <div *ngFor="let item of
list" cdkDrag>{{item}}</div> </div>
Angular Elements
Angular Elements • v6でShadowDOM v1対応 • v7でContent Projection対応 <custom-element>ここの部分</custom-element>
Content projection @Component({ selector: 'app-hello', template: `<h1><slot></slot></h1>`, encapsulation: ViewEncapsulation.ShadowDom //
必須 }) export class HelloComponent {}
ngDoBootstrap export class AppModule implements DoBootstrap { constructor(injector: Injector) {
const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 明示的にInterfaceを 指定するようになった ※ ビルドの際は tsconfig.json で "target": "es2015" の指定が必要
v7.1.0-beta
Router • GuardのリダイレクトにUrlTree指定可 @Injectable() export class AuthGuard implements CanActivate {
canActivate(router: Router, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return router.parseUrl('/login'); // false返さなくてもOK! } }
Ivy
Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV
kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I
検証段階のため v7には含まれず ↓ステータスはこちら https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md
$ ng new my-app --experimental-ivy ※開発中のためプロダクション導入非推奨
まとめ • ツールの拡充でより使いやすくなった • Angular Elementsの強化 • Ivyの今後に期待
おまけ
v7のエイプリルフールネタ • A new ng-compiler ◦ ビルドサイズが10バイトとか無理 • Splitting of
@angular/core ◦ コアが418個に分割される、DDoSか • @aiStore – A built-in AI-powered store solution ◦ そんなものはない • @angular/mine ◦ あかんやつ
【宣伝】フロントエンドカンファレンス【福岡】 https://frontend-conf.fukuoka.jp/
新福 宜侑 @puku0x ng-fukuoka organizer Thank you!