こんにちは。TypeScriptの世界へようこそ。
新しい技術を学び始めるとき、最初に立ちはだかる「設定ファイル」の壁。特に`tsconfig.json`という名前を聞いただけで、少し緊張してしまう気持ち、すごくよくわかります。
でも、安心してください。今日は、TypeScriptという広大な森の中で「どの木を切り出して、どの木を残すか」を決める、`files`・`include`・`exclude`という3つの魔法のルールについてお話しします。
これらは難しい呪文ではありません。あなたのプロジェクトという「お部屋の片付け」をするための、とても便利な仕分け術なんです。
—
TypeScriptの「お片付け」ルールを理解しよう
TypeScriptは、プロジェクトフォルダの中にあるすべてのファイルを監視しようとします。しかし、中には「これはプログラムじゃないから無視してほしいな」「これはテスト用のファイルだから、今はコンパイル（翻訳）しなくていいよ」というものもありますよね。
この「お掃除の範囲」を決めるのが、この3つのプロパティです。
1. `files`: ピンポイントで指名する「VIPリスト」
`files`は、一番ストレートな指定方法です。「このファイルと、このファイルだけを絶対に見る！」と、名前を直接指定します。
イメージ: 買い物リストです。「キャベツと牛乳だけ買う」と決めたら、それ以外は目に入れません。
{
“files”: [
“src/main.ts”, // メインのプログラム
“src/utils.ts” // 必要なヘルパー関数
]
}
- 注意点: ファイル数が増えると、ここに一つずつ書くのは現実的ではありません。小さなツールや、特定のファイルだけを扱いたい時に使いましょう。
2. `include`: 「ここら辺にあるやつ全部！」という大まかな指定
実務で一番よく使うのがこれです。フォルダ単位で「このフォルダの中は全部TypeScriptの対象にしてね！」と指示します。
イメージ: 「冷蔵庫の中身は全部料理に使うから、あとでチェックしておくね！」と伝えておくようなものです。
{
“include”: [
“src//” // srcフォルダとその中のすべての階層（）にあるすべてのファイル（）
]
}
- “ という記号は、「フォルダの中のフォルダの中まで、どこまでも深く探して！」というワイルドカードです。これさえあれば、基本的に困ることはありません。
3. `exclude`: 「これだけは触らないでね」という除外リスト
`include`で「全部見て！」と言ったあとで、「あ、これだけは例外！」と付け加えるのが`exclude`です。
イメージ: 「冷蔵庫の中身は全部使っていいけど、期限切れの薬と、家族が大事にしているプリンだけは触らないでね」という注意書きですね。
{
“include”: [“src//”],
“exclude”: [
“node_modules”, // 外部ライブラリは触らない（これが一番大事！）
“/.test.ts” // テストファイルも、今はコンパイル対象から外したい時
]
}
—
初学者がつまずきやすい「落とし穴」
ここで、現場でよくある失敗談を一つ。
もし`exclude`を書き忘れると、TypeScriptはプロジェクト内の `node_modules`（膨大な量の外部ライブラリフォルダ）まで必死に解析しようとして、パソコンが悲鳴を上げて重くなってしまいます。
「`include`で範囲を決めたら、`exclude`で余計なものは省く」
このセットを覚えておくだけで、あなたのTypeScript開発環境はぐっと快適になりますよ。
—
まとめ：設定はあなたの「お部屋」づくり
TypeScriptの設定ファイルを書くことは、自分の作業机を整えることに似ています。
1. まずは `include` で作業範囲を広くとる（`”src//”` が鉄板です）。
2. `exclude` で邪魔なもの（ライブラリやテスト）を取り除く。
3. どうしても特定のファイルだけ指定したい時だけ `files` を使う。
まずはこの感覚で、`tsconfig.json`と向き合ってみてください。
最初は「動かなかったらどうしよう…」と不安になるかもしれませんが、大丈夫。設定を変えても、コードが壊れるわけではありません。何度でも書き直して、あなたのプロジェクトにぴったりの「心地よいお部屋」を作っていってくださいね。
応援しています！また何かあれば、いつでも聞きに来てください。
コメント