VB的に覚える TypeScript その3 〜 Visual Studio 2015

  • 2017.03.09 Thursday
  • 23:02

 

さて、ボタンを追加したので、

次はテキストボックスを追加してみる。

 

Input(Text) [Textbox]を適当に配置

[]内はVBのコントロール名

 

 

 

■テキストボックスをイベントに追加する

前回のボタンイベントにこのテキストボックスを追加してみる。

 

まずはVBで書くと(一応TSのコードに合わせるように書きます)

 

   1:  AddHandler Me.Button1.Click,
   2:      Sub()
   3:          Dim txName As String = Me.TextBox1.Text
   4:   
   5:          If txName <> "" Then
   6:              MessageBox.Show(txName & "さん")
   7:          Else
   8:              MessageBox.Show("ななしさん")
   9:          End If
  10:      End Sub

 

動かすと、

 

 

ちなみに、TextboxがNullの場合は、If文で分岐しているので、

 

 

となる

 

■VBのコードをTSで書いてみる

これをTSで書くと
 

   1:  fmBtn.onclick = (e) => {
   2:      var fmTxt = <HTMLInputElement>document.getElementById("Text1");
   3:      var txName: string = fmTxt.value;
   4:   
   5:      if (txName !== "") {
   6:          alert(txName + "さん");
   7:      }
   8:      else {
   9:          alert("ななしさん");
  10:      }
  11:  };

 

これも動かしてみると

 

 

Nullなら

 

■VB と TSを比較してみる

■型宣言の省略

さて、ソースを比較していく

fmTxtは前回と同じように、TS内でテキストボックスを使えるように用意した変数。

型はHTMLInputElement型でキャスト

 

今回は :HTMLInputElement という型宣言はしなかったが、

VBでも、

 

 

といった感じで型を省略しても、自動で推測してくれる機能があり、

 

それと同じようにTSでも = で何かしらの型を入れると推測してくれる。

 

試しにマウスポインタをfmTxtにあててみると、

 

 

型を推測してくれていることが分かる。

なお、一度型を宣言すると、JavaScriptのように違う型の値を入れることはできないのがTSの特徴

 

 

■変数宣言

改めて型の宣言を確認してみる。

 

前回はいきなりHTMLElement型を使ったが、

なじみの深い文字列型 string型を使ってみる。

 

上がVB、下がTSの宣言

 

   VB:  Dim txName As String
   TS:  var txName: string;

 

前回も書いた様に、Dim が var 、As が : 、後は目的の型

それと、C言語同様にコードの終わりを示す ; (セミコロン) で変数を宣言できる

 

上でも説明したように、=を使えば、推測してくれる

 

   VB:  Dim txName = Me.TextBox1.Text
   TS:  var txName = fmTxt.value;

 

個人的な意見であるが、型は省略せずに宣言してあげた方が良いと思う。

 

その場に応じてソースを書けば良いとは思うが、

後で見返したとき(他の人が見たとき)に型が書いてあった方が、

パッと見たときに分かりやすいかなと思う。

 

ちなみに、= で初期化しない場合で型を宣言しないと、

 

Object型(VB)、any型(TS)とされてしまう。

 

そのため、都度キャストが必要となってしまい、処理速度や生産性の低下に繋がる。

 

 

■他の型

上でstring型を使ったが、TypeScriptの公式サイトから基本的な型を抜き出すとこんなのがある。

 

VB TS
 Boolean  boolean
 String  string
 Short  number
 Integer
 Long
 Float
 Double
 Decimal
 Object

 any

 Nothing

 null

 (undefine)

 

最近はTuple型とかNever型とかあるようですが、

TSのバージョンによっては使えない(VS2015は1.5〜1.8)ものもあるので、

今回はよく使う基本の基本なところだけ、

あとはまた出てきたら。

 

 

それと基本型以外で使いそうなところで、

 

VB TS
 Date  Date

 

とかもある。

 

追記

※TSのDateはDate型ではなく、Date interface であるため(VBも型と言うよりは構造体)、

 実際の型(typeofで取得される型)はobject型となる。

 interfaceを型のように判別するには、

 

   1:  toString.call(value);

 

 を使う方法があるようだ。

 (ただし、自作interfaceは難しいようだ)

 

参考URL

JavaScriptの「型」の判定について

 

 この場合、typeofでobjectとされたものでも、

 

 number  [object Number]
 string  [object String]
 boolean  [object Boolean]
 Array  [object Array]
 null  [object Null]
 自作  [object Object]

 

だいたいこのような感じに取得できる。

 

 

細かいことは仕様書に他力ちゃんで、話を進める。

(あくまでVB→TSが目的です)

 

 

■If文

続いて条件式のIf文

VBでは、

 

   1:  If 条件 Then
   2:      処理
   3:  Else
   4:      処理
   5:  End If

 

と If 〜 Then End If で構成される。

 

TypeScriptはC言語などと同じ書式で、

 

   1:  if (条件) {
   2:      処理
   3:  }
   4:  else {
   5:      処理
   6:  }

 

となる。

今回の様な alert関数 一文だけなら、{}を省略して、

 

   1:  if (条件)
   2:      処理;
   3:  else
   4:      処理;

 

ということもできるが、

入れ子になるようなIf文では、else if や else がどの If文にかかってくるのか判別しにくくなるので、

今回の様な短い文以外で省略はしない方が良いと思う。

とりあえず、省略するときは ; を忘れずに

 

追記

 

こんな感じの{}省略ソースを書いてみたところ、

 

最後のelseが手前のifと連動していることがポインタをあてると分かる。

 

極端な例ではあるが、こういった場合は、最後のelse if は{}で括って、

elseを外側のif文であると教えてあげる必要がある。

 

 

さて、If文で他の言語と違うのが、条件式の演算式

 

C言語同様に == や != で良いのだが、

最近のJSの書き方的には、型を厳密に判別するために、

=== や !== など等号を3つ連ねるのが良いらしい。

 

その辺はずいぶん前の記事で書いたので省略

 

型を厳密にという意味で、TypeScriptでは===を使った方がよさそうである。

 

VB TS
 =  ===
 <>  !==

 >

 >=

 >

 >=

 <

 <=

 <

 <=

 

■テキストの結合

ちょっと出力したいときのメッセージボックス(MessageBox.Show)は、

JSでも使われている alert で出力すればよい

 

1つ2つくらいならいいが、

何個もメッセージを出していると、OKを押すのが嫌になるので、

コンソール(イミディエイトウインドウ)に出力するなら

 

   VB:  Debug.WriteLine("hogehoge")
   TS:  console.log("hegehoge");

 

と書けば良い。

 

さて、テキストの結合であるが、VBでは & を使って(※)結合するが、

※昔のVB6やVBAからの人は文字列同士の結合は & 数字の加算は + と覚えているかと思うが、

VB.netでは、文字列も + で結合することができる。

 

   1:  txName & "さん"

 

TSはC#と同じように + を使って結合する。

 

   1:  txName + "さん"

 

 

それと、"" (ダブルクォーテーション) を '' (シングルクォーテーション)に変えて

括ってげても文字列として認識してくれます。

 

   1:  txName + 'さん'

 

この辺は書き方人それぞれという感じです。

 

今回はVB的に覚えると言うことで、TS側でも "" を使うことにしますが、

これまでJSでいろいろ書いてきた感じですと、

JSは '' で文字列を書くことの方が多いかもしれません。

 

たぶん、タグ内に使われる名称などが "" なので、スクリプト内でこれを表現するためには、

 

   1:  var txTag = '<input id="Button1" type="button" value="button" />';

 

という風に '' で書くことになるからだと思います。

(もし、"" で書いた場合は、¥" でエスケープする必要がある)

※¥は半角

 

 

だいたいこんな感じで今回はここまで

 

 

 

関連記事

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

 

 

コメント
コメントする








    
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< April 2017 >>

search this site.

よく使う、検索される投稿

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


※当ブログはリンクフリーですが、 取材や雑誌等で掲載される場合は、事前にお知らせください

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM