Angular Webアプリ開発入門7

はじめに

前回はボタンがクリックされたとき何かプログラムを実行したり、メッセージを画面に差し込んだりする機能を作成した。今回はテキストボックスに足し算をする処理を作っていく。

数値に変換した値を格納する変数を用意する

テキストボックスに入力される値は文字列である。足し算するために、数値に変換する必要がある。
そこで数値に変換した値を格納するための変数を準備する。
今回準備する変数はaddAndShowメソッドのなかでだけ利用するメソッドである。
そのようなメソッドはローカル変数と呼ばれ、変数名の前に「let」をつけて、メソッド定義する「{」と「}」の間に記述したメソッドだけ有効で、ほかのメソッドでは利用できない。
この「let」をつけた変数と足し算の結果を文字列として保存するローカル変数を定義する。

import {Component,OnInit }from‘@angular/core’;

@Component({

selector:‘app-simple-form’,

templateUrl:‘./simple-form.component.html’,

styleUrls: [‘./simple-form.component.css’]

})

exportclassSimpleFormComponentimplementsOnInit {

result:string=“足し算をします”;

text1:string=“0”;

text2:string=“0”;

addAndShow() :void {

let forResult:string=”正しい値を入力してください”;

let int1:number;

let int2:number;

this.result=forResult;

}

constructor() { }

ngOnInit() {

}

}

 

文字列を数値に変換する

テキストボックスに入力された値は文字列の為、足し算を作る場合は数値に変換する。
JavaScriptでは文字列を数値に変換するにはNumber関数を利用する。
TypeScriptでもJavaScriptと同様の関数が利用できる。

例えば、テキストボックスのtext1に入力された値を数値に変換した上で、int1という変数に格納するには下記のように入力する。

int1 = Number(this.text1);

同様にテキストボックスのtext2は下記

int2 = Number(this.text2);

数字に変換できたかどうかを判断する

仮にテキストボックスに「あ」など、数値に変換できない文字が入力された場合がある。その場合、int1やint2には「NaN(Not a Number、数値にあらず)」という特別な設定がされる。値がNaNであるかどうかは、Number.isNaNというメソッドを使うと判断が可能。NaNであるときはそもそも数字でなく、足し算しても仕方がないので、足し算はint1、int2も正しく数値に変換できた時(数字が入力された時)だけする。そのためにif文を使い、下記のように記述する。

if(!Number.isNaN(int1) && !Number.isNaN(int2)){

}

 

「!」は条件の否定、「&&」は条件の結合(かつ)を表す。
上記では「int1がNaNでない」かつ「int2がNaNでない」時、という意味となる。

数値を文字列に変換する

足し算の結果は数値である。ユーザーに表示するには、今度は逆に、数値である足し算の結果を文字列に変換する必要がある。これはいくつか方法があるが、今回はTypeScript独自の「文字列中に変数を埋め込む」機能を使用する。
TypeScriptにおいて文字列中に変数を埋め込むには、全体を引用符でなく、「バッククォート」で囲む。
例えば、forResult変数に対する代入を下記のように記述する。

forResult = `${int1}+${int2}=${int1+int2}`;

 

足し算プログラムをメソッドに実装する

今まで学んだきたことから、addToShowのメソッドに、2つのテキストボックスに入力された値を足し算するプログラムは下記となる。

import {Component,OnInit }from‘@angular/core’;

@Component({

selector:‘app-simple-form’,

templateUrl:‘./simple-form.component.html’,

styleUrls: [‘./simple-form.component.css’]

})

exportclassSimpleFormComponentimplementsOnInit {

result:string=足し算します;

text1:string;

text2:string;

addAndShow():void {

letforResult:string=正しい値を入力してください;

letint1:number;

letint2:number;

int1 =Number(this.text1);

int2 =Number(this.text2);

if(!Number.isNaN(int1) && !Number.isNaN(int2)){

forResult =`${int1}+${int2}=${int1+int2}`;

}

this.result=forResult;

}

constructor() { }

ngOnInit() {

}

}

 

終わりに

今回は入力フォームを使って、ボタンがクリックされた時の処理の書き方、そしてテキストボックスに入力された値を取得し、計算を行った。

まとめ

1.  ボタンがクリックされた時の処理

<button (click)="メソッド()">ボタンに表示する文字</button>

2. テキストボックスに入力された値の読み取り

<input [(ngModel)]=”プロパティ名”>

3. 数値に変換する

文字列を数字に変換するには、Number関数を使用する。数値に変換できなったときはNaNという値になる。
NaNかどうか(変換に失敗したかどうか)は、Number.isNaNメソッドを使って確認できる。

4. 文字列に値を埋め込む

全体をバッククオート(「`」)で囲んで、{${値}}と表示すると、そこに埋め込んだ文字列を作ることが出来る。

 

コメント