AngularJS データバインディング vs Vue.js データバインディング
AngularJSにおけるデータバインディングの仕組み
データバインディングの種類
AngularJSでは、以下の3種類のデータバインディングが提供されています。
- 一方向バインディング: コントローラーからビューへのデータの読み出しのみを許可します。
- 単方向バインディング: ビューからコントローラーへのデータの書き込みのみを許可します。(AngularJS 1.3から非推奨)
データバインディングの仕組み
AngularJSのデータバインディングは、以下の3つの主要なコンポーネントによって実現されます。
- スコープ: コントローラーとビューの間でデータを共有するためのオブジェクトです。
- ディレクティブ: HTML要素に特別な機能を追加するための属性です。
- 式: データバインディングの条件や値を指定するための構文です。
スコープは、コントローラーとビューの間の接着剤として機能します。スコープは、コントローラー内で定義された変数や関数を保持し、ビュー内でアクセスできるようにします。
ディレクティブは、HTML要素に特別な機能を追加するための属性です。データバインディングに関連するディレクティブとして、以下のものがあります。
- ng-model: 双方向バインディングを実現するためのディレクティブです。
- ng-class: コントローラーのスコープに基づいて、HTML要素にクラスを追加または削除するためのディレクティブです。
式は、データバインディングの条件や値を指定するための構文です。式は、スコープ内の変数や関数、および演算子を使用して構成されます。
データバインディングの例
以下の例は、双方向バインディングを使用して、ユーザー入力とコントローラーのスコープ内の変数を同期する方法を示しています。
<input type="text" ng-model="name" />
<h1>Hello {{name}}</h1>
ng-modelディレクティブは、nameというスコープ変数と入力要素をバインドします。- ユーザーが入力内容を変更すると、
name変数の値も自動的に更新されます。 {{name}}式は、name変数の値を H1 タグ内に表示します。
AngularJSのデータバインディングは、ビューとコントローラー間のデータの自動同期を実現する強力な機能です。これにより、開発者は UI とロジックを分離し、コードの保守性を向上させることができます。
HTMLファイル:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>AngularJS データバインディングサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>名前: {{name}}</h1>
<input type="text" ng-model="name" />
<p>年齢: {{age}}</p>
<button ng-click="incrementAge()">年齢を1つ増やす</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "山田太郎";
$scope.age = 20;
$scope.incrementAge = function() {
$scope.age++;
};
});
</script>
</body>
</html>
JavaScriptファイル:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "山田太郎";
$scope.age = 20;
$scope.incrementAge = function() {
$scope.age++;
};
});
解説
- このコードは、AngularJS 1.7.9 を使用しています。
myAppという名前の Angular モジュールを定義します。myCtrlという名前のコントローラーを定義します。- コントローラーは、
$scopeオブジェクトを使用して、ビューとデータ を共有します。 nameとageという2つのスコープ変数を定義します。age変数の値を P タグ内に表示します。ng-clickディレクティブを使用して、incrementAge関数をボタンクリックイベントにバインドします。incrementAge関数は、age変数の値を1つ増やします。
実行
このコードを HTML ファイルとして保存し、Web ブラウザで開きます。
- ユーザーが名前を入力すると、H1 タグ内の名前も自動的に更新されます。
- ユーザーがボタンをクリックすると、年齢が1つ増えて表示されます。
このサンプルコードは、AngularJS のデータバインディングの基本的な仕組みを示しています。
- リストを表示
- フォームデータを送信
- 条件分岐
- カスタムディレクティブ
AngularJSにおけるデータバインディングのその他の方法
ng-bind-html ディレクティブは、HTMLコードを含む変数をバインドするために使用されます。
<div ng-bind-html="html"></div>
html 変数には、HTMLコードを含む文字列が格納されます。
<div ng-class="{active: isActive}"></div>
isActive 変数が true の場合、active クラスが要素に追加されます。
<div ng-style="{color: color}"></div>
color 変数には、CSSの色コードが格納されます。
ng-repeat ディレクティブは、配列やオブジェクトの要素を繰り返し表示するために使用されます。
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
items 配列の各要素は、li要素として表示されます。
<div ng-if="show">表示</div>
show 変数が true の場合、要素が表示されます。
<div ng-switch="value">
<div ng-switch-when="1">1</div>
<div ng-switch-when="2">2</div>
<div ng-switch-default>その他</div>
</div>
value 変数の値が 1 の場合、最初の div 要素が表示されます。
これらの方法は、それぞれ異なる目的で使用されます。状況に応じて適切な方法を選択する必要があります。
AngularJSは、データバインディングを容易にするさまざまな方法を提供しています。これらの方法を理解することで、開発者はUIとロジックを分離し、コードの保守性を向上させることができます。
javascript angularjs data-binding
