BLOG 開発者ブログ

ホーム>
開発者ブログ>
Angularのデータバインディングを使ってみる

2023年5月26日

Angularのデータバインディングを使ってみる

こんにちは。クラウドソリューショングループのnakamuratです。
本記事ではAngularのもっとも重要な機能の一つであるバインディングについて簡単にまとめてみました。

【目次】

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

データバインディングはアプリケーションの状態を感知し自動的に最新の状態を保つ機能です。
実際の使い方としては、ユーザーの入力情報によってボタンの状態や要素の表示非表示を制御するなどの使い方があります。
Angularのデータバインディングには大きく分けて以下の3種類があります。

コンポーネント(TS)からビュー(HTML)：コンポーネントで値の変更が行われ、変更された値をビューに伝える。
- バインディングの際は、補間バインディングの場合を除き[ ]括弧を使用する。

タイプ

ターゲット

構文

補間

{{ title }}

1	{{ title }}

プロパティ

Elementプロパティ

Componentプロパティ

Directiveプロパティ

<img [alt]="hero.name" [src]="heroImageUrl">

1	<img [alt]="hero.name" [src]="heroImageUrl">

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

1	<app-hero-detail [hero]="currentHero"></app-hero-detail>

<div [ngClass]="{'special': isSpecial}"></div>

1	<div [ngClass]="{'special': isSpecial}"></div>

クラス

Classプロパティ

<div [class.special]="isSpecial">Special</div>

1	<div [class.special]="isSpecial">Special</div>

スタイル

Styleプロパティ

<button type="button" [style.color]="isSpecial ? 'red' : 'green'">

1	<button type="button" [style.color]="isSpecial ? 'red' : 'green'">

ビュー(HTML)からコンポーネント(TS)：ビューで値の変更が行われ、変更された値をコンポーネントに伝える。
- バインディングの際は、( )括弧を使用する。

タイプ

ターゲット

構文

イベント

Elementイベント

Componentイベント

Directiveイベント

<button type="button" (click)="onSave()">Save</button>

1	<button type="button" (click)="onSave()">Save</button>

<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>

1	<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>

<div (myClick)="clicked=$event" clickable>click me</div>

1	<div (myClick)="clicked=$event" clickable>click me</div>

双方向：ビューとコンポーネントで値の変更は相互に伝えられ、値は同期された状態となる。
- バインディングの際は、[()]括弧を使用する。

タイプ

ターゲット

構文

双方向

イベント＆プロパティ

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

1	<input [(ngModel)]="name">

それでは一つずつ解説していきます。

補間バインディング

補間バインディングはコンポーネントで指定した文字列情報をビューで表示させる際に使用します。
このバインディングはstringのみを対象としており、booleanなど他の型やデータには対応していません。

{{ title }}

1	{{ title }}

export class AppComponent {
   title = "アイソルートブログ";
}

export class AppComponent {

title = "アイソルートブログ";

}

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

プロパティバインディングは、要素のプロパティに対して値をバインディングすることが出来ます。
使用例としては、aタグのhref要素を切り替えたり、以下例のようにログイン・未ログインによって表示する画像を切り替えたりすることができます。
以下の例では、imagePath変数のパスを動的に変化させることで表示の切り替えをすることができます。「画像変化」というボタンを押すたびにイベントバインディングでonClick()関数が実行されimagePathの値が変化します。

<button (click)="onClick()">画像変化</button>
<img [src]="imagePath">

1 2	<button (click)="onClick()">画像変化</button> <img [src]="imagePath">

export class AppComponent {
  imagePath: string = '../img/main_image.png';
  changeImage: boolean = false;
  onClick() {
    this.changeImage = !this.changeImage;
    this.imagePath = this.changeImage === true ? '../img/main_image.png' : '../../img/alter_image.png';
  }
}

export class AppComponent {

imagePath: string = '../img/main_image.png';

changeImage: boolean = false;

onClick() {

this.changeImage = !this.changeImage;

this.imagePath = this.changeImage === true ? '../img/main_image.png' : '../../img/alter_image.png';

}

クラスバインディング

クラスバインディングはある要素に対してclassを動的に付与したい場合に使用します。
実際の使用としては、ある条件を満たした場合のみクラスを付与したい場合などで使用します。
クラスバインディングは1つのクラスを付与する際に使用することが多く、複数のクラスを操作したい場合はディレクティブ版のngClassを使用します。以下の例では、changeColor変数がtrueの場合successクラスが適用され動的にスタイルを変更することができます。
「色変化」というボタンを押すたびにイベントバインディングでonSelect()関数が実行されchangeColorの値が変化します。

<button (click)="onSelect()">色変化</button>
<p [class.success]="changeColor">成功</p>

1 2	<button (click)="onSelect()">色変化</button> <p [class.success]="changeColor">成功</p>

.success {
  color: green;
}

.success {

color: green;

}

export class AppComponent {
  changeColor: boolean = false;
  onSelect() {
    this.changeColor = !this.changeColor;
  }
}

export class AppComponent {

changeColor: boolean = false;

onSelect() {

this.changeColor = !this.changeColor;

}

以下の例では、first, second, thirdというクラスがそれぞれがtrueの場合のみ適用されています。

<p [ngClass]="style">hoge</p>
<p [ngClass]="{'first': true,'second': false,'third': true}">hoge</p>

1 2	<p [ngClass]="style">hoge</p> <p [ngClass]="{'first': true,'second': false,'third': true}">hoge</p>

export class AppComponent {
  style = {first: true, second: false, third: true};
}

export class AppComponent {

style = {first: true, second: false, third: true};

}

スタイルバインディング

スタイルバインディングはある要素に対してstyleを動的に付与したい場合に使用します。
実際の使用としては、ある条件を満たした場合のみ特定のスタイルを付与したい場合などで使用します。
スタイル操作をしたい際にクラスとスタイルバインディングがありますが、保守性や可用性の観点から基本的にはクラスバインディングを使用して、どうしても微調整が必要な場合にスタイルバインディングを使用します。
クラスバインディング同様、単一のスタイルの指定のほかに複数のスタイルの指定も可能です。

<p [style.display]="single">Hello!</p>
<p [style]="multiple">See you!</p>

1 2	<p [style.display]="single">Hello!</p> <p [style]="multiple">See you!</p>

export class AppComponent {
  single = 'none';
  multiple = {color: 'white', fontSize: '10px'};
}

export class AppComponent {

single = 'none';

multiple = {color: 'white', fontSize: '10px'};

}

イベントバインディング

イベントバインディングはビュー側で発生させたイベントをコンポーネントに伝え処理を行います。
トリガーとなるイベントは数多く存在しますが、よく使用するイベントは以下のようなものがあります。

種類	イベント
click	ボタン等がクリックされたとき
focus	フォーカスされたとき
blur	フォーカスが外れたとき

<button (click)="onClick()">選択</button>

1	<button (click)="onClick()">選択</button>

export class AppComponent {
  onClick() {
    console.log('クリックされました。');
  }
}

export class AppComponent {

onClick() {

console.log('クリックされました。');

}

双方向バインディング

双方向バインディングではディレクティブのngModelを使用することが多いため、今回はngModelの使い方にフォーカスします。
ngModelを使用するとビュー側やコンポーネント側で行った変更がバインド先に伝達されます。
使用する際はFormsModuleをインポートする必要がある点に注意してください。
※VSCodeを使用している場合、設定からJS/TS › Implicit Project Config: Experimental Decorators
項目にチェックがついていることも確認してください。
使用例としては、以下書き方のようにユーザーに入力していただいた内容をそのまま画面に表示したい場合などがあります。
以下の例では入力欄に記載した名前がバインディングされ{{ name }}に反映され表示されます。

<input type='text' [(ngModel)]='name'>
<p>{{ name }}</p>

1 2	<input type='text' [(ngModel)]='name'> <p>{{ name }}</p>

import { FormsModule }   from '@angular/forms'; //追加

export class AppComponent {
  name: string;
}

import { FormsModule } from '@angular/forms'; //追加

export class AppComponent {

name: string;

}

最後に

今回はAngularのデータバインディングについてまとめてみました。バインディングには種類が多くとっつきにくさはありますが、習得できれば実装の幅が広がる非常に便利な機能なので、ぜひ活用してみてください！

ブログ記事一覧へ戻る

nakamuratのブログ

ブログ内検索