TypeScript のビルド＆デバッグ環境構築とデバッグ方法

はじめに

前回の記事では、TypeScript の開発環境構築の方法をご紹介しましたが、この記事では Visual Studio Code を使用してビルドとデバッグを行う環境構築方法とデバッグの仕方をご紹介します。

なお、開発環境は Mac を想定しています。

サンプルアプリの作成

なお、プロジェクトのフォルダを、/Users/xxx/sample で開いて app.ts を作成します。

let message = "hello";
console.log(message);

 

ビルド環境の構築

ビルド環境を構築するには、まず tsconfig.json ファイルを作成する必要があります。

Visual Studio Code を起動して、メニューの [表示] > [統合ターミナル] から統合ターミナルウィンドウを Visual Studio Code 内に表示します。

 

統合ターミナルでプロジェクトのパスを確認した後、tsconfig.json ファイルを作成するコマンドを実行します。

$ pwd
/Users/xxx/sample
$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

 すると画面左のエクスプローラーに、tsconfig.json が表示されます。以下のような内容になります（コメントを除いた抜粋）。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

次に、Mac でなら  Shift + command + P を押して、表示されるコマンドパレットで「task」と入力します。そこで、「タスク：既定のビルドタスクを構成する」を選択します。その次に、「tsc:ビルド - tsconfig.json」 を選択すると、tasks.json が以下の内容で作成されます。これでビルドできるようになりました。

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

 

デバッグ環境の構築

さて、今度はデバッグ環境の構築をします。画面左のデバッグのアイコン（虫のアイコン）をクリックすると、 デバッグの三角マークの右側のドロップダウンリストに「構成がありません」と表示されているので、その下の「構成の追加」を選択します。

次に環境の選択と表示されますが、今回は「Node.js」を選択しましょう。そうすると一覧が表示されるので「Node.js : プログラムの起動」を選択すると launch.json が作成されます。 

launch.json には不要な部分があるので、それをカットして以下のようにしましょう。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/app.js"
        }
    ]
}

 

さらに、最後の一行に sourceMaps を追加しましょう。カンマの付け忘れに注意してください。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/app.js",
            "sourceMaps": true
        }
    ]
}

そして、tsconfig.json ファイルにも同じように SourceMap の設定を追加します(末尾に's'がないのに注意)。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true
  }
}

メニューの [タスク] > [ビルドタスクの実行] を実行し、app.js を作成しておきます。

これでデバッグ環境の作成が完了しました。

 

デバッグの方法

まずは、[F5] キーを押すか、メニューの [デバッグ] > [デバッグの開始] からプログラムをデバッグモードで実行してみましょう。以下のように表示されたら問題ありません。

Node.js v8.9.4 が検出されたため、インスペクター プロトコルでデバッグしています。
node --inspect-brk=38038 app.js
Debugger listening on ws://127.0.0.1:38038/491ed7cb-29c5-4728-bfc4-7cea6e8e3e85
Debugger attached.
hello

 さて、今度はブレークポイントを設定してみましょう。ブレークポイントを設定するのは、TypeScript のファイルの方になりますのでご注意ください。

ブレークポイントの付け方は、TypeScript ソースの行番号の左側をクリックして赤丸を表示させます。

こんな感じですね。

 

では、再度ビルドを実行後、[F5] キーを押してデバッグを実行してみましょう。

そうすると、ブレークポイントを設定した行で実行が止まっています。

また、画面左側の定数 message に “hello” が設定されているのが分かります。このままアイコンにしたがってステップ実行もできます。TypeScript のままデバッグができるというのがすばらしいですね。

 

おわりに

これで Visual Studio Code で TypeScript をデバッグする方法は分かったかと思います。

デバッグが TypeScript のままで行えるというのは、かなり生産性が上がると思いますので活用したいですね。