Angularのコンポーネントを知る

Angular触ろうの会 in Fukuoka #2（2017/05/29）の発表資料です。

Transcript

1. AngularのComponentを知る Angularを触ろうの会 in Fukuoka #2 / May 29, 2017 ponday(@ponday_dev)
2. Profile ponday / 本田 裕介 (Honda, Yusuke) name - chibi-developer - ng-fukuoka スタッフ community - Kotlin, Java, C# etc... - JavaScript - Angular, Vue.js skill
3. 本日のテーマ
4. @Component
5. @Component - AngularのComponentを定義するときに付けるDecorator - @angular/coreに定義されている - Angular CLIでは『ng g component <コンポーネント名>』で生成可能 - Directiveの一種 - DOMのテンプレートを持つComponent - DOMのテンプレートを持たないAttribute Directive - DOMの表示を制御するStructural Directive
6. @Component 実はこのComponent、結構オプションが多いんです
7. @Componentのオプション
8. selector
9. selector - ComponentのDOM上でのセレクタを定義する。 - ここで定義したセレクタをテンプレート上に記述することでコンポーネントが使用でき る。 - 本当にセレクタなのでタグ名以外でも指定可能。 - 例 - selector: ‘#component’ - selector: ‘.component’ - selector: ‘[component]’　　　etc…
10. selector 通常、コンポーネントのレンダリング後もレンダリング先のタグが残る。 残ってる
11. selector IDやクラス、属性を指定することでHTMLタグのみでレンダリング可 HTMLのタグのみ
12. encapsulation
13. encapsulation - CSSによるスタイリングのカプセル化の挙動を指定できる。 - 指定できるのは以下の3種類 - ViewEncapsulation.Emulated - デフォルト値 - 各要素に自動的に属性を割り当ててカプセル化を実現 - ViewEncupsulation.Native - Shadow DOMを使ってカプセル化を実現 - ブラウザのShadow DOM対応が必須。現状ChromeかOperaでしか動かない - ViewEncapsulation.None - カプセル化をせず、グローバルスコープに展開する。 - スタイルが一切指定されていない場合、自動的にNoneになるらしい
14. changeDetection
15. changeDetection：前提知識 - Change Detection = 変更検知 - Chenge Detectionを行う仕組み ＝ Change Detector - コンポーネントごとに保持 - DOMツリー同様に、Change Detectorのツリーが構成されている。 - 各プロパティ（@Inputなど）の値の変更をViewに反映 - zone.jsにより、DOMイベントやAjax通信などあらゆる非同期イベントの発生をフック。値の 変更をチェックする。 - 通常状態ではイベントが発生するたびにすべてのコンポーネントの値の変更を チェックしている。
16. changeDetection：前提知識 常にすべてのコンポーネントの値の変更をチェック →　ムダが多い
17. changeDetection - Change Detectorの変更検知のタイミングを制御 - 指定できるのは以下の2種類 - ChangeDetectionStrategy.Default - デフォルト値 - このコンポーネントおよび配下について常に値の変更をチェック - ChangeDetectionStrategy.OnPush - ＠Inputの値が変わった場合にのみ値の変更をチェック - 入力に変更がない場合は配下のチェックをスキップ →　効率が良い - 値の変更 ＝ 参照の変更なので注意が必要 （@Inputにオブジェクトを渡している場合、内部の値が変わっても変更とはみなされな い） - ChangeDetectorRef.markForCheck()を使ってに任意に変更検知させることも可能。
18. 本編はここまで
19. ここからは宣伝
20. ng-fukuoka 設立しました！ 代表　　　puku0x　　　　　 副代表　　gupuru　　　　　 スタッフ　mya-ake, ponday
21. ng-fukuoka 設立しました！ 代表　　　puku0x　　　　　 副代表　　gupuru　　　　　 スタッフ　mya-ake, ponday ?
22. 初回イベントやります！
23. ng-fukuoka Angular Meetup #1