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

  • 2017.03.24 Friday
  • 23:13

 

前回 interface を説明できたので、

ようやく話を戻すことができる。

 

まず、Select [Combobox]を追加で配置する

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

 

 

SelectにOptionをあらかじめ追加しても良いのだが、

今回はTSを使って追加することにする。

 

 

■VBのCombobox

いつも通り、VBで書いてみる。

こちらもソース上でItemを追加する。

まずは、HTMLのSelectと同じような感じにするため、構造体で次を作る。

(これをやりたかったので、前回構造体について説明した)

 

   1:  Private Structure Job
   2:   
   3:      Public Property Text As String
   4:   
   5:      Public Property Value As String
   6:   
   7:      Public Overrides Function ToString() As String
   8:   
   9:          Return _Text
  10:   
  11:      End Function
  12:   
  13:  End Structure

 

続いてLoadに次のソースを追加する。

 

   1:  Dim ojItem() As Object = New Object() {New Job() With {.Text = "会社員", .Value = "kaisha"},
   2:                                         New Job() With {.Text = "公務員", .Value = "koumu"},
   3:                                         New Job() With {.Text = "自営業", .Value = "jiei"},
   4:                                         New Job() With {.Text = "パート", .Value = "part"},
   5:                                         New Job() With {.Text = "学生", .Value = "student"}}
   6:  'Me.ComboBox1.Items.Clear() 'あらかじめItemが入っていた場合のリセット
   7:  Me.ComboBox1.Items.AddRange(ojItem)
   8:  Me.ComboBox1.SelectedIndex = 0I

 

1行目で追加するItemをObject型の配列で作って、

7行目でAddRangeでComboBoxのItemに追加

※AddRangeはObject型の配列なので、Job構造体をObjectに変換する必要がある。

 Job配列をObjectに変換しても良い。それについてはずいぶん前の記事参照

 

8行目で先頭を選択

 

実行すると

 

 

と追加される。

 

ちなみに、構造体の7行目でToStringメソッドを実装しているので

Comboboxのリストはその内容が表示される。

 

定義しないと構造体が表示されてしまう。

 

こちらもずいぶん前に書いた記事を参照

ListBoxやComboboxのDisplayMemberを考える〜VS2008

 

 

■TSでSelectに追加

さて、同じ感じでTSで書いてみる。

 

まずは構造体だが、前回書いた様にTSではVBでいう構造体はないので、

Interfaceでオブジェクトの定義型を作る。

 

   1:  namespace Job {
   2:      export interface Job {
   3:          Text: string;
   4:          Value: string;
   5:      }
   6:  }


これをonload時に先ほど作ったSelectに追加する

   1:  var fmSelect = <HTMLSelectElement>document.getElementById("Select1");
   2:  var fmOption: HTMLOptionElement;
   3:  var i: number;
   4:   
   5:  var ojItem: Job.Job[] = [{ Text: "会社員", Value: "kaisha" },
   6:                           { Text: "公務員", Value: "koumu" },
   7:                           { Text: "自営業", Value: "jiei" },
   8:                           { Text: "パート", Value: "part" },
   9:                           { Text: "学生", Value: "student" }];
  10:   
  11:  //fmSelect.innerHTML = ""; //あらかじめOptionが入っていた場合のリセット
  12:   
  13:  for (i = 0; i < ojItem.length; i++) {
  14:      fmOption = new Option();
  15:      fmOption.value = ojItem[i].Value;
  16:      fmOption.text = ojItem[i].Text;
  17:   
  18:      if (i === 0) 
  19:          fmOption.selected = true; //ここで選択           
  20:      
  21:      fmSelect.add(fmOption); //追加
  22:  }

 

VBに合わせるためにこんなソースになっているが、

TSはここまで複雑にする必要はないかもしれない。

 

とりあえず内容を見ていくと、

 

1行目でSelectを取得

5行目でVBのようにInterfaceを使ったオブジェクトの型定義をする。

13〜22行目でOptionを追加

 

まずはこんなところで、実行すると

 

 

わざわざinterfaceを組まなくても、

Optionを使って

 

   1:  var obItem: HTMLOptionElement[] = [new Option("会社員","kaisha" ,false,true ),
   2:                                     new Option("公務員","koumu" ),
   3:                                     new Option("自営業","jiei" ),
   4:                                     new Option("パート","part"),
   5:                                     new Option("学生", "student")];
   6:   
   7:  for (i = 0; i < obItem.length; i++) {
   8:      fmSelect.add(obItem[i]); //追加
   9:  }

 

とやった方が良さそうだ。

interfaceを使った方法はJSONなどからリストを読み込んだ場合などに使えそうなので、

どちらでもよさそうではある。

 

 

■ボタンに機能を追加する

さて、ここまで作ったらボタンに機能を付ける。

まずはVB

 

   1:  Dim slJob As Job = DirectCast(Me.ComboBox1.SelectedItem, Job)
   2:   
   3:  If txName <> "" Then
   4:      MessageBox.Show(String.Format("{0}さん {1}才 {2}", txName, nmAge, slJob.Text))
   5:  Else
   6:      MessageBox.Show(String.Format("ななしさん {0}才 {1}", nmAge, slJob.Text))
   7:  End If

 

選択されたComboboxのItemをキャストして、

メッセージ出力部を修正

 

 

HTMLのSelectに合わせて

Job構造体にValueを作ったが要らなかったようだ。

 

■TSのボタンに機能追加する。

VBをTSに翻訳する

   1:  var fmOption: HTMLOptionElement = <HTMLOptionElement>fmSelect.selectedOptions.item(0);
   2:  var txJob: string = fmOption.text;
   3:   
   4:  //省略
   5:   
   6:  if (txName !== "")
   7:      alert(`${txName} さん ${nmAge} 才 ${txJob}`);
   8:  else
   9:      alert(`ななしさん ${nmAge} 才 ${txJob}`);

 

valueを使おうかと思ったが、

こちらもVBをそのまま変換することができた。

 

実行すると

 

 

■せっかくなので

せっかくValueがあるので、

 

   1:  Dim txJob As String
   2:   
   3:  Select Case slJob.Value
   4:      Case "kaisha" : txJob = "会社員"
   5:      Case "koumu" : txJob = "公務員"
   6:      Case "jiei" : txJob = "自営業"
   7:      Case "part" : txJob = "パート"
   8:      Case "student" : txJob = "学生"
   9:      Case Else : txJob = "その他"
  10:  End Select

 

とValueから値を変換するコードを書いてみたりもできる。

 

TSなら

 

   1:  switch (fmOption.value) {
   2:      case "kaisha":
   3:          txJob = "会社員";
   4:          break;
   5:      case "koumu":
   6:          txJob = "公務員";
   7:          break;
   8:      case "jiei":
   9:          txJob = "自営業";
  10:          break;
  11:      case "part":
  12:          txJob = "パート";
  13:          break;
  14:      case "student":
  15:          txJob = "学生";
  16:          break;
  17:      default:
  18:          txJob = "その他";
  19:          break;
  20:  }

 

という感じになる。

 

さて、だいたい書きたいことは書いてきたので、

VB的に覚えるTypeScriptはこの辺でいったん投稿を終わりにする。

 

ざっと見てきても分かるように、

JavaScriptで考えるよりもVBなどからダイレクトに言語変換できるので、

JavaScriptをはじめようと考えているなら、

まずはTypeScriptから入ってみるのが早いかもしれない。

 

その後、コンパイルされて生成されたJavaScriptを眺めて

JavaScriptを勉強した方が、理解が早いのではと考える。

 

 

関連記事

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

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

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

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

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

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

 

 

HTMLアプリのデバッグができない?〜VS2015 + HTMLアプリケーション

XAMLデザイナーのデザインビューが表示されない?〜Visual Studio 2015

 

 

コメント
コメントする








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

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>

search this site.

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

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


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

others

mobile

qrcode

powered

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