VB的に覚える TypeScript その4 〜 Visual Studio 2015
- 2017.03.09 Thursday
- 23:11
さて、次は数値を入力するInput(number) [NumericUpDown]を追加
[]内はVBのコントロール名
と思ったのだが、VS2015のツールボックスには用意されていないので、
とりあえずInput(text)を追加して、HTMLのソース上で、
1: type="number"
と変更しておく
numberタイプはブラウザによって表示が異なるようだが、
基本的にNumericUpDownのような数字の操作ができるようになるので、
textタイプとしておくより扱いやすい
ただ、後で解説するが、取得が文字列型になるので、
数値を取り出す場合は、条件式を入れておいた方がよい。
■数値ボックスをイベントに追加する
まずはVBでザックリこんな感じで書いてみて、
1: AddHandler Me.Button1.Click,
2: Sub()
3: Dim txName As String = Me.TextBox1.Text
4: Dim nmAge As Integer = Convert.ToInt32(Me.NumericUpDown1.Value)
5:
6: If txName <> "" Then
7: MessageBox.Show(String.Format("{0}さん {1}才", txName, nmAge))
8: Else
9: MessageBox.Show(String.Format("ななしさん {0}才", nmAge))
10: End If
11: End Sub
実行してみる
■VBのコードをTSで書いてみる・・・
さて、TSでこれを書いてみるのだが、
 |
型 string を型 number に割り当てることはできません |
そのままなにも考えずに書くと、
valueがstring型のため、number型に変換できないと怒られる。
キャスとしてみれば・・・と思ってやってみると、
 |
型 string と型 number はどちらも互いに型に割り当てることができません。 |
■文字列→数値の変換について考える
数値の変換はいくつか関数が用意されていて、
1: nmAge = Number(fmAge.value);
2: nmAge = parseInt(fmAge.value);
などがある。
かなり強引なやり方で
1: nmAge = +fmAge.value;
符号を付けると変換されるというのもあるのだが、
仮に文字が入った場合なども考えるとお勧めはできない。
Number()やparseInt()の細かな仕様は他力ちゃんで、
こちらに載っているような正規表現を使って文字列を数値かどうか調べるか、
自分でゴリゴリ書くなら、
1: function isNumeric(value: any): boolean {
2: if (!value)
3: return false;
4: else if (isNaN(value))
5: return false;
6: else if (typeof value === "string") {
7: if (value === "")
8: return false;
9: return true;
10: } else
11: return false
12: }
といった感じのソースを書いて、
いろいろなデータを入れて見ると
1: var txNull: string;
2: var dtDate: Date = new Date(2017, 3-1, 1, 12, 23, 34);
3:
4: isNumeric(txNull); //false : !value : undefined
5: isNumeric(null) ; //false : !value : null
6: isNumeric(""); //false : !value : ""
7: isNumeric(false); //false : !value : false
8: isNumeric(true); //false : !string : true
9: isNumeric(dtDate); //false : !string : Wed Mar 01 2017 12:23:34 GMT+0900 (東京 (標準時))
10: isNumeric("1a"); //false : isNaN : 1a
11: isNumeric("blabla"); //false : isNaN : aa
12: isNumeric("1"); //true : number : 1
何となく数字以外は弾いてくれる。
ただ、ここにも書いてあるように、isNaN関数は曖昧なところがあるようなので、
ブラウザによってこれで正しく通るかは不明なので、
先ほど書いた様な正規表現で検索する方が厳密かもしれない。
それと、!valueのところも、仮にvalueがnumber型の 0 の場合は引っかかってしまう（数値でないと判断される）ので、
後で出てくる型を調べる演算子(typeof)で判別してもよい
今回は文字列の判別が主なので、ザックリソースということで
■関数をどこに書くか
さて、先ほどのisNumeric関数はどこに書くかであるが、
VBの場合は、基本的にSubやFunction関数の外側に書くのが普通である。
というか、匿名関数のような使い方でない限り、たぶん書けない。
TSの場合も同じように、関数は関数の外に書くのが普通なので、
windoow.onloadより外側(1〜3行目)に書くのがよいと思う。
ただ、イベント処理をonloadの中に書いたのと同じように、
関数内に関数を書くこともできるが(6〜7行目の位置)、
その場合は、グローバルとかローカルとかいわゆるスコープの話になるが、
またその話になったら説明する、かもしれない。
とりあえず今回は、他力ちゃん
それと、VBは関数をどこに定義しても
勝手にその関数を探してくれるが、
TSでは怒られないようだが(?)、JSの厳密な構文チェックの場合、
C言語と同じように使う場所よりも先に定義しておかないと怒られてしまう（13〜15行目の位置）。
1: function isNumeric(){
2: //処理
3: }
4:
5: window.onload = () => {
6: function isNumeric(){ //ここにも書ける
7: //処理
8: }
9: };
10:
11: //VBのようにどこでも宣言できるが、
12: //厳密には使う位置より下には書かない方がよい
13: function isNumeric(){
14: //処理
15: }
■any型とTypeof演算子
続いて、引数 value に使っている型であるが、
VBのObject型のような型で、TSのany型を使った。
any型なので、文字列以外のすべての型に対応できる。
ただ、なんでもOKになってしまうので、
If文で振り分け処理を行って、今回の場合は、数値っぽい文字列を取り出している。
If文の途中に出てくる typeof というのは、VBでも
1: If TypeOf obj Is String Then
2: End If
といった感じで、変数の型を調べるのに使える演算子である。
■関数の型
そして、戻り値として、boolean型を指定している
変数と同じで、VBとだいたい似たような宣言になる。
1: Function isNumeric() As Boolean
2: End Function
3: function isNumeric(): boolean {
4: }
ちなみに、上は戻り値(この場合はboolean型)のあるFunctionになるが、
VBの戻り値がない関数、つまり、Sub関数はTSでは
1: function NoRetuen(): void {
2: }
という感じで、void型を宣言する。
■ようやくTSで書いてみる
話がだいぶそれてしまったが、TSでこれらをまとめて書いてみると
1: var fmTxt = <HTMLInputElement>document.getElementById("Text1");
2: var fmAge = <HTMLInputElement>document.getElementById("Numeric1");
3: var txName: string = fmTxt.value;
4: var nmAge: number; //= parseInt(fmAge.value);
5:
6: if (isNumeric(fmAge.value))
7: nmAge = Number(fmAge.value);
8: else
9: nmAge = 0;
10:
11: if (txName !== "")
12: alert(txName + "さん " + nmAge.toString() + "才");
13: else
14: alert("ななしさん" + nmAge.toString() + "才");
まずはこんな感じになる。
実行すると、
■文字列書式
さて、VBで文字書式のString.Formatメソッドを使って、
1: MessageBox.Show(String.Format("{0}さん {1}才", txName, nmAge))
と書いたが、TSにもそういった書式があるのかという疑問が出てくる。
検索すると一昔前まではそういった関数をゴリゴリ書く必要があったようですが、
最近のJSの仕様で、テンプレート文字列という機能ができたようなので、
それを使って書いてみると
1: if (txName !== "") {
2: alert(`${txName} さん ${nmAge.toString()} 才`);
3: //alert(txName + "さん " + nmAge.toString() + "才");
4: }
5: else {
6: alert(`ななしさん ${nmAge.toString()} 才`);
7: //alert("ななしさん" + nmAge.toString() + "才");
8: }
こんな風に書き換えることができる。
テンプレート文字列は、文字列で使う""や''で括るのではなく、 `` で囲むので注意したい。
` はバッククォート(グレイブアクセント)と読み、日本語キーボードなら Shift＋＠キー で入力できる。
余談だが、TSをコンパイルしたJSファイルを見ると
1: alert(txName + " さん " + nmAge.toString() + " 才");
と結局最初に書いた書式に戻されているので、
書きやすい方で書いた方が良さそうである。
■数値→文字列
せっかく数値に変換したが、出力は文字列で出したいので、
数値を文字列に変換。
文字列→数値への変換は手の込んだことをしたが、
逆の場合はVBでも使う、toStringを使えばOK。
ただ、忘れがちなのが、()を付けないといけない点。
これを忘れると、メソッドとして認識してくれない。
toStringに限らず、()忘れは気をつけたい。
ちなみに、VBでもそうだが、toStringは暗黙に解釈されるので、省略も可能である。
今回はこの辺で
関連記事
VB的に覚える TypeScript その1 〜 Visual Studio 2015
VB的に覚える TypeScript その2 〜 Visual Studio 2015
VB的に覚える TypeScript その3 〜 Visual Studio 2015
VB的に覚える TypeScript その4 〜 Visual Studio 2015
HTMLアプリのデバッグができない？〜VS2015 + HTMLアプリケーション
XAMLデザイナーのデザインビューが表示されない？〜Visual Studio 2015
