Visual StudioユーザーのためのTypeScript入門（1）
TypeScriptとは？ Visual Studioを使って開発してみよう
1.0正式版がリリース。TypeScriptは、Visual Studio上でも開発できる。C#などでコードを書いているVisual Studioユーザー向けに、その利用手順や特徴を解説。
TypeScriptとは
TypeScriptとは、マイクロソフトが中心となって開発を進めているスクリプト言語で、コンパイル結果がJavaScriptコードになる、いわゆる「AltJS」と呼ばれる種類の言語である。AltJSにはTypeScript以外にもメジャーなものとして、CoffeeScript、Dart、Haxe、JSXなどがあり、TypeScriptはその仲間ということになる。
日本時間の2014年4月3日、開発者向けイベント「Build 2014」で、バージョン1.0がリリースされた。「ついに1.0に到達した」といった感じだが、TypeScriptは1.0以前のバージョンから言語そのものは比較的安定していたこともあり、マイクロソフトやその他多くの開発者などさまざまなところですでに採用している例も多い。
TypeScriptの言語的な特徴などについては、わかめ まさひろ（vvakame）氏のスライドが詳しいので、そちらを参考にしてほしい。
言語仕様以外での特徴的な点としては以下のようなものがある。
- マイクロソフト自身が大規模なJavaScript開発のために開発
- マイクロソフトからVisual Studioの拡張が提供されている
- Node.jsなどで動作し、オープンソース（Apache License）で提供されている
- 「DefinitelyTyped」というコミュニティベースのライブラリの型定義リポジトリがある
- Visual Studio以外のエディターのプラグインなどもコミュニティベースで開発されている
TypeScriptで若干興味深いのは、マイクロソフトが主導となって開発しているため、Visual Studioを利用した開発者、つまりASP.NETなどMicrosoftプラットフォームでアプリケーション開発をしている開発者に対して手厚い環境であるのは当然として、Node.jsでのパッケージ提供やオープンソースであることからコミュニティベースでの広がりも大きいところである。
しかしマイクロソフトが提供しているものにしては珍しく、（Visual Studioユーザーと比較して）Web開発者層に多く支持されているように見える。例えばMac OS上でSublime TextやVim、WebStormなどの（Web開発者に人気の）開発環境を使って、TypeScript開発をしている開発者が非常に多いのだ。
そこで今回の記事では、そういった環境を使っておらず、普段、C#などを書いているVisual StudioユーザーがTypeScriptを利用するための手順や特徴を解説していく。
Visual StudioでTypeScriptを使えるようにする
TypeScriptをVisual Studioで扱うためには、利用しているVisual Studioのバージョンが2013であれば「Visual Studio 2013 Update 2（2014年4月3日時点ではRC）」を、Visual Studio 2012であれば「Visual StudioのTypeScript拡張」をインストールする必要がある。
TypeScriptでの開発はVisual Studio 2012または2013以降どちらでもできるが、本稿ではVisual Studio 2013でのインストール手順と利用方法を説明する。Visual Studio 2012であってもインストール後の手順のほとんどは同様となるので適宜読み替えていただければと思う。
Visual StudioのエディションはProfessional以上の場合には特に問わないが、無償のExpressであればWebアプリケーション開発となるため、「Visual Studio Express 2013 for Web」を用意していただきたい。本稿の説明でも、このExpressを利用している（※そのため、ほかのエディションを使っている場合は、メニュー構成などが一部異なっている場合があるので、適宜、環境に合わせて読み替えてほしい）。
TypeScriptを利用するためのVisual Studio 2013 Update 2のダウンロード
それではまず初めに、Visual StudioにUpdate 2をインストールする。インストーラーは、
からMicrosoftダウンロードセンターへのリンクが用意されているので、そちらからアクセスしてダウンロードできる。
Visual Studio 2013 Update 2のインストール
ダウンロードしたらインストールを実行する。特にインストールオプションなどもないため、ウィザード（次の画面を参照）に従って進めるだけでインストールは完了する。
［ライセンス条項およびプライバシー ポリシーに同意します。］にチェックを入れないと［インストール］ボタンが表示されないので注意。
TypeScriptプロジェクトを作ってみる
Visual Studio 2013 Update 2のインストールが完了したら、さっそくVisual StudioでTypeScriptコードを書いてみる。
いったん、何も考えずにVisual Studioのテンプレートからプロジェクトを作ってみよう。
TypeScriptプロジェクトの新規作成
まず、Visual Studioの（メニューバーの）［ファイル］メニューから［新しいプロジェクト］を選択する（次の画面）。
これにより［新しいプロジェクト］ダイアログが開くので（次の画面）、左ペインの［テンプレート］から「TypeScript」を選択する。すると、中央のプロジェクトテンプレート一覧に「TypeScript を使用した HTML アプリケーション」という項目が表示されるので選択して、最後に［OK］ボタンをクリックする。
これにより、プロジェクトテンプレートをベースにしたプロジェクトが作成され、自動的にサンプルコードの入ったTypeScriptのファイルが開かれる。［ソリューション エクスプローラー］を見ると、他にHTMLファイルとCSSファイルが追加されていることが分かる（次の画面）。
初期状態で生成されるサンプルコードは、現在の時刻をタイマーで更新しつつ表示するだけの簡単な内容である。
TypeScript HTMLアプリの実行
それではひとまず実行してみよう。実行するには、普通のアプリケーション開発と同様にF5キーまたは［デバッグ］メニューから［デバッグ開始］を選択する。次の画面は実際に実行した例である。
デバッグ実行を開始するとブラウザーが開かれ、現在の時刻が刻一刻と表示されるだけのシンプルなページが表示される。
デバッガーを利用してみる
さて、せっかくVisual Studioを利用しているので、Visual Studioの強力な機能を利用してみたい。
Visual Studioの強力な機能といえば、やはり「デバッガー」ではないだろうか。これから新しい言語を触ってみるという場合には、デバッガーで挙動を確認しながら触れられるかどうかは大きいポイントだと思われる。
冒頭で説明したように、TypeScriptはJavaScriptへコードを変換して利用する言語であるが、TypeScript拡張／Visual Studio 2013 Update 2をインストールすることでTypeScriptコードのまま、さもTypeScriptコードをブラウザーが実行しているかのように、Visual Studioでデバッグできる。というわけで、TypeScriptコードをVisual Studioのデバッガーでデバッグしてみたいと思う。
ブラウザーの選択
なおデバッグ実行でデバッガーを利用する際には、ブラウザーは「Internet Explorer」を選択しておく必要がある。もし「Google Chrome」などが選択されている場合は、［標準］ツールバーから「Internet Explorer」に変更できる（次の画面）。
デバッガーの利用
それではデバッガーを使ってみよう。まずは実行に先立ってブレークポイントを設定する。
ブレークポイントの設定
今回はコンストラクターの先頭に設定してみた（次の画面）。ブレークポイントは、通常通りコードの横をクリックするか、F9キーを押すことで設定できる。
ブレークポイントを設定したら再びデバッグ実行する。
ブレークポイントでの実行停止
デバッグ実行を開始するとブラウザーが表示され、その後、ブレークポイントで一時停止するはずだ（次の画面はその例）。
各種デバッグ処理
停止した後はF10キーのステップオーバー、F11キーのステップインなどでステップ実行が行える。
デバッグ実行中は［ローカル］変数のウィンドウや［呼び出し履歴］ウィンドウ（以下の画面）などのデバッグ機能を利用できるので、変数やスタックトレースについても確認しやすい。TypeScriptであれば、次の画面を見ると分かるように、型の名前なども表示される。
もちろん変数名にマウスカーソルをホバーすることで、変数の値を確認・変更できるおなじみの機能も利用できる。
このように、Visual StudioでのTypeScriptコードのデバッグ機能は、C#などでの場合と遜色のないレベルで使いなれたものを利用できる。「C#コードは書いたことがあるけれども、TypeScriptコードは初めて」という人であっても、TypeScriptの挙動を確認しつつ学びやすいのではないだろうか。
デバッガーを利用するために新しい操作を覚える必要がなく、ASP.NETアプリケーションなどにTypeScriptを採用した場合にデバッグ操作がシームレスに扱えるようになることもVisual Studioでデバッグできることの強みといえる。
コード編集からVisual Studioでの機能を見る
先にデバッグ方法を紹介してしまったが、次はコードを実際に書いてみたい。
とはいえ今回は「Visual Studioの機能の紹介」を主題としているので、コードの一部を簡単に修正してみる程度にする。
ひな型サンプルコードの実装内容
プロジェクト作成により生成されたサンプルプロジェクトを簡単に説明すると、app.tsファイルには「Greeter」というタイマーを保持して時間表示を更新するクラスがあり、（HTML DOMの）window.onloadイベントでGreeterクラスのインスタンスを生成し、時間の表示処理を開始する処理がある。
そしてこのapp.tsファイルをコンパイルした結果のapp.jsファイルを、index.htmlファイル内で読み込んで実行している。
Greeterクラスの時間表示開始のstartメソッドは、以下のようなコードになっている。このコードでは<span>要素のinnerHTMLプロパティに時刻を文字列化したものをセットする、処理を500ms（ミリ秒）ごとに実行するタイマーを作成している。
|
start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}
|
特に意味があるわけではないが、この値をセットする処理を別なメソッドに切り出す例で解説したい。
IntelliSense（コード補完機能）
まずタイマーの中で行っていた処理を、以下のコードをstopメソッドの下に追加する。
|
setDate(value: Date) {
this.span.innerHTML = value.toUTCString();
}
|
コードを追加したら、startメソッドのタイマーで呼び出されている部分を以下のように書き換える。
|
this.span.innerHTML = new Date().toUTCString()
↓
this.setDate(new Date())
|
このとき、手でコードを変更していると、Visual StudioのIntelliSense（＝コード補完機能）が発動するのを確認できる。次の画面を見ると分かるように、C#などと同様に「.（ドット）」を入力した段階でプロパティやメソッドなどのメンバーの一覧が表示され、選択されているメンバーのシグネチャも表示される。メンバーを選択することで確定できる。
自作コードに対するメンバーシグネチャの表示方法について
ソースコードにJSDoc形式（＝JavaDocのような形式）でコメントを残しておくと、コード補完時に表示できるので実際にコードを書く際には積極的にコメントを残すようにしたい。
JSDocはJavaScriptの世界では比較的一般的な記述方法のため、Visual Studio以外のIDEである「WebStorm」や「IntelliJ IDEA」などでも扱え、JavaScript向けのドキュメンテーションツールなどもいくつかある。C#と同じXMLDoc形式（＝「///」で始まるコメント）でも書けるが、Visual Studioを離れたときの親和性を考えるとお勧めしない。
以下のスクリーンショットは、setDateメソッドに対してJSDoc形式でコメントを記述し、それがパラメーターヒントして実際に表示されている例だ。
上のようにコードを変更したらデバッグ実行をしてみよう。もちろん処理が変わっていないので、表示自体には特に変わり映えはない。
ちなみに冒頭でも触れた通り、TypeScriptはJavaScriptコードにコンパイルされる言語であるが、Visual Studioを使っている限り、開発者がコンパイルを意識せずともファイルを保存すれば自動でJavaScriptコードにコンパイルされる。
コーディング時のエラー表示
TypeScriptは静的型付けのコンパイル型言語であるため、異なる型の呼び出しなどコンパイル時に明らかなエラーをチェックできる。その特徴を生かし、Visual Studioではコードをコンパイルするよりも前に逐次エラーチェックを行っている。
例えば、先ほど追加したsetDateメソッドはDate型を受け付けるシグネチャを持つが、そこに文字列を渡すようなコードを記述すると、保存やコンパイルを待たずして即座にエラーが報告される。以下のスクリーンショットはその例。
パラメーターの型が合わないことがツールチップや［エラー一覧］ウィンドウに表示されていることが分かる。また、コードエディター上のエラー箇所にも赤い波線が引かれるので、コンパイルに失敗するような明らかな間違いをすぐに発見し修正できるのが、Visual Studio利用の良いところだ。
まとめ
今回はVisual StudioにVisual Studio 2013 Update 2 をインストールし、テンプレートからプロジェクトを作成するところから、デバッガー、コード編集での機能について紹介した。
すでにC#などでVisual Studioを利用している方々であれば、「デバッグやコード編集での基本的な操作がほぼ共通していて、言語以外に新しいことがないぐらいだ」と思われたのではないだろうか。
冒頭でも触れた通り、マイクロソフトが開発している言語であり、Visual Studioでの開発については手厚くサポートされている。Visual Studioをすでに利用している人にとってはなじみがあり、そうでない人にもオールインワンで提供され、TypeScriptに触れるのにお勧めしたい環境だ。
次回はライブラリの利用や高度な機能などに触れていきたい。
1. 【現在、表示中】≫ TypeScriptとは？ Visual Studioを使って開発してみよう
1.0正式版がリリース。TypeScriptは、Visual Studio上でも開発できる。C#などでコードを書いているVisual Studioユーザー向けに、その利用手順や特徴を解説。
2. Visual StudioとTypeScriptでJavaScriptライブラリを活用する
TypeScriptでは大半のJavaScriptライブラリをすぐにそのまま活用できる。Visual Studioで手軽に使う方法や、独自のJavaScriptライブラリを使えるようにする方法を説明する。
