Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

TypeScriptのデバッグ ―― ブレイクポイント/ステップ実行

 デバッグ時には、ブレイクポイントを設定することもできます。コードエディター左のラインをクリックするか、該当する行で[F9]ボタンをクリックしてください。

図9 TypeScriptのコードにブレイクポイントを設置
TypeScriptのコードにブレイクポイントを設置

 この状態でアプリを実行すると、確かにブレイクポイントで動作が止まっていることが確認できます。TypeScript側で設定したブレイクポイントが、JavaScriptコードの実行に反応できるのも、先ほど自動生成されたソースマップのおかげです。

図10 ブレイクポイントでアプリが停止した状態
ブレイクポイントでアプリが停止した状態

 もちろん、(ステップイン)、(ステップオーバー)、(ステップアウト)でステップ実行することもできますし、その際に[ローカル]ウィンドウで現在の変数の状態を確認することもできます。TypeScriptでは型を厳密に認識できますので、[ローカル]ウィンドウでも型を含んだ情報を確認できる点に注目です。

 C#/Visual Basicの開発に慣れた方ならば(というよりも、類似の統合開発環境を利用したことがある方ならば)、これまでの知識の範囲で操作できることがお分かりになると思います。

ASP.NETアプリケーションの場合

 ASP.NET MVCなどでTypeScript(JavaScript)開発を行っている場合、バンドル&ミニフィケーション機能(注6)を無効にしておく必要があります。さもないと、以下のようなエラーが出て、ブレイクポイントが有効になりませんので、注意してください。
 

図11 ブレイクポイントが有効にならない
ブレイクポイントが有効にならない

 バンドル&ミニフィケーション機能を無効にするには、App_Start/BundleConfig.csを以下のように編集してください。

リスト4 バンドル&ミニフィケーション機能を無効にする(BundleConfig.cs)
public static void RegisterBundles(BundleCollection bundles)
{
  ……中略……
  BundleTable.EnableOptimizations = false;
}

 複数のJavaScriptのコードを束ね(bundle)、コメント/改行などを取り除いて圧縮(minify)する機能のことです。

型定義ファイルでJavaScriptライブラリを利用する

 TypeScriptでは、既存のJavaScriptライブラリとの相互運用性についても考慮されています。JavaScriptライブラリではTypeScriptのように型情報を持ちませんので、型情報だけを別に提供することで両者の橋渡しとするわけです。このような役割を持ったファイルのことを型定義ファイルといい、.d.tsファイルとして提供されます。

 「DefinitelyTyped」というサイトで、jQuery、AngularJSをはじめ、現在主流と言われるJavaScriptライブラリの型定義ファイルが提供されていますので、興味のある方は、どのようなものがあるのか、眺めてみると良いでしょう。

図12 DefinitelyTyped
DefinitelyTyped

 型定義ファイルを組み込むことで、TypeScriptからJavaScriptライブラリを利用できるようになるだけでなく、タイプ時にコード補完/ツールヒントが有効になるというメリットもあります。

図13 TypeScriptからjQueryを呼び出した例
TypeScriptからjQueryを呼び出した例

 型定義ファイルをプロジェクトに組み込むのはカンタン、[パッケージマネージャーコンソール]ダイアログから以下のコマンドを実行します。例えば以下はjQuery本体と、その型定義ファイルをインストールする例です。

リスト5 jQuery本体と型定義ファイルのインストール例
PM> Install-Package jQuery	(jQuery)
PM> Install-Package jQuery.TypeScript.DefinitelyTyped	(jQuery型定義ファイル)

 すでに元となるライブラリ(ここではjQuery)がインストールされている場合には、ソリューションエクスプローラーから「jquery-x.x.x.js」を右クリックし、表示されたコンテキストメニューから[TypeScript型指定の検索...]を選択しても構いません。

図14 [<プロジェクト名> - NuGetパッケージの管理]ダイアログ
[<プロジェクト名> - NuGetパッケージの管理]ダイアログ

 [<プロジェクト名> - NuGetパッケージの管理]ダイアログが表示されますので、「jQuery.TypeScript.DefinitelyTyped」から[インストール]ボタンを選択します。

 インストールされた型定義ファイルは、/Scripts/typings/jqueryフォルダーの配下に配置されますので、これをコードエディター上で開いた.tsファイルにドラッグ&ドロップしてください。

図15 型定義ファイルをコードエディターにドラッグ&ドロップ
型定義ファイルをコードエディターにドラッグ&ドロップ

 先頭に「/// <reference path="scripts/typings/jquery/jquery.d.ts" />」が追加されれば、正しく型定義ファイルを紐付けできています。あとは、先ほどの図13のように、jQueryのメソッドに対してメソッド候補、ツールヒントが表示されるようになります。

 なお、<reference>要素による型定義ファイルの紐付けは、あくまで型情報の紐付けにすぎません。.htmlファイルからjQueryを利用するには、本来のjquery-x.x.x.jsをインポートしなければならない点に注意してください。

補足:TypeScript Playground

 TypeScriptを勉強するならば、本家サイトで提供されている「TypeScript Playground」を利用するのも手です。

 TypeScript Playgroundは、ブラウザー上で動作する簡易インタプリターで、左枠にTypeScriptのコードを入力すると、右枠にリアルタイムでコンパイル済みのJavaScriptコードが表示されます。入力したコードは、右肩の[Run]ボタンをクリックすることで、その場で実行することも可能です。

 JavaScriptに慣れている人であれば、TypeScript/JavaScript双方の対応関係を確認しながら学習を進められるので、理解も深まりやすいでしょう。左上の選択ボックスからは典型的なコード例を選択/参照することもできます。

まとめ

 TypeScriptのようなaltJSの存在は、今後ますます複雑になっていくクライアントサイド開発の分野では欠かせないものになっていくはずです。いつまでも「なじみにくい」JavaScriptに拘泥されている必要はありません。本来の生産性に関係ないJavaScriptの難しさはaltJSの甘い皮で包んでもらって、私たち開発者はより付加価値の高い関心事に重心を傾けるべきです。

 冒頭述べたように、altJSの世界はまだまだ群雄割拠、必ずしもデファクトスタンダードが確立した世界ではありませんが、皆さん自身の目でどれが学ぶに値する技術であるかを見極めてみてください。本稿が、その一助となれば幸いです。

関連書籍・サイト



  • ブックマーク
  • 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