【入門編】 watchOptionsの設定 – TypeScript実践ガイド

やあ、TypeScriptの世界へようこそ。フロントエンドの最前線でコードを書いていると、たまに「なぜか保存したのにコンパイルが走らない！」とか「逆に、何もしてないのにPCが唸り声を上げている…」なんていう摩訶不思議な現象に出会うことがあるよね。

今日はそんな「TypeScriptの監視（watch）モード」について、少しだけ深掘りしてみよう。難しく聞こえるかもしれないけれど、実はこれ、「あなたの専属秘書が、どれくらい細かく仕事の状況をチェックするか」という設定の話なんだ。

—

1. 監視モード（watch）って何をしているの？

TypeScriptには、ファイルを書き換えるたびに自動で変換（コンパイル）してくれる `tsc –watch` という便利な機能があるよね。

これは例えるなら、「あなたが原稿を書き終えるたびに、背後で目を光らせている校正担当者」のようなもの。あなたが保存ボタンを押した瞬間、彼らは「おっと、更新されたぞ！」と気づいて、猛スピードで修正を反映してくれる。

でも、この校正担当者が「仕事熱心すぎて、少しでも気配を感じるたびに全てを確認しに行こうとする」とどうなるだろう？部屋の掃除をするだけで「今のは修正ですか？」と聞きに来られたら、たまったものじゃないよね。

ここで登場するのが `tsconfig.json` 内の `watchOptions` なんだ。

—

2. watchOptionsで「仕事のやり方」を調整しよう

`tsconfig.json` にこの設定を書き加えることで、TypeScriptに「どこを監視して、どこは無視していいのか」を教えることができる。

まずは、よく使う設定項目をコードで見てみよう。

{
“compilerOptions”: {
// …普段のコンパイル設定
},
“watchOptions”: {
// 1. 監視対象から除外する設定（ノイズを減らす）
“excludeFiles”: [“dist”, “node_modules”],

// 2. ファイル変更を検知する手法の指定
“watchFile”: “fixedPollingInterval”
}
}

監視を「サボる」ことも大切（excludeFiles）

例えば、`node_modules` の中身なんて、自分で書き換えることはまずないよね。それなのに、TypeScriptが律儀に「node_modulesの中身に変化はないか？」とチェックし続けたら、PCのCPUは悲鳴を上げてしまう。

`excludeFiles` は、「あそこは絶対に触らないから、見なくていいよ！」と伝えて、監視の手間を省くための設定だ。これだけで、エディタの動作が驚くほど軽快になるはずだよ。

監視の「手段」を変える（watchFile）

実は、OSや環境によっては、TypeScriptのデフォルトの監視方法がうまくいかないことがある。「保存したのにコンパイルが始まらない！」という時は、ここを疑ってみよう。

`fixedPollingInterval`（ポーリング）:

これは「一定時間ごとに、定期的に様子を見に行く」スタイル。例えるなら、「5分おきに玄関を覗いて、郵便物が届いていないか確認する」方式。確実だけど、ちょっとだけタイムラグがある。

`useFsEvents`（OSネイティブ）:

OSが「今、ファイルが変わったよ！」と教えてくれるのを待つスタイル。「インターホンが鳴ったら出る」という効率的な方法だ。基本的にはこれが一番速い。

—

3. つまずいた時の処方箋

もし、あなたが「保存しているのに画面が変わらない！」という状況に陥ったら、まずは焦らず以下のステップを試してみてほしい。

1. まずは「再起動」: シンプルだけど、エディタ（VSCodeなど）やターミナルのプロセスが何かを掴んで離さないことはよくある。
2. `watchOptions` を確認: 特にDockerやWSL（Windows上でLinuxを動かす環境）を使っている場合、ファイルの変化がうまく伝わらないことがある。そんな時は、あえて `fixedPollingInterval` を選ぶと、泥臭いけれど確実に動くようになるよ。

—

最後に：完璧を目指さなくていい

TypeScriptのツール設定は、最初から全てを理解する必要なんてないんだ。

「なんだか最近、PCが重いな」
「保存した後の反応が遅いな」

そう感じた時に、この `watchOptions` という引き出しを思い出して、少しずつ調整してみてほしい。「こう設定したら、少し快適になった！」という小さな成功体験の積み重ねが、あなたを一流のエンジニアへと近づけていく。

大丈夫、TypeScriptはあなたの最高のパートナーだ。無理に全部を暗記せず、困った時にまたここへ戻ってきてくれればいい。君のコーディングライフが、少しでも快適なものになりますように！