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
290
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
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.1k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
220
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
350
Nx CloudでCIを爆速にした話
puku0x
0
870
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
870
Other Decks in Technology
See All in Technology
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
300
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
270
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
1
220
EKS Pod Identity における推移的な session tags
z63d
1
200
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
1
120
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
1
590
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.5k
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
210
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
290
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
知られざるprops命名の慣習 アクション編
uhyo
10
2.2k
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
190
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
BBQ
matthewcrist
89
9.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Music & Morning Musume
bryan
46
6.7k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
What's in a price? How to price your products and services
michaelherold
246
12k
Docker and Python
trallard
45
3.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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!