スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

Visual StudioでJavaScript(初心者用)(3)

「エラー一覧」の表示にエラー表示がないコードが書きあがったら、忘れずに「保存」をし、その後F5キー等で動作確認(デバッグ)。

以下、最低これだけは知っておきたい機能。

・ブレークポイント
実行中コードを一旦停止させたいポイントの設定。止めたいコードを選択してF9キーか、コード左端の壁をマウスクリックで赤丸が表示される。この状態でデバッグを実行すると設定したポイントでプログラム実行が停止する。
vs015.png


・ステップイン(F11キー)とステップオーバー(F10キー)
ステップインもステップオーバーも1行単位の実行。違いは関数呼び出しの処理方法で関数が含まれた場合、ステップインは関数の中に入り、ステップオーバーは中に入らないといった違いがある。
vs016.png


・ウォッチ式の追加
中断モード時(ブレークポイントを設定してプログラムが停止している状態)で変数を選択し、右クリックで「ウォッチ式の追加」を選択すると"ウォッチ"ウインドに変数が表示され、その情報を覗くことができる。
単に値だけ知りたい場合は変数にマウスを載せると小さいウインドが表示されて値が確認できる。
vs017.jpg

vs018.jpg



他にも知っておいた方が便利な機能があると思うが、これだけ押さえておけばとりあえずデバッグ作業はできると思います。ちなみにデバッグの終了は デバッグ>デバッグの停止(Shift+F5)で止まる。


●その他

・「エラー一覧」にエラーがないのに、デバッグが失敗する!
jsファイルとhtmlファイルを分けている場合、htmlファイルを表示してデバッグを始めないと失敗する。
毎回htmlファイルを選択するのが面倒くさい場合はソリューションエクスプローラー内のhtmlファイルを選択し、右クリックして「スタートページに設定」を選択すれば良い。
vs019.png

vs020.png

vs021.png
スポンサーサイト
[ 2014/04/20 22:29 ] その他 | TB(0) | CM(0)

Visual StudioでJavaScript(初心者用)(2)

●なぜVisual StudioをJavaScriptのIDEに?

EclipseとかAptanaとかでもJavaScriptの開発は可能ですが、私がVisual Studioを選んだ理由は以下の点から選びました。
・Visual Studioはインストールが簡単
・Visual Studioに関する情報が豊富にある
・TypeScriptにも対応している

ちなみに「TypeScript」とは、いわゆる「AltJS」(javascriptの代替)のひとつだが、他の置き換え系と違うのは"JavaScriptの上位拡張仕様"な点が異なる。また、JavaScriptが弱いとされる「クラス」や「モジュール」などの言語仕様が次期JavaScriptのECMAScript 6(ES6)には盛り込まれる予定らしいが、TypeScriptは次世代仕様を先取りする形で実現している点もポイント。

話は逸れたが、Visual Studioは総合的なWeb開発環境として評価されつつある点も選んだポイントでした。


●Visual Studioのインストール

Visual Studioにはいくつか種類があるが、ちょっとしたJavaScriptの開発環境目的であれば無償版の「Visual Studio Express 2013 for Web」で良いと思う(要Microsoftアカウント)。
ただ通常版だとTypeScriptには対応していないので、対応させるには「Visual Studio 2013 Update 2」をダウンロードする必要がある(通常版のインストール後にUpdate2を上書きインストールしても問題ない)。もしダウンロードに躓く場合はこちらの記事も参照して下さい。


●Visual Studio初歩の初歩

無事インストールが完了し、起動したらまずは 表示>ツールバー で「標準」にチェックを入れる。(ここが表示されていないと最初に躓く可能性アリ)
vs001.png

vs002.png


次にサンプルページの作成をしつつ、デバッガの設定も行う。

1.ファイル>新しいWebサイト>ASP.NET空のWebサイト を選択して「OK」を押す。
(このとき、ソリューションエクスプローラーが表示されていない場合は 表示>ソリューションエクスプローラー で表示させる。)
vs003.png

vs004.png


2.ファイル>新しいファイル>HTMLページ を選択して「追加」を押す。するとHTMLファイルが追加されたことが"ソリューションエクスプローラー"で確認できる。
vs005.png

vs006.png

vs007.png


3."標準"ツールバー内にある"使用ブラウザー"を「Internet Explorer」にする。
(IEにしないとデバッガが正常に起動しないため)
vs008.png


4. タグの間に適当な文言を入力し、「保存」する。
vs009.png


5.デバッグ>デバッグ開始、或はF5キーを押してデバッグを行う。
IEが立ち上がって4.の適当な文言が表示されればデバッグは正常に起動している。
vs010.png


●エラーチェック

非常に重要で且つ、嬉しい機能が「エラー一覧」の表示機能。
この機能は常に表示しておきたい。
これは 表示>エラー一覧 で表示が可能。
vs011.png


で、最初のサンプルの間違いのあるコードをここに書いて試してみる。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <p id="id1">hogehoge</p>
  <p id="id2">ほげほげ</p>
  <script type="text/javascript">
    var x = 1;
    var y = 1;
    document.getElementById("id1").innerHTML = "Hello World";
    document.getElementById("id2").innerHTML = "こんにちは世界";
    if (x == 1) && (y == 1){
      document.getElementById("id1").innerHTML = "Hello World 2!";
    }
  </script>
</body>
</html>



するとなにやら「警告」が表示された。
vs012.png


が、よく見ると様子がおかしい。エラー一覧の部分をダブルクリックすると丁寧にもどの箇所がエラーか確認できるのだが、その箇所は間違いではないハズだが??
vs013.png


「なんだこの機能?まったく当てにならないじゃん!使えねー!!(激おこ)」
と無視をするとハマります。

実はこのエラー一覧の表示、その周辺にエラーがあるとみて間違いないのです。(重要)
結論からいうと、この例では追加コードのifの部分にカッコが足りていない。
で、ちゃんと正しく修正すると・・・ちゃんとエラー警告表示も消えます!
vs014.png


だからこの表示が出たらその周辺をよーく見るようにするとハマらずにすんで、すごく助かります。

3へ続く
[ 2014/04/20 22:23 ] その他 | TB(0) | CM(0)

Visual StudioでJavaScript(初心者用)(1)

最初はテキストエディタで書いてchromeのデベロッパーツールで確認していましたが、長めのコードを書くとキツくなってきたのでIDE(統合開発環境)を探し、Visual StudioでJavaScriptを書いたときの入門的な備忘録。


●なぜIDE(統合開発環境)が必要か?

例えば以下のようなコードがあった場合、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <p id="id1">hogehoge</p>
  <p id="id2">ほげほげ</p>
  <script type="text/javascript">
    var x = 1;
    var y = 1;
    document.getElementById("id1").innerHTML = "Hello World";
    document.getElementById("id2").innerHTML = "こんにちは世界";
  </script>
</body>
</html>


画面の表示はこうなる。
hello1.gif


ところがこのコードに以下のコードを追加すると・・・
hello1_2.gif


画面の表示はこうなる。
hello2.gif


ここで注目は「hogehoge」や「ほげほげ」が「Hello World」や「こんにちは世界」に置き換わっていない点。少なくともここの部分はいじっていないし、問題はなかったハズである。

このことから分かることは以下の点である。

1.追加したコードにはエラーがある
2.エラーなコードを追加すると、script部分すべてが台無しになっている

特に2.は重要で、言い方を変えると
 例えエラー箇所が一か所でも、他の正しいすべてのコードがダメになる
とも言えるだろう。

これがキツい。

そこで、
 どこにエラーがあるのか瞬時に自動判別して表示される機能が欲しい
という当然の要望が出てくる。
この要望はIDEを導入することで解決される。

2へ続く
[ 2014/04/20 21:57 ] その他 | TB(0) | CM(0)

テトリスを作ってみた

最近「プログラムはこうして作られる」という本を読んだ。

この本はテトリスを作り上げることで、プログラムを作り上げる方法を学ぶといったことが趣旨の本なのだが、面白いのは「自分で一から作り上げる方法を学ぶ」ことに重点をおいている点。

そのこだわりは既存のプログラム言語を使わず、独自の言語「Sunaba」を作って使用していることにも現れている。

他、わざわざ失敗例を挙げて、なぜ失敗したか、どうすれば直せるか、といった考え方も載せているのも良い。


この本にすっかり触発されて、私もSunabaで作ってみたり、改変したり、それをエクセルVBAに移植したり、さらにJavaScriptに移植してみたりしてみました。


で、せっかく作ったのでブログにも公開してみようと思った次第。

ちなみにFC2ブログのアップロード制限の都合上、zip形式の拡張子を「.rdf」に無理やり変換してリンクを貼っています。
もしダウンロードされる場合はダウンロード後、拡張子を「.rdf」から「.zip」に変換して下さい。


web上であのゲームを遊ぶ(JavaScript版)

↑Enter:リトライ、Esc・Del・BackSpase:終了
(IE11とFireFoxとChromeしかテストしていません。IEのバージョンによっては動かないかも知れません・・・)


Sunaba版
dl001.png


JavaScrip版
(Enter:リトライ、Esc・Del・BackSpase:終了)
dl002.png


エクセルVBA版
dl003.png
[ 2014/04/13 10:16 ] その他 | TB(0) | CM(0)
プロフィール

いけぢー

Author:いけぢー
備忘録がメインです。
あとは思いついた内容など。

カレンダー
03 | 2014/04 | 05
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -
アクセスカウンター
押さないでください


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。