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

  • 2017.03.09 Thursday
  • 22:47

 

さて、長い前置きも終わりTypeScriptでゴリゴリソースを書いていくことに、

 

VB的に覚えるということで、

Visual Basicと並行に見ていくことにする。

 

 

■コントロールの追加

HTMLのデザインビュー上にVBのフォームアプリのように

ドラッグ&ドロップでコントロールを追加

 

 

とりあえず、Input(Button) [Button]を適当に配置しておく

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

 

 

 

■ボタンイベント(VB)の追加

配置したら、ボタンにイベントを入れてみるのだが、

VBでは、ボタンイベントをダブルクリックすれば

 

   1:  Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
   2:   
   3:  End Sub

 

とClickイベントが自動的に生成されるが、

HTMLのデザイナーでボタンをダブルクリックしても生成されることはない

 

この辺は手動でゴリゴリ書く必要がある。

 

いよいよTypeScriptで書いていくことになる

kyukyukyu

 

でも、テーマであるVB的に考えると意外に書ける(かもしれない?)

 

 

ちなみに、TypeScriptはなんて言うのか、

 VBA(or VBS) +C#というイメージ(C#版のVBS?)

という感じが近いかもしれない。

 

VB.netみたいに高機能ではなく、

VBAやVBSのようにちょこっとスクリプトを書く感覚で、

言語がC#ライクになったという感じである。

 

まぁゴタゴタ書いていないで、話を進める。

 

■フォームロード

まずは、VBのフォームアプリの場合、

起動時の処理は、

 

   1:  Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
   2:   
   3:  End Sub

 

とLoadイベント(にハンドルされたsub関数(プロシージャ))が最初に読み込まれる。

 

では、TypeScriptを使用したHTMLアプリケーション プロジェクトの方ではというと

app.ts内に書かれている

 

   1:  window.onload = () => {
   2:   
   3:  };

 

がその部分と同じと考えて良い

 

■再びボタンイベント(TypeScript)の追加

今回はここに、ボタンのクリックイベントを追加してみる。

 

VBの場合で考えてみると、

あるsub関数(Button1_Clickとする)をClickイベントに結合(ハンドル)する場合は、

AddHandlerを使えば良いので、Load時に

 

   1:  AddHandler Me.Button1.Click, AddressOf Button1_Click

 

と書くことでダブルクリックして生成されたのと同じように、

クリックすると、Button1_Click関数が呼び出されるようになる。

 

ではTypeScriptでクリックイベントを追加してみる

 

   1:  var fmBtn: HTMLButtonElement = <HTMLButtonElement>document.getElementById("Button1");
   2:   
   3:  fmBtn.onclick = () => {
   4:      alert("イベント");
   5:  };

 

こんな感じになる。

 

ちょっとイベントを追加する前に、HTML(document)からボタンを取得して

取得した変数にイベントを入れてあげるという手順が必要になる。

 

VBでも、表面には出てこない、Form.Designer.vbのInitializeComponentメソッド内で

Buttonが宣言されているので、同じ感じである。

TSは自分でゴリゴリ書かないと行けないので、

ちょっと手順が必要になっていると思えば良い、

 

VBでも同じように書いてみると、

 

   1:  Dim fmBtn As Button = Me.Button1 'New Button
   2:  AddHandler fmBtn.Click, AddressOf Button1_Click

 

こんな風にになるでしょうか

 

このコードで比較しながらTypeScript(面倒なので、これからはTS、JavaScriptはJSで)を読んでいくと、

 

■変数の宣言

var が VBで言うDim 変数を宣言するおまじないで、

: As

そして、TSは型という概念(?)を持っているので、

ここでは、HTMLButtonElement という型を 変数 fmBtn に持たせて(宣言して)あげた

という感じになる。

 

これで変数の準備ができたので、

 

続いてHTML(document)からButtonを取得してあげてfmBtnに入れてあげるために

document.getElementById (TS的には戻り値にHTMLElement型を持つ関数)を使うのだが、

 

そのまま = で結んで変数に入れてあげても良いのだが、

せっかく型を宣言してあげているので、ここはキャストをしてあげてみる、

 

 

■値のキャスト

まずは、VBでのキャストは、

 

   1:  Dim fmBtm As Button = DirectCast(sender, Button)

 

という感じに書ける、では、TSでのキャストはというと、

そう、コードにある<>で囲まれた部分がDirectCastみたいなものに該当する。

 

document.getElementByIdで取得されたHTMLElement型を

HTMLButtonElement 型にキャストしたいので、

 

   1:  <HTMLButtonElement>document.getElementById("Button1")

 

という感じなる。

 

これで、HTMLButtonElement 型のfmBtn変数ができたので、

いよいよ、

 

■コード(行)の終わりに

の前に、VBにはないおまじないが最後に必要である。

 

このおまじないはC言語ではおなじみで、最後にセミコロン(;)を書くことで、

その書いているコードが、ここで終わりですよというのを教えてあげる。

 

VBから入るとセミコロンを忘れやすいので、気をつけたい。

(一応コンパイラが理解できる書き方であればJSに変換される際に付けてくれる)

 

 

■いよいよボタンイベント(TypeScript)の追加

これで、ようやく完成、

続いて、fmBtnのクリックイベント、onclick にイベントを結合してあげる

 

っと、その前に話をちょっとだけ脱線するが、

VBではなく、C#の場合はどんな感じでイベントを結合しているかを確認してみると、

 

   1:   this.button1.Click += new System.EventHandler(this.button1_Click);

 

といった書き方になるようだ。

 

この他に、ずいぶん前にWPFでC#しかソースがないと嘆いたときに、

C#の+=がAddHandlerに該当することを遠回しに紹介した、

匿名関数、ラムダ式などというやつがあり、

 

その方法で書くとこんな感じでイベントが作れる。

   1:  this.button1.Click += (obj, ev) => {
   2:      //ここに処理を書く
   3:  };

 

蛇足の蛇足ですが、嘆いた当時はVB2008だったので書けなかったラムダ式は

2010以降から書けるようになりました。

 

   1:  AddHandler fmBtm.Click,
   2:      Sub(obj As Object, ev As EventArgs)
   3:          'ここに処理を書く
   4:      End Sub

 

 

さて、このイメージで話を戻して、上の方のTSのコードを見ると、

C#のような感じでアロー関数というのを書いてあげることで、

イベントに機能を追加してあげることができる。

window.onloadも同じ形式で書かれていることに気づかれたかと思う。

 

ちなみに、この書き方はかなり省略型なのですが、

 

詳しいことは他力ちゃんで、こちらが良いかと思います。

 

【TypeScript】アロー関数式について

 

 

■今回のコード

ということで、TSのコードを再度書いてみると、

 

   1:  window.onload = () => {
   2:      var fmBtn: HTMLButtonElement = <HTMLButtonElement>document.getElementById("Button1");
   3:   
   4:      fmBtn.onclick = () => {
   5:          alert("イベント");
   6:      };
   7:  };

 

こんな感じで、よーーーやくonclickイベントが書けたところで、

その3へ続く・・・。

 

の前に、1つ、クリックイベントの内容を取得したい場合は、

 

   1:  fmBtn.onclick = (e) => {
   2:  }

 

と e とか言う感じで変数を入れてあげると、MouseEvent型が取得できる。

 

 

関連記事

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
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>

search this site.

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

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


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

others

mobile

qrcode

powered

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