Angular勉強会 #9 パイプ、DI導入

Pipeとは

• Template構文の中で用いる、データ変換を行う仕組み
• Linux の パイプ処理 に概念的には近い
  • ps | grep node みたいなやつ

---

Pipeの利用例

• i18n対応用にカスタムの言語辞書変換をPipeを使って実現する
  • http://www.ngx-translate.com/

<div>{{ 'HELLO' | translate }}</div>

---

組み込みのPipe

• AsyncPipe
• CurrencyPipe
• UpperCasePipe/LowerCasePipe

他、以下のようなものがある。
https://angular.io/api/common#pipes

---

自作のPipe

@Pipe デコレータを利用したクラスを作成することで実現する。また、Componentと同様にapp.module.tsのdeclerarions に追加が必要

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

---

これまでのおさらい / Angularのポイント

• 依存関係や定義を明確に定義することで、パーツごとの管理をやりやすくする module 機構
• UIをページごと、部品ごとに分割し、再利用しやすくする component 機構
• UIとコードとのデータのやり取りを実現する binding 機構
• 異なるUI部品に対して共通的な処理を追加できる directive 機構
• 文字列や数値などのデータの変換処理を簡便に記述できる pipe 機構

---

最後は設計の話 / 依存性注入（Dependency Injection）について

---

DIとは何か（再掲）

DIとはもともとはJavaなどのサーバーサイドの分野でよく用いられてきた、疎結合を保ったまま依存関係を構築する手法である。

DIを実現する仕組みをDIコンテナといい、Angularにもその仕組は組み込まれている。主な挙動としては以下のようになる。

1. サービスを利用するクラス側が、どのサービスが必要かを記述する。
2. DIコンテナにサービスを登録する
3. DIコンテナが起動時に依存性を解決し、生成したサービスをクラスに注入する

---

なんでそんなややこしいことするんですか？

---

DIのポイント

• 実クラスではなく、抽象クラス/インタフェースを参照することで、クラス間を疎結合に保つ
  • 変更の影響範囲の限定
  • テスタビリティの向上（モックの導入）
• 依存性を逆転させることで、モジュールの可搬性を上げる

---

そして、Clean Architectureへ