タイムリーな放送

  • 2017.03.16 Thursday
  • 11:39

 

聞いた話によると、

明日の19時、日テレの沸騰ワード10がちょうど大島の話題らしい。

 

ロケットの話題でるかな?

kyu

 

こんなところで

  • 2017.03.15 Wednesday
  • 21:59

近所のニューデイズで、まさかのヨーグルッペ!

これでF33に行った気分♪

どうやら九州フェアらしい

ハッケン!九州フェア

 


 

 

 

関連記事

ヨーグルッペ〜北海道日高

 

シナリオ通り、木曜打ち上げ延期の呪縛

  • 2017.03.14 Tuesday
  • 20:18
まあ、自分の中では木曜打ち上げの延期はシナリオ通りで、
16→17日となりました。

天候が急激に変化するようですね。

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

  • 2017.03.12 Sunday
  • 22:58

 

前回はモジュールの話で終わってしまったので、

今回はクラスの話

 

■VBでクラスを書く

まずは、ここではよく使うfruitクラス(いつもは構造体ですが)をVBで書いてみる

 

   1:  Namespace Yaoya
   2:   
   3:      Public Class Fruit
   4:   
   5:          Private _Name As String
   6:          Private _Price As Integer
   7:   
   8:          Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer)
   9:   
  10:              Me._Name = srcName
  11:              Me._Price = srcPrice
  12:   
  13:          End Sub
  14:   
  15:          Public ReadOnly Property Name() As String
  16:              Get
  17:                  Return Me._Name
  18:              End Get
  19:          End Property
  20:   
  21:          Public Property Price() As Integer
  22:              Set(value As Integer)
  23:                  Me._Price = value
  24:              End Set
  25:              Get
  26:                  Return Me._Price
  27:              End Get
  28:          End Property
  29:   
  30:          Public Overrides Function ToString() As String
  31:              Return Me._Name & ":" & Me._Price
  32:          End Function
  33:   
  34:      End Class
  35:   
  36:  End Namespace

 

せっかく前回Namespaseを書いたので、Namespase内でFruitクラスを定義してみた。

これを初期化(New)すれば使えるようになる。

 

   1:  Dim nwFruit As Yaoya.Fruit = New Yaoya.Fruit("みかん", 100)
   2:   
   3:  MessageBox.Show(nwFruit.ToString)

 

実行結果


余談になるが、VB2010以降であれば、かなり省略することができる。

 

   1:  Public Class Fruit
   2:   
   3:      Public ReadOnly Property Name As String
   4:      Public Property Price As Integer
   5:   
   6:      Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer)
   7:   
   8:          Me.Name = srcName
   9:          Me.Price = srcPrice
  10:   
  11:      End Sub
  12:   
  13:      Public Overrides Function ToString() As String
  14:          Return Me.Name & ":" & Me.Price
  15:      End Function
  16:   
  17:  End Class

 

特にプロパティ内で処理がない場合はこの方がスッキリして見やすいであろう。

今回は次の話もあるので、最初の省略なしソースを使う。

 

 

■TSでクラスを書いてみる

さて、上のVBのクラスをTSで書いてみる

 

   1:  namespace Yaoya {
   2:   
   3:      export class Fruit {
   4:          private _Name: string;
   5:          private _Price: number;
   6:   
   7:          constructor(srcName: string, srcPrice: number) {
   8:              this._Name = srcName;
   9:              this._Price = srcPrice;
  10:          }
  11:   
  12:          get Name(): string {
  13:              return this._Name;
  14:          }
  15:   
  16:          get Price(): number {
  17:              return this._Price;
  18:          }
  19:   
  20:          set Price(value: number) {
  21:              this._Price = value;
  22:          }
  23:   
  24:          toString(): string {
  25:               return this._Name + ":" + this._Price;
  26:          }
  27:      }
  28:  }

 

だいたいこんな感じで、

こうやって、

 

   1:  var newFruit: Yaoya.Fruit = new Yaoya.Fruit("みかん", 100);
   2:   
   3:  alert(newFruit.toString());

 

実行結果

 

TSでもある程度の省略が可能である。

4〜10行目を

 

   1:  constructor(private _Name: string, private _Price: number) {
   2:  }

 

と置き換えることができる。

こちらもVBと合わせるために、省略なしの方を使う。

 

 

■コンストラクタ(New)と複数のコンストラクタ

クラスということで、コンストラクタ(VBはNew、TSはconstructor)をクラス内に定義する。

ちなみに、省略することも可能である。

 

逆に複数のコンストラクタを書いてみることもできるようだ。

 

例えば、VBで複数のコンストラクタを定義すると、

TSに変換するコードを意識しながら、

 

   1:  Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer)
   2:   
   3:      Me.NewCore(srcName, srcPrice)
   4:   
   5:  End Sub
   6:   
   7:  Public Sub New(ByVal srcName As String)
   8:   
   9:      Me.NewCore(srcName, 0)
  10:   
  11:  End Sub
  12:   
  13:  Public Sub New(ByVal srcPrice As Integer)
  14:   
  15:      Me.NewCore("未定義", srcPrice)
  16:   
  17:  End Sub
  18:   
  19:  Private Sub NewCore(ByVal srcName As String, ByVal srcPrice As Integer)
  20:   
  21:      Me._Name = srcName
  22:      Me._Price = srcPrice
  23:   
  24:  End Sub

 

こんな感じに書いて、

そして、初期化してみると

 

   1:  nwFruit = New Yaoya.Fruit("みかん", 100)
   2:  MessageBox.Show(nwFruit.ToString)
   3:   
   4:  nwFruit = New Yaoya.Fruit("いちご")
   5:  nwFruit.Price = 300
   6:  MessageBox.Show(nwFruit.ToString)
   7:   
   8:  nwFruit = New Yaoya.Fruit(200)
   9:  MessageBox.Show(nwFruit.ToString)

 

実行結果

 

 

■TSの複数コンストラクタ

これをTSに書き直すと

 

   1:  constructor(srcName: string);
   2:  constructor(srcPrice: number);
   3:  constructor(srcName: string, srcPrice: number);
   4:  constructor(arg1: any, arg2?: any) {
   5:   
   6:      if (typeof arg1 === "string") {
   7:          this._Name = arg1.toString();
   8:          if (typeof arg2 === "number") {
   9:              this._Price = Number(arg2);
  10:          } else {
  11:              this._Price = 0;
  12:          }
  13:      }
  14:      else if (typeof arg1 === "number") {
  15:          this._Name = "未定義";
  16:          this._Price = Number(arg1);
  17:      }
  18:  }

 

ものすごく大ざっぱだが、こんな感じに書ける。

必要なコンストラクタを ; 区切りで定義して、

最後に、any型のコンストラクタを定義してあげることで、

複数のコンストラクタを作ることができるようだ。

 

ただ、前にも説明したように、any型で来るので、

それぞれの引数が、どのコンストラクタを通して初期化されたのかを

判別して変数に入れてあげる必要が出てくる。

 

自分の中だけで使う分には上のようなザックリでもよいが、

共有するためのクラスを作るなら判別はしっかりとしておいた方がよい。

 

さて、これを実行すると

 

 

何となく判別式を通っているようだ。

 

 

■?マークはOptional

説明が前後したが、arg2 の後ろに付いている?マークは、変数を省略可能であるという記号である。

VBで言うなら Optional となる。

 

   1:  Public Sub Hoge(ByVal arg1 As String, Optional ByVal arg2 As String = "hoge")
   2:  '処理
   3:  End Sub

 

VBのOptional は必ずデフォルト値が必要になるが、

同様にTSでもデフォルト値を設定できるようだが、

 

参考

TypeScript超入門(2):構文を理解する

 

TypeScriptを使用したHTMLアプリケーションではエラーが出てしまうようだ

 

パラメーターに疑問符および初期化子を指定することはできません。


とりあえず、デフォルト値は入れられないが、省略だけは可能であるので、

内部でNullかどうかという処理を入れる方がよい

 

 

■クラス内の変数を使うには

VBであれば、基本的にMeは省略できるが、

TSに書き換えをするときにだいたい同じ意味合いになるので、

今回は省略していない。

 

それとVBの話ですが、

継承などしたときに、継承基(MyBase)か継承先(Me)かを区別するのに、

書いておいた方が良いことがある。

 

さて、MeをTSに書き換えると、this になる。

こちらは省略できない。

 

Cannot find name xxx Did you mean the instance member this._Name ?

 

 

■プロパティ

VBのプロパティは、Property〜End Propertyを宣言して、

その中にget setアクセサを入れるが(上のソースで、Priceプロパティ)、

TSではProperty 〜 End Property はなく、

アクセサに、名前を付けて宣言する形となる。

 

また、VBのReadonly プロパティはgetアクセサだけ(上のソースで Name プロパティ)、

Writeonlyは set アクセサだけの宣言になる。

 

 

■メソッド

VBでメソッドを書く場合、

Sub や Function で定義して書くが、

 

TSのクラス内では、いきなりメソッド名から書く

ある意味 function を省略した形で書いているような感じと思えばよい。

 

 

■継承

上のFruitに追加機能を持たせた新しいクラスを作成することもできる。

まずは、VBの上のソースの一部を書き換えて

 

   1:  Protected _Name As String
   2:  Protected _Price As Integer

 

継承先で使わない場合は、privateのままで問題ありませんが、

もし使う場合はProtected にしておかないと警告がでます。

 

 

そして、継承クラスを作る。

 

   1:  Public Class FruitExt
   2:      Inherits Fruit
   3:   
   4:      Private _Sanchi As String
   5:   
   6:      Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer, ByVal srcSanchi As String)
   7:   
   8:          MyBase.New(srcName, srcPrice)
   9:          Me._Sanchi = srcSanchi
  10:   
  11:      End Sub
  12:   
  13:      Public Property Sanchi As String
  14:          Set(value As String)
  15:              Me._Sanchi = value
  16:          End Set
  17:          Get
  18:              Return Me._Sanchi
  19:          End Get
  20:      End Property
  21:   
  22:      Public Overrides Function ToString() As String
  23:          Return MyBase._Name & ":" & MyBase._Price & ":" & Me._Sanchi
  24:      End Function
  25:   
  26:  End Class

 

ちょっと機能を追加した継承クラスを作ることができる。

 

これをTSに置き換える。

TSでも内部で使う場合は、

 

   1:  protected _Name: string;
   2:  protected _Price: number;

 

とprotected にする。

もちろん使わないならprivateのままでよい

 

あとは同じように書き換える

 

   1:  export class FruitEx extends Fruit {
   2:   
   3:      private _Sanchi: string;
   4:   
   5:      constructor(srcName: string, srcPrice: number, srcSanchi: string) {
   6:          super(srcName, srcPrice);
   7:          this._Sanchi = srcSanchi;
   8:      }
   9:   
  10:      get Sanchi(): string {
  11:          return this._Sanchi;
  12:      }
  13:      set Sanchi(value: string) {
  14:          this._Sanchi = value;
  15:      }
  16:   
  17:      toString(): string {
  18:          return this._Name + ":" + this._Price + ":" + this._Sanchi;
  19:      }
  20:  }

 

継承のおまじないは、VBの Inherits が、TSでは extends となる

 

VBの継承先のコンストラクタにある Mybase.New は、TSでは、super になる。

 

そして、基底の変数をMybase で呼び出したが、TSは this のままで良いようだ。

 

クラスはだいたいこんなところだろうか。

 

まだまだ話は続きます。


 

関連記事

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

 

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

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

 

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

  • 2017.03.10 Friday
  • 23:49

 

さて、次の話をする前に、モジュールとかクラス、Namespaceなどの話を書いてみる

 

■VBのモジュール

VBをずっとゴリゴリ書いている人なら、

モジュール(module)という言葉は何となく分かると思う

 

   1:  Module Hoge
   2:      Private Function fcHoge() As String
   3:          Return "Hoge.fcHoge"
   4:      End Function
   5:   
   6:      Public Function exHoge() As String
   7:          Return "Hoge.exHoge"
   8:      End Function
   9:  End Module

 

こんな感じに書いて、

 

   1:  MessageBox.Show(Hoge.exHoge)

 

と呼ぶと、

 

 

ちなみに、VB.netは、VBの互換(?)としてモジュールが残っているような感じなので、

例えば、これからC#もやろうと思っている場合は、

モジュールというものはないので、

クラスでSharedな変数やメソッドを書くことになる。

いつもの他力ちゃんします。

 

連載! とことん VB: 第 14 回 Visual Basic 固有の「モジュール」(Module) の役割

 

 

■TSのモジュール

TSの場合もほぼ同じような感じである。

 

   1:  module Hoge {
   2:      function fcHoge():string {
   3:          return "Hoge.fcHoge";
   4:      }
   5:      export function exHoge(): string {
   6:          return "Hoge.exHoge";
   7:      }
   8:  }

 

こんな感じに書けて、

 

   1:  alert(Hoge.exHoge());

 

呼ぶと

 

 

■moduleはnamespace

ちなみに、TSでもmoduleで書くのは一昔前で、

最近の書き方としては、

 

   1:  namespace Hoge {
   2:      //コードを書く
   3:  }

 

といったように、module → namespace を使うのが良いらしい。

 

TSを勉強する中で、内部モジュールとか外部モジュールとかいう話が出てきて、

名前負けして挫折してしまう部分かもしれませんが、

 

内部module は namespace のことだよと言われるとちょっと分かってくる。

 

 

■外部モジュール

では、外部モジュールは?という話だが、

ちょっとVBではなく、VBAの方が感覚的に似ているので、

Excelのマクロで2つのモジュールを作って、それぞれにコードを書いて実行すると

 

 

ファイルをまたいで実行される。

 

TSの外部モジュールの考え方もこれと同じで、

新規にtsファイルを作って、

 

 

その中に、似たようなソースを書いて

 

 

今度は別のTSファイルから呼び出すと・・・

 

 

ちゃんと補完してくれる → ファイルをまたいで利用できるようだ。

もちろん実行すると、

 

 

ちゃんと出力される。

 

つまり、外部モジュール→別ファイルに書いたコードという感じであろう。

 

■外部モジュールの参照

ちなみに、今回はVSで「TypeScriptを使用したHTMLアプリケーション」を使っているが、

どうやらこのプロジェクトは、VBのプロジェクトのように、

次に書く、参照の手続きが要らないようだ。

 

しかし、その他の開発環境では必要になるので(そのうち書くが、jsファイルを取得する際はVSでも必要になる)、

忘れずに書いておく方がよい。

(不要ならコメントアウト)

 

まず、file1.ts を参照したい TSファイルのヘッダ(先頭行)に

スラッシュを3つ連ねて、続いて、reference タグを書き、

タグ内のpathに参照するTSファイルのパス(相対でよい)を入れる

 

   1:  /// <reference path="file1.ts" />

 

こんな感じ

 

 

このおまじないをすることで、先ほどのように補完してくれるようになると思う。

 

次に、これは「TypeScriptを使用したHTMLアプリケーション」でも必要になるが、

reference自体はTSだけのおまじないなので、コンパイルされるたJSでは参照はしてくれない。

 

なので、HTMLのソース内に

 

   1:  <script src="file1.js"></script>

 

と、jsファイルのパスを指定しておく必要がある。

もちろん読む順番は使う場所より前になるので、

 

 

という感じになる。

 

この手続きをすることで、先ほどの

 

 

が出力される。

 

■exportとimportとrequireによる参照

ちなみに、外部モジュールはexport、import、requireでも呼び出せるようなのだが、

ちょっと書いてみたのですが、「TypeScriptを使用したHTMLアプリケーション」ではうまくimportできなかった。

 

とりあえず、書き方として覚え書きしておく

referenceタグではなく、importを使ってファイルを指定する。

(ファイル名は拡張子なしでよい)

 

   1:  import hoge = require('./file1');

 

ただ、上のままのソースだと、

 

TS2306 ファイル *** はモジュールではありません。

 

と警告が出てしまう。

タイトルの通り、外部モジュールにexportが書かれていないからである。

 

file1.ts の中を次のように export 付きの namespace hoge を取り付けて、

さらに、内部の出力したいメソッドなどに export を付ける。

 

   1:  export namespace hoge {
   2:      function fcHoge(): string {
   3:          return "file1.fcHoge";
   4:      }
   5:      export function exHoge(): string {
   6:          return "file1.exHoge";
   7:      }
   8:  }

 

これで、警告が消えてくれるので、

先ほどの呼び出しを変更する。

 

   1:  alert(hoge.hoge.exHoge());

 

hogehogeばかりで分かりにくいが、

先頭のhogeがimportしたhoge

次の hoge が export した namespace のhoge

最後は export したメソッドになる。

 

これでうまく動いてくれれば良いのだが、

自分の「TypeScriptを使用したHTMLアプリケーション」では正しく動いてくれなかった。

 

プロジェクトのプロパティのビルド方法をAMDに変えてみたりしたが、

出力される結果は、それぞれのコンパイルの書式に変換はされているようだが、

やっぱりうまく動作しなかった。

 

 

もしかすると、他におまじないが足りないのかもしれない。
解決方法が分かれば追記したい。

 

とりあえず、ここでは(「TypeScriptを使用したHTMLアプリケーション」では)

referenceタグでの参照(または、省略)の方法で話をしていく。

 

その場合の file1.ts は namespace の export が取れて、

 

   1:  namespace hoge {
   2:      function fcHoge(): string {
   3:          return "file1.fcHoge";
   4:      }
   5:      export function exHoge(): string {
   6:          return "file1.exHoge";
   7:      }
   8:  }

 

となって、

 

   1:  alert(hoge.exHoge());

 

という感じで呼び出せる。

 

■export

さて、話をずいぶん飛ばしているが、

exportについて説明をしていなかった。

 

外部モジュールで書いた様に、namespace や class 内の変数やメソッドを

他の namespace 内のメソッドや class 内で使えるように出力するよ という意味になる。

 

なので、上の namespace hoge 内の export の付いていない fcHoge は別のとこからは参照することができない。

 

 

export が付いていないと private、付いていると public 見たいな感じになる。

 

ようやく一番最初のVBとTSのソースが同じような関係であると説明できた。

 

ところで、TSの module は namespace だよという話をしたが、

VBで Namespace に変更して書いてみると

 

 

怒られる。

VBではNamespace直下にメソッドはおけないので、

module や class を作って、その下に置く必要がある。

 

 

 

長くなったので、クラスは次回


 

関連記事

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

 

 

リンクとして追加したら、うまく結合されない〜VB2015

  • 2017.03.10 Friday
  • 12:33

 

例えば、リリース用とデバッグ用にプロジェクトを別けたり、

別のプロジェクトとファイルを共有してソースを書いたりする際、

 

以前書いた、リンクとして追加という機能を使うのだが、

 

 

その際使ったのはVisual Studioの2008で、

久しぶりにこの機能を2015で使ってみたら・・・

 

 

バラバラ事件

 

どうやらフォームやサービスは、デザイナーやリソースがバラバラになってしまうようだ。

 

さて、どうしよう

 

ということで、プロジェクトファイル(vbproj)を眺めてみると、

 

 

どうやら、DependentUponというタグがミソらしい。

Designer.vb と resx ファイルに DependentUponタグを追加し、

結合したいメインのvbファイル名(ファイル名のみ、パスは不要)を入力したら

 

 

結合されました。

 

 

関連投稿

クラスやモジュールを共有したい〜VB2008

サービスプログラムのデバッグを考える〜VS2008 コンソールプログラムからのアプローチ

ASP.Netでサーバエラー〜文字コード化け

認識できるCSSプロパティ名ではありません〜Visual Studio 2015

  • 2017.03.09 Thursday
  • 23:13

 

ちょっとブレーク?

 

今回VS的TSでTypeScriptをゴリゴリ書いていたら、CSSで警告が出まくった。

 

検証(CSS 3.0): "xxx"は認識できるCSSプロパティ名ではありません。

 

ネットで調べたところ、Web Essential をインストールしたら出なくなったと書かれていたので、入れて見ることに。

 

Validation CSS 3.0 not a known property name

 

オンラインからWeb Essentialsを検索して、インストール

 

 

確かにエラーが消えてくれました。

 

別の方法で解決してみたかったが、良い方法が見つからなかったので、

解決法の一例まで

 

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

 

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

 

 

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

 

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