【初心者向け】Angular データバインディングを使いこなして、Webアプリケーションをもっと簡単に開発

Angularにおけるデータバウンドプロパティとは？

データバインディングの種類

Angularでは、主に以下の3種類の一方向データバインディングと、双方向データバインディングが提供されています。

文字列補間

最も基本的なデータバインディングで、テンプレート内にコンポーネントプロパティを直接埋め込むことができます。

<p>名前: {{ name }}</p>

プロパティバインディング

属性やプロパティの値をコンポーネントプロパティにバインドします。

<button disabled="{{ isDisabled }}">送信</button>

イベントバインディング

DOMイベントをコンポーネントメソッドにバインドします。

<button (click)="onClick()">クリック</button>

双方向データバインディング

ngModelディレクティブを使用して、入力値とコンポーネントプロパティを双方向にバインドします。

<input type="text" [(ngModel)]="name">

データバインディングを使用する利点は次のとおりです。

• コード量の削減: コードを記述することなく、UIとモデル間のデータ連携を実現できるため、コード量を削減できます。
• 開発効率の向上: コード量が少ないため、開発効率が向上します。
• メンテナンス性の向上: データバインディングは宣言的に記述されるため、コードの理解しやすさとメンテナンス性が向上します。
• UIとモデルの同期: データバインディングにより、常にUIとモデルが同期された状態を維持できます。

以下に、データバインディングの例をいくつか紹介します。

• フォーム: 入力フォームでユーザーが入力した値を、モデルに自動的に反映することができます。
• 動的なコンテンツ: コンポーネントプロパティの値に応じて、テンプレートの内容を動的に変更することができます。
• リアルタイムデータ: データベースなどの外部データソースから取得したデータを、リアルタイムでUIに反映することができます。

このコンポーネントは、ヒーローの名前とパワーを表示します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent {
  hero = {
    id: 1,
    name: 'Superman',
    power: 'Flight'
  };
}

<div>
  <h2>{{ hero.name }}</h2>
  <p>パワー: {{ hero.power }}</p>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-edit',
  templateUrl: './hero-edit.component.html',
  styleUrls: ['./hero-edit.component.css']
})
export class HeroEditComponent {
  hero = {
    id: 1,
    name: 'Superman',
    power: 'Flight'
  };
}

<div>
  <h2>{{ hero.name }}</h2>
  <input type="text" [(ngModel)]="hero.name">
  <input type="text" [(ngModel)]="hero.power">
</div>

このコンポーネントは、すべてのヒーローのリストを表示します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
  styleUrls: ['./hero-list.component.css']
})
export class HeroListComponent {
  heroes = [
    { id: 1, name: 'Superman', power: 'Flight' },
    { id: 2, name: 'Batman', power: 'Wealth' },
    { id: 3, name: 'Wonder Woman', power: 'Strength' }
  ];
}

<div>
  <h2>ヒーロー一覧</h2>
  <ul>
    <li *ngFor="let hero of heroes">
      <a [routerLink]="['/heroes', hero.id]">{{ hero.name }}</a>
    </li>
  </ul>
</div>

ルートコンポーネント

このコンポーネントは、アプリケーション全体のレイアウトを定義します。

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

<div>
  <h1>{{ title }}</h1>
  <nav>
    <a [routerLink]="['/heroes']">ヒーロー</a>
  </nav>
  <router-outlet></router-outlet>
</div>

この例では、以下のデータバインディングを使用しています。

• 文字列補間: ヒーローの名前とパワーをテンプレートに表示するために使用されています。
• プロパティバインディング: routerLink ディレクティブを使用して、ナビゲーションリンクのターゲットURLをヒーローIDにバインドするために使用されています。
• 双方向データバインディング: ngModel ディレクティブを使用して、入力フィールドの値をヒーローモデルのプロパティにバインドするために使用されています。
• イベントバインディング: (click) イベントバインディングを使用して、ボタンのクリックをコンポーネントメソッドにバインドするために使用されています。

要素にクラスを動的に付与するために使用されます。

<button [class.active]="isActive">送信</button>

スタイルバインディング

<div [style.width]="width + 'px'">コンテンツ</div>

HTML 属性の値をコンポーネントプロパティにバインドするために使用されます。

<img [src]="hero.imageUrl" alt="{{ hero.name }}">

コンポーネントバインディング

コンポーネントの入力を別のコンポーネントの出力にバインドするために使用されます。

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

パイプ

データを表示する前にフォーマットするために使用されます。

<p>{{ price | currency:'USD':'symbol' }}</p>

これらの方法は、それぞれ異なるユースケースに適しています。適切な方法を選択するには、要件を慎重に検討する必要があります。