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

 

とかもある。

 

追記

※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

 

 

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

 

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

  • 2017.03.09 Thursday
  • 22:34

 

さて、そろそろ自分もWeb開発でもしようかと思い立ったが、

もはや追いついていけないレベルな今日この頃。

 

せいぜいしーた朗を作るのが限界

 

   1:  //度->ラジアン変換
   2:  function fcDegToRad(srcValue) {
   3:      "use strict";
   4:      if (srcValue === 0.0) {
   5:          return 0.0;
   6:      } else if (srcValue === 1.0) {
   7:          return Math.PI / 180.0;
   8:      } else {
   9:          return (Math.PI * srcValue) / 180.0;
  10:      }
  11:  }

 

こんな程度の簡単なスクリプトを書ければ良い方で、

 

ずいぶん前に投稿したが、

このソースの=== の部分でも始め警告の意味が分からなかった。

 

今どきのJavaScriptのソースを読むと、

(function () {} ()) ってどういうこと?

 

   1:  (function () {...}());

 

$ってなんだよ、(function ($) {}(jQuery))ってどうなっているんだ?

 

   1:  (function ($) {}(jQuery));

 

とか

 

こちらの記事が分かりやすい

(function($) {})(jQuery);って何?って思ったからいろいろ試してみた記録

 

 

しばらくホームページとか作っていない間にずいぶんと言語が進化(?)していて、

原始人にはもはや追いつけないレベル。

 

 

さて、長い前置きはこのくらいにして、

何かWeb開発(といっても、自分の中ではしーた朗レベルがサクッとできればよいのだが)で入り込める余地はないかと、

この2年くらい模索していたのだが、

 

TypeScriptという言語がなんだか良さそうに思えたので、

ちょっと勉強してみることに、

 

この言語、MicrosoftによってJavaScriptの代替言語として開発されたもので、

ここでもおなじみVisual Studioでももちろん開発が可能である。

 

 

ということで、早速勉強してみようと思ってはみたが、

全く文献がない(特に日本語で)のが欠点かもしれない。

(いや、最近の開発は英語ができないともはや開発できないのかもしれない)

 

ある文献といっても2014年とかで完全に停滞とか

本当に大丈夫なのか?と不安もよぎるが、

 

まぁ、Google(Angular)もTypeScriptで開発を、今のところ、進めているので、

しばらくは大丈夫だろうと言うことで。

 

 

ただ、本当に文献が少なくて分からないのだが、

ゴリゴリ書いてみたところ、

これはVB(VBA)の感覚と似ているなと思ったので、

 

もし自分のようにWeb開発をしてみたいけれど、

VBなどのフォームアプリしか書いたことが無いという人が

これをきっかけにゴリゴリ書けるようになればいいなと

 

ちなみに、先日作ったみはるちゃん

すべてTypescriptで書いたものです。

 

 

■Visual StudioでTypeScriptを開発する

さて、前置きの前置きも長くなりましたが、

Visual Studioのどのプロジェクトで開発しようかということで、

TypeScriptを使用したHTMLアプリケーションでまずは書いてみることに

 

 

プロジェクトができたら、チューニング

ずいぶん前に書いた、デザインビューが表示されないという件と同じで、

HTMLファイルを普通に開くとタグをゴリゴリ書くソースモード(下)になってしまうので、
 

 

デザイナーモードを既定にしておくとよい(かも)

 

htmlファイルを右クリックして、ファイルを開くアプリケーションの選択

プログラムから開く の中からHTML(Webフォーム)エディターを選択

ついでに、既定値として設定しておいても良い。

 

 

これでフォームをデザインしながらソースをいじれるように

 

それと、ちょっと前に書いた、

デバッグができなくなる場合があるので、

設定を書き換える

 

 

今回はとりあえずここまで

 

 

追記

プロジェクトの作成ついでで、TypeScriptのコンパイラのバージョンを調べたいときは、

ヘルプメニュー→Visual Studioのバージョン情報

 

インストールされている製品の中から現在のコンパイラのバージョンが分かる。

 

 

ちなみに、SDKのインストール先は、

C:¥Program Files (x86)¥Microsoft SDKs¥TypeScript

¥は半角

 

に歴代のバージョンが並んでいて、

仮に、インストールされている古いバージョンでコンパイルしたいときは、手動で修正するしかないようだ

 

プロジェクトファイルをテキストエディタで開いて、

 

TypeScriptのバージョンをコンパイルしたいバージョンに変更する。

 

 

 

参考

Which Version of TypeScript is Installed and Which Version is Visual Studio Using?

 

 

関連記事

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

 

NullをReplaceできるのか?〜VB2015

  • 2017.03.08 Wednesday
  • 21:57

 

Null文字("")を文字置換できるのか?

という質問をもらったので、試して見た。

 

つまり、第1引数に""を入れて、第2引数に置換するという感じ。

 

まず、なにも入っていない文字列を置換してみると

 


 

エラー

適当な文字を入れて見ても

 

 

同じエラー

つまり、Replaceの第1引数に Null ("") を入れることはできないようだ。

 

ちなみに、""文字を""以外で置換するのは

 

問題なさそう

 

話ついでに、Nothingを入れて見ると

 

 

違うエラーが出るので、事前に判別が必要だ

 

おまけ、当たり前だけれど、文字を""に置換することは可能

 

 

 

関連記事

Replace関数って・・・

 

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

  • 2017.02.07 Tuesday
  • 13:10

 

HTMLの開発はBracketsやAtomなどを使ってゴリゴリ書いているのだが、

 

VBをずっと使い続けている自分としてはVisual Studioで書きたい

 

Visual Studio Codeでも良いのだが、VS自体があるので、

あえてCodeを選択するのも今さらな

 

まぁ前置きはこのくらいにして、VSに入っているWeb系のプロジェクトはいろいろあるが、

 

ちょっとHTMLアプリケーションのプロジェクトで書いてデバッグしようとしたら・・・

 

Web.configファイルでデバッグが無効なため、

このページをデバッグモードで実行できません。

以下のオプションから選択してください。

 

デバッグ実行ができないよと警告

 

そして、ラジオボタンを選択してOKしても、

 

操作を完了できませんでした。

エラーを特定できません。

IIS Express Webサーバーを起動できません。

 

とか立て続けに警告

 

あれ、保存する前は起動できたのに・・・。

(プロジェクトを任意のフォルダに書き出す前はデバッグはできた)

 

Web.configには、debug="true"と書いてあるし、

ネットで調べてもdebug="true"を書くみたいな内容しか出てこない

 

とりあえずデバッグならプロパティの設定も見て見ようと探してみたところ、

どうやら、この辺を直すといいらしい。

 


 

プロジェクトのプロパティを開いて、Webタブを選択

 

ページを指定するにチェックを入れて、直接 index.html と打つか、ページを選択する

※index.htmlを選択した場合、テキストボックスが空になることがあります。

 

これで再度デバッグでようやくデバッグ起動できました。

 

ちなみに、登録しても上のエラーが出る場合は、一度プロジェクトを閉じて、

開き直すとうまくいいくようです。

 

 

関連記事

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

 

 

ブレークポイントが突然現れる!?位置ズレ?

  • 2017.01.13 Friday
  • 06:25

 

プログラムをゴリゴリ書いて、早速デバッグ!

と思ったら、変なところでブレーク

 

 

!?

 

こんなところにブレークポイントを貼った覚えはないぞ???

 

デバッグを停止すると確かにブレークポイントはない

 

 

とりあえず、クリーンして、リビルド!

 

改善しない・・・

 

 

ネットで調べると、改行コードが混在しているとかで、解決できると書かれている記事もあったので、

調べてみたが、それらしい誤りはなさそう。

 

 

ムムム、お手上げ・・・か?

 

 

そういえば、ブレークポイントを貼り付けた一覧がどこかで見られるはず・・・

と調べてみると、ありました。

 

デバッグ→ウインドウ→ブレークポイント

 

 

この一覧からそれっぽいもの(該当しそうな行)をチェックを入れたり切ったりしながら調べてみる。

 

すると、該当する箇所がありました。

しかもダブルクリックすると、見つかりませんとか出る・・・。

 

ブレークポイントへ移動できません。指定されたパスが見つかりません。

 

 

チェックを外すとブレークが消えるので、明らかにここが原因であると言える。

 

要らないので削除してみたら・・・

 

 

ようやく解決できました。

 

 

ちなみに、今回の大きな原因は、

ファイル名を変更したことにあるようです(図中、ソースファイル名を小文字から大文字に変更)。

 

 

なお、DLLなどで正しく引っかからない場合は、

クリーン→リビルドでだいたいなおるはずです。

 

 

参考

ブレークポイントの使用

 

関連投稿

ブレークポイントは現在の設定ではヒットしません〜ソリューションのデバッグ

 

 

ReportViewが表示されない?〜Visual Studio 2015

  • 2016.08.26 Friday
  • 20:06

 

Visual Studio 2008からアップグレードしたプロジェクトをゴリゴリ修正して、

いよいよ終盤ということで、印刷機能を修正しようとしたら

 

ファイルアセンブリ Microsoft.ReportDesigner Version=9.0.0.0 〜〜〜 またはその依存関係の1つが読み込めませんでした。

見つかったアセンブリのマニフェスト定義はアセンブリに一致しません。

 

となってしまった。

 

参照を見ると、アップグレードしたプロジェクトは9.0.0.0のReportViewが使われており、

2015のReportViewは12.0.0.0なので、バージョンの不一致により正しく表示できないようである。

 

VS2008をアップグレードしたプロジェクト

 

プロジェクト上では12.0.0.0となっている

 

VS2015で新規に作った場合は12.0.0.0が参照されている


 

とりあえず、新規にプロジェクトの参照を確認しながらバージョンを変更してみることに

 

参照の追加から、参照マネージャーを開き、

アセンブリの拡張を選択、Microsoft.ReportViewerを探して、

バージョンの9.0.0.0はすべてチェックを外し、12.0.0.0にチェックを入れ、参照ボタンをクリックして

バージョンの入れ替えが完了するはず。

 

 

ちなみに、Commonというのはこのダイアログにはないので、

もし必要があれば、

 

C:¥Windows¥assembly¥GAC_MSIL¥Microsoft.ReportViewer.Common¥12.0.0.0__89845dcd8080cc91¥Microsoft.ReportViewer.Common.dll

※¥は半角

 

あたりを参照すれば良い

 

 

追記

さて、コンパイルも終わり、クライアントに導入しようとしたら・・・

ランタイムがないというエラーが

 

ああ、すっかり忘れていたということで、

Microsoft Report Viewer 2015 Runtime

を落としてきて入れようとするが・・・

 

 

Microsoft SYstem CLR Types for SQL Server 2014がないからインストールできないよ

という案内が・・・

しかも不親切にURLとかないし・・・。

 

仕方がないのでキーワードで検索したところ、どれを落とすの的な感じに・・・。

 

とりあえず、Microsoft® SQL Server® 2014 SP1 Feature Packと検索されているダウンロードページを開き

※SP1を適用しない場合は、SP1無しの方

 

ダウンロードボタンを押してみると、SQL関連のリストがズラズラと表示される。

 

 

その中から SQLSysClrTypes.msi というのを探し出す。

※OSが64bitならx64 32bitならx86のSQLSysClrTypes.msiにチェックを付ける。

 

ダウンロードしたインストーラのプロパティが「Microsoft SYstem CLR Types for SQL Server 2014」と書かれているので、

問題なさそうだ

 

 

あとは、このランタイムを入れて、ReportViewerランタイムを入れれば動作するはず。

 

あれ?登録できない〜VS2015

  • 2016.02.29 Monday
  • 18:59

自作プログラムを作って、他のパソコンに入れたのだが、
何度やってもタスクバーに登録できない。

何でだろうとグーグル先生に聞いたところ、
次の記事が見つかった。

Windows 7 でタスクバーにピンで留めれないプログラムの名前
Application that won’t Pin to Taskbar in Windows 7

なるほど、制限されている文字があるのか。
プログラム名を変えるか、タスクに止めるのを諦めるかである。


ちなみに、Win8以降のOSは登録できるようになっているので、
Win7とか以前の制限のようだ。
 

新規行に入力すると2行追加される?〜DataTableとAllowUserToAddRows

  • 2016.02.29 Monday
  • 12:51

しばらくぶりのDataGridViewな話題

これまでDataGridViewのプロパティにある、AllowUserToAddRowsをFalseにしていることが多かったので、
これまで気にもしなかったのですが、
(追加は別入力画面で入力→登録ボタンでDataTableにNewRowして追加)

たまたま作っているプログラムで新規追加をAllowUserToAddRowを利用してみることにしたのだが、

DataTableにNewRowしてAddすると・・・
 
newRow = dtTable.NewRow '新規行を作成
newRow(0I) = CObj("bbb"'データ書き込み
Call dtTable.Rows.Add(newRow) 'データテーブルに行を追加
 
DataGridView DataTable AllowUserToAddRows 2行追加されてしまう DataGridView DataTable AllowUserToAddRows 2行追加されてしまう

!?
追加した行に加えて謎の行出現

何となく、AllowUserToAddRowであらかじめ追加されている行とDataTableの行が一致していないために
追加と同時にDataTableでAddした行+AllowUserToAddRowの空欄行が追加されてしまうのではないかと想像される。

解決方法がないかと検索してみたところ、次の記事が見つかった。

DataGridView(バインド)の追加行のCell値をPGから設定した時、DataGridViewに行を追加する方法

これを参考にゴリゴリ書き直してみる
 
If e.RowIndex = Me.NewRowIndex Then '新規行に追加しようとしている
    Dim cmTable As CurrencyManager = BindingContext(dtTable) 'CurrencyManagerを取得
    Call cmTable.EndCurrentEdit() '編集を終了
End If
‌ 
DataGridView(0I, e.RowIndex).Value = "bbb" 'データを追加

これで、謎の行が追加されなくなりました。

関連投稿
DataGridViewのボタンにアイコンを付ける
DataGridView と DataTable と Combobox(コンボボックス)
DataViewのデータ(抽出結果)からDataTableの位置を検索
DataSource(DataTable)を検索する
DataGridViewの固定とエラー
DataGridViewの選択レコードからDataTableのレコードを見つける
DataGridViewが右揃えにならない?〜VB2008
DataViewの検索フィルタ〜VB2008
Comboboxは何を入れるのか?DataGridView編〜VB2008
 

calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< December 2019 >>

search this site.

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

categories

■Google AD■

アマゾン

楽天

selected entries

archives

recent comment

  • Macで作った大きなファイルをWindowsへ分割して転送する
    rockecco (11/18)
  • Macで作った大きなファイルをWindowsへ分割して転送する
    汐里 (11/17)
  • H3 SRB-3燃焼試験
    rockecco (08/30)
  • H3 SRB-3燃焼試験
    綿棒 (08/29)
  • ブレークポイントは現在の設定ではヒットしません〜ソリューションのデバッグ
    B.T (08/09)
  • 山の白い看板
    rockecco (06/06)
  • 山の白い看板
    田舎人 (05/08)
  • あの、クラスとかメソッドとかプルダウンできるバーって〜Visual Studio 2015
    rockecco (04/27)
  • あの、クラスとかメソッドとかプルダウンできるバーって〜Visual Studio 2015
    NS (04/27)
  • MacでBlu-ray編 〜 BD-Rを焼く その3 サポセン編
    rockecco (04/23)

recent trackback

profile


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

others

mobile

qrcode

powered

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