vscodeのビルドタスクでさくさくTypeScript開発（初学者向け）

いちいちビルドするのは面倒

TypeScriptは直接実行できる言語ではなく、トランスパイラを通してJavaScriptに変換する必要があります。
そのため「tsc hoge.ts」というようにコマンドを打つわけですが、トランスパイルの頻度が増えるたびに面倒な作業となるものです。
今回はこの問題を解消していきましょう。

tsconfig.jsonでコンパイルの設定

TypeScriptに関する設定は「tsconfig.json」というファイルで行うことができます。
これは名前の通りTypeScriptのコンパイル方法に関する設定を記載することができるファイルなのですが、デフォルトでは編集できる状態にありません。
というか存在しないので、自分で作成しなければいけないのです。

では早速tsconfig.jsonというファイルを作成しましょう。
といっても何を書けば良いか分からないかもしれません。
そんなときは以下の公式サイト通りに書けば良いのです。
参考：https://code.visualstudio.com/docs/languages/typescript

{

    "compilerOptions": {

        "target": "es5",

        "module": "commonjs",

        "sourceMap": true

    }

}

ここではコンパイラのオプションを指定しています。
compilerOptionsという項目は省略することも可能で、その場合はコンパイラのデフォルト設定が使用されることになる形です。
ともかく今回は上の通りに記述しておきましょう。

このtsconfig.jsonというファイルが存在し、きちんと記述がされている場合ビルドタスクというものを実行することができるようになります。

vscodeのメニューの「タスク」内に「ビルドタスクの実行」という項目があるのでこれを選択してみましょう。
すると「tsc：ウォッチ」や「tsc：ビルド」といったビルドタスクが実行できるようになっているはずです。
前者はファイルに変更があったときにビルドし、後者は直ぐに1度だけビルドを行います。

特に前者のウォッチはいわばビルドの自動化で、いちいち「tsc hoge.ts」という面倒なコマンドを実行する必要がなくビルドしてくれるのです。
自動でTypeScriptファイルをビルドするということは自動でJavaScriptファイルが生成されるということに他ありません。
後はそのJavaScriptファイルを実行するなり利用するHTMLファイルをブラウザで読み込んでおいて更新するなりすれば実行結果が分かるというわけです。

上手く行かない場合

ここに書かれている通りにやったのに上手く動かないという場合はvscodeに何か問題があるのかもしれません。
具体的にはtsconfig.jsonを作ったのにタスクに項目が現れないといったことが考えられます。
それはもしかしたら異なるワークスペースにファイルを作っているのかもしれません。

vscodeでは指定したワークスペース単位で作業をしていくことになります。
新しいプロジェクトを始める場合はメニューのファイルから「ワークスペースにフォルダーを追加」を選択し、そのプロジェクトのワークスペースとなるフォルダーを指定しましょう。
そしてそのプロジェクトに関する作業は全てそのワークスペース内で行うのです。

もし構成がおかしくなってしまったら一からやり直してみましょう。
最初から慎重にやっていけば案外素直に実行できたりするはずです。

tasks.jsonを確認

ビルドタスクができるようになったらメニューのタスク内にある「タスクの構成」をみてみましょう。
すると「tasks.json」というファイルが作られます。
このファイルはタスクの実行内容を記述したもので、自分でも書き換えることができたりします。
後々開発の規模が大きくなるにつれてこうしたファイルの存在は把握しておくと躓かずに済むかもしれません。

実はビルドの自動化は簡単

実のところ、コマンドプロンプトかvscode内コンソールのtscコマンドに「-w」というオプションをつけるだけでビルドを自動化させることはできたりします。
では今まで見てきたことはムダだったかというと、決してそんなことはありません。
というかむしろ開発の規模が長くなるに連れて大事なポイントになるので今のうちに概要だけでも把握しておくことは重要です。

例えばtsconfig.jsonには既存のファイルを読み込むincludeをすることができますし、そのファイルをexcludeでフィルタにかけて除外することも可能です。
またtasks.jsonにはGulpやGruntといった外部システムと連携するときに記述が必要だったりします。
まだ使わないとしてもこれらの機能が必要なケースに直面したとき、今回見てきたjsonファイルを書き換えれば良さそう、という予想がつくはずです。

より快適な環境作りを目指そう

ビルドを自動化することは冗長な作業を省く良い方法です。
それまでの手間を激減してくれるので気持ちよくコードを書くことができるでしょう。

そして今回、何となくvscodeでのコーディングの流れも見えてきたと思います。
ワークスペースの存在が基本であることや、各種jsonファイル内の記述に従ってビルドすることなど、いずれもこのツールを扱う上では欠かせないポイントです。
把握すれば把握するほどvscodeは快適な開発環境となるはずなので、しっかりと整理しておきましょう。