Angular：データバインディングの基礎を1からわかりやすく

Angularのデータバインディングは、コンポーネントのクラス（TypeScript）とテンプレート（HTML）間のデータの自動同期のことを指す用語です。データバインディングのおかげで、コンポーネントの状態の変更を即座にビューに反映し、逆にユーザーのアクションによるビューの変更をコンポーネントに即座に同期することが可能になります。

参考　Angularとは？

例えば、LINEなどのチャットアプリで考えてみると、相手が送信したメッセージをチャットウィンドウに表示する場合に使用したり、自分が入力したデータを即座にアプリ側に記憶させたりする場合にデータバインディングの仕組みが生きてきます。

このページでは、データバインディングの仕組み・動作原理と実際のコーディング方法を１からわかりやすく初心者向けに解説します。

データバインディングとは？

データバインディングとは、超ざっくり説明すると「データの橋渡し」をするようなのものです。Angularではこの「橋渡し」を通じて、あなたのアプリケーションのデータ（情報）と画面上の表示をリンクします。

つまり、アプリケーション内でデータ（例えば、テキストや数値）を変更すると、その変更が自動的に画面上に反映されること、逆にユーザーが画面上で何かアクション（例えば、フォームに入力するなど）を行った時にはそのアクションがアプリケーションのデータに影響を与える仕組み→これがデータバインディングです。

これは実際のコードを見ていくことでイメージが付きやすい性質のものでもあるので、ここから具体的な説明に入りつつ、いくつかサンプルコードをお見せしていきます。データバインディングには大きく分けて４つの種類があり、概要は以下の通り。

データバインディングの種類	構文	説明	サンプルコード
補間（Interpolation）	{{ expression }}	コンポーネントのプロパティやメソッドの値をHTMLテンプレートに表示。	<p>{{ name }}</p>
プロパティバインディング	[property]="expression"	コンポーネントのプロパティをHTML要素のプロパティにバインド。	<img [src]="imageUrl">
イベントバインディング	(event)="handler()"	HTML要素のイベント（例えば、クリック）をコンポーネントのメソッドにバインド。	<button (click)="save()">Save</button>
双方向データバインディング	[(ngModel)]="property"	コンポーネントのプロパティとHTML要素（通常はフォーム要素）のプロパティを双方向にバインド。これにより、データの同期が保たれる。	<input [(ngModel)]="username">

１つずつ詳しく説明します。

補間（Interpolation）

補間（Interpolation）は、Angularで最も基本的かつ一般的なデータバインディングの形式です。補間は、コンポーネントのプロパティやメソッドの値をHTMLテンプレートにバインド（結びつけ）し、コンポーネントのデータをビュー（ユーザーインターフェイス）に表示するために使われます。

構文ルール：補間

補間の構文はシンプルです。二重中括弧{{ }}を使用し、その中に表示したいコンポーネントのプロパティ名やメソッドを記述します。二重中括弧内に記述されたコードは、Angularによって評価されその結果がHTMLテンプレート内の該当位置に文字列として挿入されます。

{{ propertyName }}

以下は、補間を使用した簡単なAngularコンポーネントの例です。

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

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

<h1>{{ title }}</h1>

上記のサンプルコードではAppComponentクラスにtitleプロパティが定義されており、プロパティの値が'Hello, Angular!'となっています。結果、HTMLテンプレート内で{{ title }}を使用することで、このtitleプロパティの値を<h1>タグ内に動的に表示する仕組み。このアプリケーションを実行すると、ブラウザにはHello, Angular!と表示されます。

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

プロパティバインディングは、その名の通りコンポーネントのプロパティの値をHTML要素のプロパティにバインドします。

構文ルール：プロパティバインディング

プロパティバインディングの構文は、HTML要素のプロパティ名を角括弧[ ]で囲み、その中にバインドしたいコンポーネントのプロパティ名を指定する形式です。targetはHTML要素のプロパティ名、expressionはバインドしたいコンポーネントのプロパティ名や式です。

[target]="expression"

以下は、AngularコンポーネントのimageUrlプロパティを<img>要素のsrc属性にバインドする方法です。

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

@Component({
  selector: 'app-image-display',
  templateUrl: './image-display.component.html',
  styleUrls: ['./image-display.component.css']
})
export class ImageDisplayComponent {
  imageUrl = 'https://example.com/image.png';
}

<img [src]="imageUrl" alt="Description of the image">

参考　imgタグ

イベントバインディング（Event Binding）

イベントバインディングは、HTML要素から発生するイベント（例えば、クリックやキーボード入力など）をコンポーネントのメソッドにバインドします。これにより、ユーザーのアクションに基づいてアプリケーションが反応するような仕組みを構築することができます。

構文ルール：イベントバインディング（Event Binding）

イベントバインディングの構文は、イベント名を括弧()で囲み、その中にバインドしたいコンポーネントのメソッド名を指定。イベントの種類に応じて、様々なHTMLイベントを指定することができます。

(target)="expression"

以下のサンプルコードでは、ボタンクリックイベントをAngularコンポーネントのonClickメソッドにバインドする方法を示しています。

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

@Component({
  selector: 'app-click-me',
  templateUrl: './click-me.component.html',
  styleUrls: ['./click-me.component.css']
})
export class ClickMeComponent {
  message = '';

  onClick() {
    this.message = 'Button was clicked!';
  }
}

<button (click)="onClick()">Click me</button>
<p>{{ message }}</p>

この例では、<button>要素のclickイベントがonClickメソッドにバインドされています。その結果ユーザーがボタンをクリックすると、onClickメソッドが実行され、messageプロパティの値が更新されるという例。この新しい値は補間を通じて<p>要素内に表示され、結果として「Button was clicked!」というメッセージがユーザーに表示されます。

双方向データバインディング（Two-way Binding）

双方向データバインディングは、コンポーネントのモデルとHTML要素のビューの間でデータを自動的に同期させる方法を指します。要は、ユーザーの入力が直接モデルを更新し、モデルの変更が直接画面上にリアルタイムで反映されるということ。

構文ルール：双方向データバインディング（Two-way Binding）

双方向データバインディングのためには、[(ngModel)]ディレクティブを使用します。propertyはコンポーネントのプロパティ名。ngModelはフォーム要素に最も一般的に使用され、例えばテキストフィールド、ラジオボタン、セレクトボックスなどの値をコンポーネントのプロパティにバインドするのに使われます。

[(ngModel)]="property"

以下のサンプルは、テキストフィールドの値をコンポーネントのnameプロパティと双方向にバインドする方法です。

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

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = '';
}

<input [(ngModel)]="name" placeholder="Enter name">
<p>Hello {{ name }}!</p>

この例では、<input>要素のvalueプロパティとNameEditorComponentコンポーネントのnameプロパティが[(ngModel)]を使って双方向にバインドされています。結果、ユーザーがテキストフィールドに名前を入力すると、その入力がリアルタイムで<p>要素に反映されます。また、プログラムによってnameプロパティの値が変更されると、その新しい値がテキストフィールドにも表示されます。

データバインディングの種類	構文	説明	サンプルコード
補間（Interpolation）	{{ expression }}	コンポーネントのプロパティやメソッドの値をHTMLテンプレートに表示。	<p>{{ name }}</p>
プロパティバインディング	[property]="expression"	コンポーネントのプロパティをHTML要素のプロパティにバインド。	<img [src]="imageUrl">
イベントバインディング	(event)="handler()"	HTML要素のイベント（例えば、クリック）をコンポーネントのメソッドにバインド。	<button (click)="save()">Save</button>
双方向データバインディング	[(ngModel)]="property"	コンポーネントのプロパティとHTML要素（通常はフォーム要素）のプロパティを双方向にバインド。これにより、データの同期が保たれる。	<input [(ngModel)]="username">