Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Microsoft発のaltJS「TypeScript」+Visual Studioで楽々クライアントサイド開発

さらに使いやすく便利になった「Visual Studio」を始めよう! 第3回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/01/30 14:00

目次

Visual Studioを使ったTypeScript開発

 TypeScriptによるコーディングの基本が理解できたところで、Visual Studioを使った開発の手順を見ていくことにしましょう。Visual StudioはMSDNサブスクリプションを持っていれば、プランに応じて最新のバージョンを利用できますし、さもなければ、無償のCommunity版をダウンロードしても構いません。Community版は2014年11月に公開されたばかりの新たなエディションで、Professional版に相当する機能を無償(注4)で利用できます。

 具体的な手順を追っていく中で、Visual StudioのTypeScript対応機能を確認してみてください。

 ライセンスの詳細は、上記のページから確認してください。

TypeScript開発のためのプロジェクトテンプレート

 TypeScriptを利用した開発を行うために、Visual Studioでは専用のプロジェクトテンプレートを用意しています。[新しいプロジェクト]ダイアログで[TypeScript]-[TypeScriptを利用したHTMLアプリケーション]を選択してください。

図2 [新しいプロジェクト]ダイアログ
[新しいプロジェクト]ダイアログ

 これによって、TypeScriptの簡単なサンプルと、これを起動するためのテストページを含んだシンプルなプロジェクトが作成されます。純粋にTypeScriptを利用するならば、まずはこちらのプロジェクトを利用するのが素直です。

図3 [TypeScriptを利用したHTMLアプリケーション]の初期状態
[TypeScriptを利用したHTMLアプリケーション]の初期状態

 もちろん、ASP.NETを利用しているならば、従来の[Web]-[ASP.NET Webアプリケーション]をそのまま選択しても構いません。

TypeScriptファイルの作成 ―― 構文ハイライト/コード補完機能

 TypeScriptファイル(.tsファイル)を作成するには、ソリューションエクスプローラーから該当のフォルダーを右クリックし、表示されたコンテキストメニューから[追加]-[TypeScriptファイル]を選択するだけです。[項目の名前を指定]ダイアログが開きますので、例えば「myApp」のような名前を入力して[OK]ボタンをクリックします。

図4 [項目の名前を指定]ダイアログ
[項目の名前を指定]ダイアログ

 空のmyApp.tsがコードエディターから開きますので、例えば先ほどのリスト1を入力してみましょう。C#/Visual Basicなどを編集する場合と同じく、

  • 構文ハイライトが働いている点
  • 型に応じて適切なメンバー候補が表示されている点
  • 誤った型の値を指定した場合にはエラーが報告される点(赤波線が引かれる)

などにも注目してください。

図5 TypeScriptのコードをコードエディターで編集する
TypeScriptのコードをコードエディターで編集する

 ちなみに、自作のメソッド(関数)でもあらかじめJSDoc形式のドキュメンテーションコメントを残しておくことで、コード補完時にツールヒントを表示させることができます。例えば、以下はコンストラクターにドキュメンテーションコメントを追加したコードと、その時のコードエディターでの表示です。

リスト3 ドキュメンテーションコメントを追加したコード(myApp.ts)
/**
* コンストラクター
* @param name 動物の名前
* @param age 動物の年齢
*/
constructor(public name: string, public age: number) { }
図6 引数を入力する際に、その詳細情報がツールヒントとして表示される
引数を入力する際に、その詳細情報がツールヒントとして表示される

 タイプ時に引数の意味が分かりやすくなりますので、メソッド/関数などを定義する際には積極的にドキュメンテーションコメントを利用することをお勧めします。

TypeScriptの保存&実行 ―― 自動コンパイル

 コードを入力できたら、(myApp.tsの保存)ボタンでファイルを保存します。Visual Studioでは、このタイミングで自動的にコンパイルが実施され、myApp.jsとmyApp.js.mapが生成されます。myApp.jsがコンパイル済みのJavaScriptコード、myApp.js.mapがソースマップ(注5)です。

 ただし、これらのファイルはデフォルトではプロジェクトには組み込まれません。ソリューションエクスプローラーから(すべてのファイルを表示)ボタンを有効にするか、標準のエクスプローラーから確認してください。

 TypeScriptコードとコンパイル済みのJavaScriptコードをマッピングするための情報ファイルです。ソースマップを利用することで、デバッグ時にもエラー箇所などをJavaScriptコードではなく、元々のTypeScriptコードから確認できます。

 TypeScriptのコードを利用するには、該当のページ(.htmlファイル)からコンパイル済みの.jsファイルをインポートします(.tsファイルではありません!)。ここでは、もともとプロジェクトに用意されているindex.htmlに対してmyApp.jsを追加します。

 <script>要素は自分でタイプしても構いませんが、ソリューションエクスプローラーからコードエディターに.jsファイルをドラッグ&ドロップすることで、コードを自動生成することもできます。

図7 .jsファイルをコードエディターにドラッグ&ドロップ
.jsファイルをコードエディターにドラッグ&ドロップ

 サンプルを実行するには、ボタンをクリックします。ここではInternet Explorerを選択していますが、から使用するブラウザを選択することもできます。クライアントサイド開発では、クロスブラウザでの動作確認が欠かせませんので、このように統合開発環境からブラウザを簡単に切り替えられるのは嬉しいポイントです。

図8 デバッグ実行に利用するブラウザを選択する
デバッグ実行に利用するブラウザを選択する

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:さらに使いやすく便利になった「Visual Studio」を始めよう!
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5