Angular2 テンプレート Enum 使用例

Enum とは

Enum（列挙型）は、特定のデータ型に対して定義された一連の定数値のことです。Angular2 では、TypeScript の enum を使用して、コード内の定数を定義し、テンプレート内でそれらの値を参照することができます。

1. Enum の定義

まず、TypeScript で enum を定義します。

// enum.ts
export enum Color {
  Red,
  Green,
  Blue
}

1. コンポーネントでの Enum の使用

コンポーネントクラスで enum をインポートし、プロパティとして使用します。

// my-component.ts
import { Component } from '@angular/core';
import { Color } from './enum';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
})
export class MyComponent {
  color = Color.Red;
}

1. テンプレートでの Enum の参照

テンプレート内で、コンポーネントのプロパティにアクセスして enum の値を参照します。

<p>Selected color: {{ color }}</p>

Enum 値の表示

Enum の数値値ではなく、文字列表示したい場合は、以下のようにパイプやメソッドを利用できます。

パイプによる表示

// enum-pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { Color } from './enum';

@Pipe({
  name: 'colorName'
})
export class ColorNamePipe implements PipeTransform {
  transform(value: Color): string {
    switch (value) {
      case Color.Red:
        return '赤';
      case Color.Green:
        return '緑';
      case Color.Blue:
        return '青';
      default:
        return '不明';
    }
  }
}

<p>Selected color: {{ color | colorName }}</p>

メソッドによる表示

// my-component.ts
getColorName(color: Color): string {
  switch (color) {
    case Color.Red:
      return '赤';
    case Color.Green:
      return '緑';
    case Color.Blue:
      return '青';
    default:
      return '不明';
  }
}

<p>Selected color: {{ getColorName(color) }}</p>

// enum.ts
export enum Color {
  Red,
  Green,
  Blue
}

このコードでは、Color という名前の enum を定義しています。この enum には Red, Green, Blue の 3 つの値が定義されています。

// my-component.ts
import { Component } from '@angular/core';
import { Color } from './enum';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
})
export class MyComponent {
  color = Color.Red;
}

このコードでは、MyComponent というコンポーネントを定義しています。このコンポーネントは color というプロパティを持ち、その初期値は Color.Red に設定されています。

<p>Selected color: {{ color }}</p>

このコードでは、テンプレート内で color プロパティの値を表示しています。color プロパティには Color.Red が設定されているため、"Selected color: Red" と表示されます。

Enum 値の表示 (パイプによる表示)

// enum-pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { Color } from './enum';

@Pipe({
  name: 'colorName'
})
export class ColorNamePipe implements PipeTransform {
  transform(value: Color): string {
    switch (value) {
      case Color.Red:
        return '赤';
      case Color.Green:
        return '緑';
      case Color.Blue:
        return '青';
      default:
        return '不明';
    }
  }
}

<p>Selected color: {{ color | colorName }}</p>

このコードでは、colorName というパイプを作成しています。このパイプは Color 型の値を受け取り、それに対応する日本語の文字列を返します。テンプレート内でこのパイプを使用することで、color プロパティの値を日本語で表示することができます。

// my-component.ts
getColorName(color: Color): string {
  switch (color) {
    case Color.Red:
      return '赤';
    case Color.Green:
      return '緑';
    case Color.Blue:
      return '青';
    default:
      return '不明';
  }
}

<p>Selected color: {{ getColorName(color) }}</p>

Angular2 のテンプレートでは、直接 Enum の値を参照することができます。ただし、この方法はあまり推奨されません。なぜなら、テンプレート内でロジックが増えることで、テンプレートの読みやすさが低下し、テストが難しくなるからです。

<p>Selected color: {{ Color.Red }}</p>

コンポーネントのプロパティに Enum 値を割り当てる

コンポーネントのプロパティに Enum 値を割り当て、テンプレート内でそのプロパティを参照する方法です。これは、テンプレートをシンプルに保ち、テストしやすくなります。

// my-component.ts
export class MyComponent {
  redColor = Color.Red;
}

<p>Selected color: {{ redColor }}</p>

パイプを使用して Enum 値をフォーマット

パイプを使用することで、Enum 値をテンプレート内でフォーマットすることができます。これは、Enum 値をより読みやすい形式に変換する場合に便利です。

// enum-pipe.ts
@Pipe({
  name: 'colorName'
})
export class ColorNamePipe implements PipeTransform {
  transform(value: Color): string {
    // ... (same as before)
  }
}

<p>Selected color: {{ color | colorName }}</p>

コンポーネントのメソッドを使用して Enum 値をフォーマット

コンポーネントのメソッドを使用して、Enum 値をフォーマットすることもできます。これは、より複雑なフォーマットが必要な場合に便利です。

// my-component.ts
getColorName(color: Color): string {
  // ... (same as before)
}

<p>Selected color: {{ getColorName(color) }}</p>