PR

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

TypeScript

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

Angular,データバインディング
図1：Angular データバインディング

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

スポンサーリンク

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

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

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

もし、データバインディングという仕組みがなかったとすると・・・

1. 手動でデータ同期が必要

  • ユーザーインターフェース（UI）の変更を反映するために、コード内で明示的に値を更新しなければなりません。
  • 逆に、データの変更も手動でUIに反映させる必要があり、作業量が増加。

2. コードが複雑化する

  • 双方向のデータ更新を実現するために、多くのイベントリスナーやロジックを実装する必要があります。
  • 結果、コードの保守性や可読性が低下します。

データバインディングという仕組みがあることで、画面とアプリケーション、アプリケーションと画面のデータの自動同期が簡単に行える、ということです。これはAngularを利用するメリットの1つでもあります。

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

データバインディングの種類構文説明サンプルコード
補間（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）

  • キラーワード: 「穴埋めクイズ」
  • イメージ: HTML テンプレートの “{{}}” の部分を穴埋め問題のように、変数の中身（値）で埋める

例）HTML 上で {{ userName }} と書くと、
変数 userName の値が画面に表示される。

補間（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!と表示されます。

もし、プロパティの値が変更されれば、Angularはその変更を検知し、その瞬間画面の表示も変わるという仕組みです。

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

  • キラーワード: 「矢印で受け取るHTML属性」
  • イメージ: コンポーネント → HTML属性 へ向かう一本矢印。タグの [property] に値を渡すイメージ。

例）<img [src]="imageUrl"> と書けば、
変数 imageUrl の中身が <img> の src 属性に代入される。

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

参考　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">

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

  • キラーワード: 「クリックで反応する化学反応」
  • イメージ: ユーザーのクリックや入力など、何か“きっかけ” (イベント) が起こったらアクションを実行する。化学反応のように、「イベント」 → 「反応 (関数実行)」

例）<button (click)="onClick()"> と書けば、
ボタンをクリックしたタイミングで onClick() 関数が走る。

イベントバインディングは、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）

  • キラーワード: 「恋人同士のように双方向でやりとり」
  • イメージ: 片方に変化があるともう片方も自動的に変わる、という双方向の関係。Angular では [(ngModel)] を使って、テンプレートとデータをシームレスにやりとりできる。

例）<input [(ngModel)]="userName"> と書けば、
入力欄に文字を入力すると変数 userName が更新され、
変数が変わると入力欄も同期して変わる。

双方向データバインディングは、コンポーネントのモデルと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">

タイトルとURLをコピーしました