スポンサーサイト

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

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)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

いけぢー

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

カレンダー
10 | 2017/11 | 12
- - - 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。