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
250
Angular v7について
Angular & Ionic Meetup Fukuoka
puku0x
January 19, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
380
Findyの開発生産性を上げるためにやったこと
puku0x
1
470
Angularコーディングスタイルガイドはいいぞ
puku0x
1
180
Nx CloudでCIを爆速にした話
puku0x
0
590
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
730
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.1k
Nxはいいぞ
puku0x
0
670
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
290
Other Decks in Technology
See All in Technology
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
スレットハンティングについて知っておきたいこと
hacket
0
130
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Scaling GitHub
holman
458
140k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Speed Design
sergeychernyshev
9
270
The World Runs on Bad Software
bkeepers
PRO
63
11k
For a Future-Friendly Web
brad_frost
173
9.2k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
We Have a Design System, Now What?
morganepeng
46
7k
Git: the NoSQL Database
bkeepers
PRO
423
64k
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