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
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
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
410
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
540
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
270
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
290
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Designing for humans not robots
tammielis
253
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Automating Front-end Workflow
addyosmani
1370
200k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
We Have a Design System, Now What?
morganepeng
53
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Facilitating Awesome Meetings
lara
54
6.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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