先生と生徒の会話形式で理解しよう

生徒

「先生、TypeScriptのファイルをJavaScriptに変換しようとすると、関係ないファイルまで変換されて困っています。特定のファイルだけを対象にする方法はありませんか？」

先生

「それは便利な設定がありますよ！TypeScriptの設定ファイルにある『include（インクルード）』と『exclude（エクスクルード）』を使えば、どのファイルを変換するかを細かく指定できるんです。」

生徒

「インクルード？エクスクルード？英語だと難しそうですが、どうやって使うんですか？」

先生

「大丈夫、仕組みはとってもシンプルです。お掃除で例えると『この部屋だけ掃除して（include）』『このゴミ箱は触らないで（exclude）』と指示を出すようなものですね。詳しく見ていきましょう！」

1. TypeScriptのコンパイル制御とは？

TypeScriptを使ってプログラムを書くとき、私たちは最終的に「JavaScript」という形式に変換する必要があります。この変換作業をコンパイルと呼びます。通常、パソコンの中にはたくさんのファイルがありますが、すべてのファイルをTypeScriptとして読み込んでしまうと、時間がかかったり、エラーが発生したりしてしまいます。

そこで、設定ファイルであるtsconfig.jsonというファイルの中で、「このフォルダの中にあるファイルだけを読んでね」や「このファイルは無視してね」という命令を出します。これが今回学習するincludeとexcludeの役割です。

豆知識：tsconfig.jsonとは？
TypeScriptのプロジェクト全体の設定を決める「設計図」のようなファイルです。これがないと、TypeScriptはどのように動けばいいのか迷ってしまいます。

2. include（インクルード）の使い方

includeは、日本語で「含める」という意味です。つまり、「コンパイル（変換）の対象にしたいファイルやフォルダ」を指定するために使います。

例えば、あなたが「src」という名前のフォルダの中にすべてのプログラムを書いているなら、「srcフォルダの中だけを見てね」と指示を出すのが一般的です。

基本的な書き方

tsconfig.jsonの中に以下のように記述します。


{
  "include": [
    "src/**/*"
  ]
}

コードの解説

ここで使われている記号には特別な意味があります。これを理解すると、パソコンの操作がぐっと楽になりますよ！

src/：srcという名前のフォルダを指定しています。
*（アスタリスク1個）：ファイル名は何でもいいよ、という意味です。
**（アスタリスク2個）：そのフォルダの中にある「さらに深いフォルダ」も全部探してね、という意味です。

つまり、"src/**/*"と書くと、「srcフォルダの中にある、すべてのフォルダの、すべてのファイルを対象にする」という、魔法の呪文のような設定になるのです。

3. exclude（エクスクルード）の使い方

次に、excludeについて学びましょう。これは「除外する」という意味です。「includeで指定した範囲の中でも、このファイルだけは無視してほしい」というときに使います。

例えば、プログラムを動かすために必要な道具箱（ライブラリ）が入っている「node_modules」というフォルダは、非常に膨大なファイル数があるため、通常はコンパイルの対象から外します。

基本的な書き方


{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

なぜ除外が必要なの？

除外設定をしないと、パソコンが一生懸命「変換しなくていいファイル」まで読み込もうとして、動作が重くなってしまいます。特にテスト用のファイル（.spec.tsなど）や、自動生成されたファイルなどは、除外しておくのが賢いやり方です。

4. includeとexcludeの優先順位とルール

ここでは、初心者の方が間違いやすいポイントを整理しておきましょう。このルールを知っておくと、トラブルが起きたときも安心です。

どちらが優先される？

基本的には、excludeはincludeの設定を上書きします。

例えば、includeで「すべてのファイル」を指定していても、excludeで「Aというファイル」を指定すれば、Aは変換されません。まずは広く含めて、そこから不要なものを削っていくというイメージですね。

ファイル指定の具体例

よく使われる指定パターンをテーブルにまとめました。これをコピーして使うだけでも便利ですよ。

書き方	意味
`"src/index.ts"`	特定の1つのファイルだけを指します。
`"src/*.ts"`	src直下にあるすべてのTypeScriptファイルを指します。
`"test/*/"`	testフォルダ内のサブフォルダを含む全ファイルを指します。

5. 実践！サンプル設定ファイルを作ってみよう

それでは、実際に動くtsconfig.jsonの全体像を見てみましょう。初心者の方が最初に作る設定としては、これがもっとも標準的で使いやすい形です。


{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}