Angular2 アプリ作成(データ入力)

1.概要

今回は、基本機能であるデータ入力機能の実装を解説します。Angular2には、データ入力をカンタンに実装する「双方向データバインド」という便利な機能があります。データ入力欄の値とコンポーネント・クラスの変数の値をプログラミングなしで常に一致させますので、コーディング量を大幅に削減できます。解説文だけではわかりづらいので、サンプルアプリをつくりながら解説します。

サンプルアプリは、元本と金利から10年後の金額を算出する複利計算です。図の例は、10万円を金利3%で運用すると10年後、13,4381円になると表示しています。

[オンラインデモ]
/ngdemo/sample04/

2.サンプルアプリの実装

第3回で作成したプロジェクトの内容を書き換え、複利計算のアプリを作ります。

以下の手順で３つのファイルを変更します。
1)proj01\src\app\app.component.html
現在のコードを削除して、以下のコードを記述します。

<h1>複利計算</h1>
<p>元本 <input [(ngModel)]="principal"> 円</p>
<p>金利 <input [(ngModel)]="interest"> %</p>
<p>10年後 {{calc()}}円</p>

２,3行目　[(ngModel)]=”式や変数”は、Angular2独自のテンプレート構文で、双方向データバインドの定義です。入力欄の値と、この後定義するCalcComponentクラスの変数の値が同期します。ここでは、元本の入力欄の値が変数principalに、金利の入力欄の値が変数interestに代入されます。双方向ですから、逆に変数principalの値を変えると、元本入力欄の表示がその値に変更されます。変数の値変更の実装は、次回行います。
4行目　{{式や変数}}も、Angular2独自のテンプレート構文で、片方向データバインドの定義です。式や変数の値を文字列として出力します。calc()は、この後CalcComponentクラスで定義するメソッドです。変数principalとinterestの値から、10年後の金額を計算して返します。

2)proj01\src\app\app.component.cssの書き換え
現在のコードを削除して、以下のコードを記述します。

h1{
  color:royalblue;
}
input{
  text-align: right;
}

1～3行目　タイトル文字を青色にします。
4～6行目　入力欄には数字を入力するため、右寄せにして見やすくします。

3)proj01\src\app\app.component.tsの書き換え
現在のコードを削除して、以下のコードを記述します。

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

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

  principal: number; //元本
  interest: number;  //金利

  //複利計算メソッド
  calc() {
    if (isNaN(this.principal) || isNaN(this.interest)) return null;
    let answer = this.principal;
    for (let i = 0; i < 10; i++) {
      answer = answer * (1 + this.interest / 100);
    }
    return Math.floor(answer);
  }
}

10,11行目　画面で入力された元本と金利の値が、変数principalと変数interestに自動的に代入されます。
15行目　元本または金利の値が、空白等の数字でないときは、nullを返します。
16～20行目　変数principalと変数interestの値を使って、10年後の金額を計算して返します。

4)動作確認
1.ng serveコマンドが実行中であることを確認します。
2.Webブラウザから、//localhost:4200にアクセスします。
3.複利計算の画面が表示されます。表示されない場合は、ブラウザの再読み込みを行ってください。それでも表示されない時は、コマンドプロンプトに表示されたエラーメッセージを確認してください。

4.元本と金利の欄に数字を入力すると、10年後の金額が表示されます。
5.元本と金利の値を変更すると、双方向データバインドのおかげで、リアルタイムで再計算が行われ表示に反映されます。計算処理をブラウザで行っているので、サーバーの通信待ちはありません。送信ボタンを押すことなく、Excelのような快適な操作感を実現しています。

弊社では、「Angular2とTypeScriptによる モダンWeb開発セミナー」を開催します。
Angular2の実践的な知識とノウハウを習得できます。
/hp/semi/modern/

(初版)2016年8月2日
(更新)2016年12月1日