Microsoft発のaltJS「TypeScript」＋Visual Studioで楽々クライアントサイド開発
さらに使いやすく便利になった「Visual Studio」を始めよう！ 第3回
TypeScriptのデバッグ ―― ブレイクポイント／ステップ実行
デバッグ時には、ブレイクポイントを設定することもできます。コードエディター左のラインをクリックするか、該当する行で［F9］ボタンをクリックしてください。
この状態でアプリを実行すると、確かにブレイクポイントで動作が止まっていることが確認できます。TypeScript側で設定したブレイクポイントが、JavaScriptコードの実行に反応できるのも、先ほど自動生成されたソースマップのおかげです。
もちろん、
（ステップイン）、
（ステップオーバー）、
（ステップアウト）でステップ実行することもできますし、その際に［ローカル］ウィンドウで現在の変数の状態を確認することもできます。TypeScriptでは型を厳密に認識できますので、［ローカル］ウィンドウでも型を含んだ情報を確認できる点に注目です。
C#／Visual Basicの開発に慣れた方ならば（というよりも、類似の統合開発環境を利用したことがある方ならば）、これまでの知識の範囲で操作できることがお分かりになると思います。
ASP.NET MVCなどでTypeScript（JavaScript）開発を行っている場合、バンドル＆ミニフィケーション機能（注6）を無効にしておく必要があります。さもないと、以下のようなエラーが出て、ブレイクポイントが有効になりませんので、注意してください。
バンドル＆ミニフィケーション機能を無効にするには、App_Start/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ライブラリの型定義ファイルが提供されていますので、興味のある方は、どのようなものがあるのか、眺めてみると良いでしょう。
型定義ファイルを組み込むことで、TypeScriptからJavaScriptライブラリを利用できるようになるだけでなく、タイプ時にコード補完／ツールヒントが有効になるというメリットもあります。
型定義ファイルをプロジェクトに組み込むのはカンタン、［パッケージマネージャーコンソール］ダイアログから以下のコマンドを実行します。例えば以下はjQuery本体と、その型定義ファイルをインストールする例です。
PM> Install-Package jQuery （jQuery） PM> Install-Package jQuery.TypeScript.DefinitelyTyped （jQuery型定義ファイル）
すでに元となるライブラリ（ここではjQuery）がインストールされている場合には、ソリューションエクスプローラーから「jquery-x.x.x.js」を右クリックし、表示されたコンテキストメニューから［TypeScript型指定の検索...］を選択しても構いません。
［＜プロジェクト名＞ - NuGetパッケージの管理］ダイアログが表示されますので、「jQuery.TypeScript.DefinitelyTyped」から［インストール］ボタンを選択します。
インストールされた型定義ファイルは、/Scripts/typings/jqueryフォルダーの配下に配置されますので、これをコードエディター上で開いた.tsファイルにドラッグ＆ドロップしてください。
先頭に「/// <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の世界はまだまだ群雄割拠、必ずしもデファクトスタンダードが確立した世界ではありませんが、皆さん自身の目でどれが学ぶに値する技術であるかを見極めてみてください。本稿が、その一助となれば幸いです。
関連書籍・サイト
- 『TypeScript実践プログラミング』（翔泳社）
- 『TypeScriptリファレンス』（インプレスジャパン）
- 『JavaScriptプログラマのための 実践的TypeScript入門』（KADOKAWA/アスキー・メディアワークス）
- 『TypeScriptネットワークプログラミング』（カットシステム）
- 『大規模開発でも小規模開発でも使える TypeScript実践入門』（技術評論社）
- 『TypeScript入門 クラスと型チェック機能を加えたJavaScriptの拡張言語』（日経BP社）
- マイクロソフト 井上章 のブログ（TypeScriptエバンジェリスト）
この記事は参考になりましたか？
既に会員の方はを行ってください。
- さらに使いやすく便利になった「Visual Studio」を始めよう！連載記事一覧
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト（ウイングスプロジェクト）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
