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

 

とかもある。

 

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

(あくまで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
   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>

search this site.

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

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


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

others

mobile

qrcode

powered

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