もくじ
TypeScriptを使って開発する際、毎回tscコマンドを実行してコンパイルするのは手間ですよね。
そんなときに便利なのが「ウォッチモード」です。
tsc --watchを使えば、ファイルを変更するたびに自動でコンパイルされるため、開発効率が大幅に向上します。
本記事では、TypeScriptのウォッチモードの基本的な使い方や、tsconfig.jsonを利用した設定方法について詳しく解説します。
ウォッチモードとは？
TypeScriptのウォッチモードとは、ファイルの変更を監視し、変更があった際に自動でコンパイルを実行する機能です。
通常、TypeScriptのコードをコンパイルするには以下のようにtscコマンドを実行する必要があります。
Copyをクリックするとコピーできます。
tsc index.tsしかし、開発中にファイルを修正するたびにこのコマンドを手動で実行するのは面倒です。
そこで、tsc --watchを使うと、ファイルが変更されるたびに、自動コンパイルが実行されます。
TypeScriptのウォッチモードの使い方
tsconfig.json の作成
ウォッチモードを使用するためにtsconfig.jsonが必要です。
以下のコマンドを実行してtsconfig.jsonを作成しましょう。
Copyをクリックするとコピーできます。
tsc --init上記のコマンドを実行するとプロジェクトフォルダにtsconfig.jsonという設定ファイルが生成されます。
本記事ではカスタマイズ方法の解説は省きますが、tsconfig.jsonを編集することで、コンパイルの挙動を細かくカスタマイズできます。
※デフォルトは、プロジェクト内の.tsファイルがすべてコンパイル対象になります。
tsconfig.jsonのカスタマイズのポイント
tsconfig.jsonを編集することで、以下のような設定が可能です。
対象ファイルの指定（特定のフォルダのみ監視）
出力フォルダの変更（コンパイル結果の出力先を変更）
ESバージョンの指定（ES5, ES6, ESNext など）
ウォッチモードの実行
tsconfig.jsonを作成したら、以下のコマンドを実行してウォッチモードを開始できます。
Copyをクリックするとコピーできます。
tsc --watchこのコマンドを実行すると、tsconfig.jsonの設定に従って.tsファイルが監視され、変更があるたびに自動でコンパイルされます。
ウォッチモードの解除方法
ターミナルでtsc --watchを実行している場合、以下のショートカットで解除できます。
| OS | キーボードショートカット |
|---|---|
| Windows | Ctrl + C |
| macOS | Cmd + C |
| Linux | Ctrl + C |
ウォッチモードの活用例
nodemonと組み合わせる
nodemonを使うと、TypeScriptのコンパイルと同時にNode.jsの実行も自動化できます。
まず、以下コマンドを実行してnodemonをインストールします。
Copyをクリックするとコピーできます。
npm install -g nodemon次に、ターミナルを2つ開きます。
1つ目のターミナルで以下コマンドを実行し、TypeScriptのコンパイルを監視します。
Copyをクリックするとコピーできます。
tsc --watch2つ目のターミナルで以下コマンドを実行し、.jsファイルを監視します。
Copyをクリックするとコピーできます。
nodemon dist/index.js※dist/index.jsは実行したいJavaScriptファイルに置き換える必要があります。
nodemonを使用することで、指定したJavaScriptファイルが変更されるたびに、自動で実行することができます。
まとめ
TypeScriptのウォッチモード(tsc --watch)を活用することで、ファイルを手動でコンパイルする手間を省き、開発をスムーズに進めることができます。
tsconfig.jsonを作成し、tsc --watchでファイルの変更を監視し、自動コンパイルnodemonと組み合わせると、開発フローをさらに効率化
ウォッチモードを活用して、快適なTypeScript開発環境を構築しましょう！