tsconfig.build.jsonの設定解説 📝

:::note info | message
`tsconfig.build.json` のように、特定の目的に特化した `tsconfig.json` ファイルを作成することは、TypeScriptプロジェクトの管理において非常に一般的かつ推奨されるプラクティスです。これは、開発環境とビルド環境で異なる設定を使い分けたい場合に特に役立ちます。🛠️
:::

提供された `tsconfig.build.json` の設定は非常にシンプルですが、その背後にあるTypeScriptの設定継承の強力なメカニズムを示しています。

-----

### `tsconfig.build.json` の各プロパティ解説 💡

| プロパティ | 設定値            | 解説                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| :--------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `extends`  | `"./tsconfig"`    | この設定が、指定されたパス（ここでは相対パスで `./tsconfig.json`）にある別の `tsconfig.json` ファイルの設定を**継承**することを示します。これにより、共通の設定を一つのファイルにまとめ、他の設定ファイルではその共通設定を再利用しつつ、必要に応じて**上書きまたは追加**できます。今回のケースでは、`tsconfig.build.json` は `./tsconfig.json` のすべての設定（先ほど解説した厳密な型チェックやESNextのターゲットなど）をまず読み込みます。                                                                                                                                                                                |
| `exclude`  | `["example", "lib"]` | TypeScriptコンパイラが型チェックやコンパイルの対象から**除外する**ファイルやディレクトリのリストを指定します。この設定は、`include` オプションやデフォルトでコンパイル対象となるファイルよりも優先されます。ここでは、`example` ディレクトリと `lib` ディレクトリがコンパイル対象から外されます。一般的な使用例としては、開発用サンプルコード (`example`) や、既にビルド済みで配布されるライブラリの出力ディレクトリ (`lib` や `dist`) を除外することが多いです。これにより、ビルド時間を短縮し、不必要なファイルのコンパイルを防ぎます。 |

-----

### この設定の意図と一般的なユースケース 🎯

この `tsconfig.build.json` は、以下のような目的で設計されていると考えられます。

1.  **ビルド時のみに適用される設定**:

      * `extends` を使用することで、`./tsconfig.json` で定義されている**開発時の厳密な型チェック**や**最新のESNext機能の利用**といった共通の基本設定をそのまま引き継いでいます。
      * そして、`exclude` オプションで `example` や `lib` ディレクトリを除外することで、**製品として配布するコードのビルド時**には、開発中にのみ必要なサンプルコードや、ビルドプロセスで生成される中間ファイル・最終出力ファイルを誤ってコンパイルしないようにしています。

2.  **クリーンなビルドプロセスの実現**:

      * 例えば、`lib` ディレクトリが以前のビルド成果物を含んでいる場合、それを `exclude` することで、古いコードが混入したり、コンパイルエラーの原因になったりするのを防ぎます。
      * 開発時にテストやデモのために作成した `example` コードを、製品ビルドには含めたくない場合にもこの設定が役立ちます。

3.  **複数設定の使い分け**:

      * **開発用 (`tsconfig.json`)**: VS Codeなどのエディタがリアルタイムで型チェックを行う際に使用され、すべてのファイル（サンプルコードも含む）を監視対象とする場合があります。
      * **ビルド用 (`tsconfig.build.json`)**: CI/CDパイプラインやnpmスクリプトなどで実際に製品版のJavaScriptを生成する際に使用され、必要なコードのみを効率的にコンパイルします。
      * **テスト用 (`tsconfig.test.json` など)**: テストフレームワークが使用する特定の型定義やグローバル変数を追加するなど、テスト実行時のみに有効な設定を持つこともあります。

-----

### サンプルコードと使用した場合・使用しなかった場合の比較 📊

#### 📌 サンプルコード (`tsconfig.build.json` を使用した場合のビルドコマンドのイメージ)

**プロジェクト構造:**

```
my-project/
├── tsconfig.json        <-- 共通の基本設定
├── tsconfig.build.json  <-- ビルド用の設定
├── src/
│   ├── main.ts
│   └── utils.ts
├── example/
│   └── demo.ts          <-- ビルドから除外したい
└── lib/
    └── index.js         <-- 以前のビルド成果物など、ビルドから除外したい
```

**`tsconfig.json` (仮):**

```json
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "module": "ESNext",
    "target": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "bundler"
  }
}
```

**`tsconfig.build.json`:** (冒頭に記載のもの)

```json
{
  "extends": "./tsconfig",
  "exclude": ["example", "lib"]
}
```

**ビルドコマンドの実行:**
`tsc --project tsconfig.build.json`

このコマンドを実行すると、TypeScriptコンパイラは `tsconfig.build.json` の設定を読み込みます。まず `tsconfig.json` の設定を継承し、その上で `exclude` で指定された `example` と `lib` ディレクトリ内のファイルをコンパイル対象から除外します。結果として、`src/main.ts` と `src/utils.ts` のみがコンパイルされ、`dist` ディレクトリに出力されます。

-----

#### 📌 `exclude` を使用しない場合の比較 (`tsconfig.json` のみでビルドした場合)

もし `tsconfig.build.json` の `exclude` 設定がなく、代わりに `tsconfig.json` に直接 `example` や `lib` が含まれていたり、`include` オプションで明示的に除外されていなかったりした場合、コンパイラはこれらのディレクトリ内のファイルも処理しようとします。

**`tsconfig.json` (excludeなし、または不十分な場合):**

```json
{
  "compilerOptions": {
    "rootDir": ".", // もしこの設定だと、exampleやlibも対象になる可能性
    "outDir": "./dist",
    // ... その他の設定
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "example/**/*.ts"] // 例: exampleを含めてしまう
}
```

**ビルドコマンドの実行:**
`tsc` (または `tsc --project tsconfig.json`)

この場合、以下のような問題が発生する可能性があります。

  * **コンパイルエラー**: `example` ディレクトリ内のコードが未完成だったり、テスト用の特殊な構文を含んでいたりする場合、それが製品ビルドのコンパイルエラーを引き起こす可能性があります。
  * **不要なファイルの出力**: `lib` ディレクトリに既にビルド済みのJavaScriptファイルがあるにも関わらず、TypeScriptコンパイラがそれを再度処理しようとし、重複した出力やエラーにつながる可能性があります。
  * **ビルド時間の増加**: 不要なファイルをチェック・コンパイルすることで、全体のビルド時間が長くなります。
  * **バンドルサイズの肥大化**: もしバンドラーが `tsconfig.json` の設定をそのまま利用してビルドする場合、不要な `example` コードが最終的なバンドルに含まれてしまう可能性があります。

-----

:::note alert | message alert
`extends` と `exclude` を適切に利用することで、異なる環境や目的（開発、テスト、ビルド）に応じてTypeScriptのコンパイル設定を柔軟にカスタマイズできます。これにより、開発効率の向上、ビルド時間の短縮、そしてクリーンで信頼性の高い最終成果物の生成が可能になります。🚨
:::