TypeScriptのexcludeの使い方10選

はじめに

TypeScriptは近年、フロントエンド開発を中心に、多くのエンジニアに支持されています。

TypeScriptの強力な型システムや、JavaScriptにない豊富な機能がその背景にあります。

今回は、TypeScriptの設定ファイル「tsconfig.json」における重要なオプションの一つ、excludeの使い方にフォーカスして解説を行います。

この記事を通じて、excludeオプションの基本的な使い方から実践的な応用まで、しっかりと学んでいきましょう。

●TypeScriptのexcludeとは

TypeScriptのプロジェクトを管理する際には、tsconfig.jsonという設定ファイルが中心となります。

この中には多くの設定項目が存在し、プロジェクトの挙動やコンパイルの振る舞いをカスタマイズするための設定が記述されています。

その中でもexcludeは、TypeScriptのコンパイラに、特定のファイルやディレクトリをコンパイルの対象外として認識させるためのオプションです。

例えば、node_modulesやビルド時の出力ディレクトリ、テスト用のファイルなど、コンパイルの対象としたくないものを指定する場合に使用します。

このオプションは、大規模なプロジェクトや複数のライブラリを取り込むプロジェクトで特に有効です。

不要なファイルをコンパイルの対象から除外することで、コンパイルの速度を向上させたり、エラーの発生を防ぐことができます。

○excludeの基本理解

excludeオプションを使用する際の基本的な考え方は、tsconfig.jsonの中に、excludeキーを追加し、その値として配列を指定することです。

この配列の中には、コンパイルから除外したいファイルやディレクトリのパスを文字列として列挙します。

例えば、次のような設定であれば、node_modulesディレクトリとdistディレクトリ、そしてtest.tsという名前のファイルがコンパイルの対象から除外されます。

{
  "compilerOptions": {
    // その他のコンパイラオプション
  },
  "exclude": ["node_modules", "dist", "test.ts"]
}

このコードでは、tsconfig.json内にexcludeオプションを設定しています。

指定したnode_modules、distディレクトリとtest.tsファイルは、TypeScriptのコンパイル対象から除外されます。

このコードを実行すると、node_modules、distディレクトリおよびtest.tsファイルはコンパイルされず、他の.tsファイルのみがコンパイルの対象となります。

●excludeの基本的な使い方

TypeScriptを使ってプロジェクトを構築する際、特定のファイルやディレクトリをコンパイルの対象から除外したいことがあります。

こうしたニーズに対応するための設定が、tsconfig.json内の「exclude」オプションです。

この記事では、TypeScriptのexcludeの基本的な使い方について、サンプルコードを交えて解説していきます。

○サンプルコード1：基本的なexcludeの設定例

まず、基本的なexcludeの設定について考えてみましょう。

{
  "compilerOptions": {
    "outDir": "./dist"
  },
  "exclude": ["node_modules"]
}

このコードでは、TypeScriptの設定ファイル「tsconfig.json」内で「exclude」オプションを使用しています。

指定した「node_modules」というディレクトリは、TypeScriptのコンパイル対象から除外されます。

これは、node_modules内のファイルやライブラリは既にJavaScriptで記述されていることが多いため、再度のコンパイルは不要だからです。

このコードを実行すると、TypeScriptファイルはコンパイルされますが、「node_modules」ディレクトリ内のファイルはコンパイルされません。

具体的には、プロジェクトルートで「tsc」というコマンドを実行すると、TypeScriptファイルは「./dist」ディレクトリ下にJavaScriptとして出力されます。

しかし、「node_modules」内のファイルは、出力ディレクトリには含まれません。

○サンプルコード2：特定のフォルダを除外する設定

TypeScriptを使用する際、特定のフォルダやファイルをコンパイルの対象外にする必要があります。

たとえば、テスト用のファイルや一時的なスクリプト、第三者のライブラリなどをコンパイル対象から除外することが考えられます。

そのためには、tsconfig.jsonの中のexcludeオプションを使用します。

では、具体的なサンプルコードを見てみましょう。

// tsconfig.json
{
  "compilerOptions": {
    // ... その他の設定
  },
  "exclude": ["node_modules", "temp", "test"]
}

このコードではexcludeオプションを使って、node_modules、temp、testという3つのフォルダをコンパイルの対象から除外しています。

これにより、これらのフォルダ内のTypeScriptファイルはコンパイル時に無視されることとなります。

このコードを実行すると、例えばプロジェクトのルートディレクトリに上記の3つのフォルダが存在している場合、それらのフォルダ内のTypeScriptファイルはコンパイルされません。

それにより、不要なファイルのコンパイルを避けることができ、ビルド速度の向上や出力されるファイル数の削減が期待できます。

また、excludeの設定は配列形式で行いますので、除外したいフォルダやファイルを複数指定することも可能です。

また、フォルダだけでなく、特定のファイルを直接指定することもできます。

例として、プロジェクト内にmain.tsというファイルが存在し、これをコンパイルの対象から除外したい場合、次のように記述することで実現できます。

// tsconfig.json
{
  "compilerOptions": {
    // ... その他の設定
  },
  "exclude": ["node_modules", "temp", "test", "main.ts"]
}

○サンプルコード3：特定の拡張子を除外する設定

TypeScriptでは、特定のファイルやフォルダをコンパイルの対象外とするためのexcludeオプションが提供されています。

ここでは、特定の拡張子を持つファイルをコンパイルの対象外とする設定方法を、サンプルコードとともに詳しく解説します。

□なぜ特定の拡張子を除外するのか

プロジェクトには、コンパイルの必要がない一時的なファイルや、テスト用のファイルなど、特定の拡張子を持つファイルが含まれることがあります。

これらのファイルをコンパイルの対象から除外することで、不要なコンパイルを防ぎ、ビルド時間の短縮やエラーの発生を減らすことができます。

□特定の拡張子を除外する設定の方法

TypeScriptの設定ファイルtsconfig.json内のexcludeオプションに、除外したい拡張子を指定します。

.spec.tsという拡張子を持つテスト用のファイルを除外する例を紹介します。

{
  "compilerOptions": {
    // その他の設定
  },
  "exclude": [
    "*.spec.ts"
  ]
}

このコードでは、excludeオプション内に*.spec.tsを指定しています。

これにより、全ての.spec.tsという拡張子を持つファイルがコンパイルの対象から除外されます。

このコードを実行すると、プロジェクト内の全ての.spec.tsという拡張子を持つファイルがコンパイルされず、その他のファイルは通常通りコンパイルされる結果となります。

□複数の拡張子を除外する場合

もちろん、複数の拡張子を除外することも可能です。

その場合は、excludeオプション内に配列として複数の拡張子を列挙します。

例えば、.spec.tsと.test.tsの2つの拡張子を持つファイルを除外したい場合、次のように設定します。

{
  "compilerOptions": {
    // その他の設定
  },
  "exclude": [
    "*.spec.ts",
    "*.test.ts"
  ]
}

この設定を適用すると、.spec.tsと.test.tsの拡張子を持つ全てのファイルがコンパイルの対象から除外されます。

●excludeの応用例

TypeScriptにおけるexcludeの設定は非常に柔軟性が高く、多様なプロジェクトのニーズに応じて利用できる強力なツールです。

これまでに、基本的な使い方や設定方法を見てきましたが、次にはさらに高度な使い方を紹介します。

これにより、TypeScriptのプロジェクト設定をさらに最適化し、効率的にコーディングを進めることができます。

○サンプルコード4：複数の条件を組み合わせて除外する方法

TypeScriptのプロジェクトが大きくなると、複数の条件を組み合わせて特定のファイルやフォルダを除外する必要が出てきます。

特定のフォルダと特定の拡張子を持つファイルを同時に除外する設定例を紹介します。

{
  "exclude": [
    "node_modules",   // node_modulesフォルダ全体を除外
    "**/*.test.ts"    // 全てのtest.tsという名前のファイルを除外
  ]
}

このコードでは、node_modulesというフォルダ全体と、プロジェクトのどこにあるかに関わらず.test.tsという拡張子を持つ全てのファイルを除外しています。

**は任意のフォルダを意味するワイルドカードです。

したがって、**/*.test.tsという設定は、プロジェクト内のどのディレクトリにある.test.tsという拡張子のファイルも除外対象とします。

このコードを実行すると、指定されたフォルダとファイルがTypeScriptのコンパイル対象から除外され、結果的に出力されるJavaScriptファイルにはこれらのファイルやフォルダの内容は含まれません。

○サンプルコード5：正規表現を使用して特定のファイル名を除外する設定

TypeScriptのプロジェクトでコンパイルを行う際、特定のファイルやディレクトリをコンパイル対象から除外したい場面は数多く存在します。

その際に役立つのが、tsconfig.json内のexcludeオプションです。

ここでは、正規表現を活用して特定のファイル名パターンに一致するファイルを除外する設定方法を詳しく解説します。

このコードでは、^test.*\.ts$という正規表現を使用して、testから始まる名前のTypeScriptファイルをコンパイルの対象から除外しています。

{
  "compilerOptions": {
    // その他のコンパイラオプション
  },
  "exclude": [
    "node_modules",
    "**/^test.*\\.ts$"
  ]
}

上記の設定では、例えばtestApp.tsやtest1.tsといったファイル名を持つファイルがコンパイル対象から除外されます。

ここで、**/は任意のディレクトリを表しています。

つまり、プロジェクトのどの階層にあるtestから始まるファイルも除外されることになります。

このコードを実行すると、testで始まるTypeScriptファイルはコンパイルの際に無視され、生成されるJavaScriptファイルにはこれらのファイルの内容は含まれなくなります。

特定のテストファイルやデバッグ用のファイルなど、一時的にコンパイルから除外したい場合に非常に役立ちます。

○サンプルコード6：ネストされたフォルダの除外方法

TypeScriptを使用する際、プロジェクト内には多数のフォルダやファイルが存在します。

特に大規模なプロジェクトでは、ネストされたフォルダ、つまりサブフォルダが含まれるメインのフォルダが存在することがよくあります。

そのようなネストされたフォルダの中の特定のファイルやサブフォルダ全体をコンパイル対象から除外したい場合もあるでしょう。

ここでは、そのようなネストされたフォルダをexcludeオプションを使って除外する方法を解説します。

まず、基本としてtsconfig.json内のexcludeオプションは、TypeScriptのコンパイラがチェックやコンパイルから除外すべきファイルやディレクトリのリストを指定します。

これを利用することで、特定のファイルやディレクトリをコンパイルの対象から外すことが可能です。

では、実際にネストされたフォルダを除外する設定を見ていきましょう。

// tsconfig.json
{
  "compilerOptions": {
    // ... その他のコンパイラオプション
  },
  "exclude": ["mainFolder/subFolder"]
}

このコードでは、mainFolderというフォルダの中にあるsubFolderというサブフォルダ全体をコンパイル対象から除外しています。

こうすることで、subFolder内の全ての.tsファイルや.tsxファイルがコンパイルされなくなります。

また、特定のファイルだけを除外する場合は次のように指定します。

{
  "compilerOptions": {
    // ... その他のコンパイラオプション
  },
  "exclude": ["mainFolder/subFolder/specificFile.ts"]
}

この場合、mainFolderの中のsubFolderにあるspecificFile.tsだけがコンパイルの対象から除外されます。

このコードを実行すると、指定したフォルダやファイルがTypeScriptのコンパイル対象からしっかりと除外されます。

これにより、不要なファイルやフォルダのコンパイルを防ぐことができ、ビルドの速度を向上させたり、特定のエラーを回避することができます。

●注意点と対処法

TypeScriptでプロジェクトを開始するとき、excludeオプションの使い方や設定には様々な注意点が存在します。

誤った設定や使い方をすると、予期しないコンパイルエラーを引き起こしたり、必要なファイルまでトランスパイルから除外してしまうリスクがあります。

ここでは、そのような注意点とそれを解決するための対処法をサンプルコードと共に解説していきます。

○サンプルコード7：誤ったexcludeの設定例とその解決法

まず、誤ったexcludeの設定例を見てみましょう。

{
  "compilerOptions": {
    // 省略
  },
  "exclude": [
    "node_moduless" // 誤字がある
  ]
}

このコードでは、node_modulessというフォルダをexcludeの対象としていますが、実際にはnode_modulesが正しいフォルダ名です。

このような誤字により、意図せずnode_modules内のファイルがトランスパイルの対象となってしまい、コンパイル時間が不必要に増加する可能性があります。

また、このコードを実行すると、特にエラーが表示されないため、ユーザーは設定の誤りに気づきにくいです。

正しくは次のようになります。

{
  "compilerOptions": {
    // 省略
  },
  "exclude": [
    "node_modules"
  ]
}

このコードでは、node_modulesフォルダを正しくexcludeの対象としています。

このように、設定ファイルの誤字や記述ミスはシンタックスエラーとして検出されないため、設定を変更する際は注意が必要です。

解決策として、設定変更後は必ずトランスパイルを実行して動作確認を行い、意図しないファイルがトランスパイルの対象となっていないかを確認することが推奨されます。

○サンプルコード8：excludeとincludeの組み合わせ方

TypeScriptを使用する際、プロジェクトにおける特定のファイルやフォルダをコンパイルの対象から除外したり、特定のファイルやフォルダのみをコンパイルの対象とする必要が生じることがあります。

このようなケースで役立つのが、tsconfig.json内のexcludeとincludeオプションです。

まず、excludeは、指定したパターンに一致するファイルやフォルダをコンパイルの対象から除外します。

一方、includeは、指定したパターンに一致するファイルやフォルダのみをコンパイルの対象とします。

この2つのオプションを組み合わせることで、非常に柔軟なファイルの管理が可能になります。

下記のサンプルコードでは、srcディレクトリ内の全ての.tsファイルをコンパイルの対象とし、その中でもtestsディレクトリとtemp.tsを除外する設定を表しています。

{
  "compilerOptions": {
    // ... その他のコンパイラオプション
  },
  "include": ["src/**/*.ts"],
  "exclude": ["src/tests/**/*", "src/temp.ts"]
}

このコードでは、まずincludeオプションでsrcディレクトリ下の全ての.tsファイルをコンパイルの対象としています。

続いて、excludeオプションでsrc/testsディレクトリ内の全てのファイルとsrc/temp.tsをコンパイルの対象から除外しています。

このコードを実行すると、指定されたディレクトリやファイルを除外した上で、TypeScriptファイルがJavaScriptファイルにコンパイルされる結果となります。

●カスタマイズ方法

TypeScriptのexcludeオプションは、基本的な使い方や応用方法だけでなく、カスタマイズ方法においても非常に便利です。

特に、大規模なプロジェクトや特定の条件下での開発を行う際、カスタマイズが求められることが多くなります。

ここでは、カスタム型を使用してexcludeを活用する方法について詳しく解説していきます。

○サンプルコード9：カスタム型でのexcludeの応用例

TypeScriptを使ってカスタム型を定義する場面は多いですが、そのカスタム型を使ってexcludeオプションを更に強力に活用することも可能です。

// カスタム型の定義
type CustomExclude<T, U extends keyof T> = {
    [P in Exclude<keyof T, U>]: T[P];
};

interface OriginalType {
    name: string;
    age: number;
    address: string;
}

// addressプロパティを除外した新しい型を生成
type NewType = CustomExclude<OriginalType, 'address'>;

このコードでは、まずCustomExcludeというカスタム型を定義しています。

このカスタム型は、指定したオブジェクト型Tから特定のキーUを除外した新しい型を生成します。

例として、OriginalTypeというinterfaceを定義し、その中からaddressプロパティだけを除外した新しい型NewTypeを作成しています。

このように、カスタム型を利用して、特定のプロパティを動的に除外する型を生成することができます。

このコードを実行すると、NewTypeはnameとageプロパティを持ち、addressプロパティは含まれない型として定義されます。

○サンプルコード10：外部ライブラリとの連携でのexclude設定例

TypeScriptのプロジェクトに外部ライブラリを導入する際、そのライブラリの一部をコンパイルの対象から除外したい場面が考えられます。

例えば、特定の外部ライブラリが巨大で、すべての部分を使用するわけではない場合や、コンパイル時に不要なファイルやモジュールを取り除くことで、ビルド速度を向上させたい場面などです。

このようなケースに対応するために、TypeScriptのexcludeオプションを使うことで、特定の外部ライブラリの一部を簡単にコンパイルの対象から除外することができます。

このコードでは、Node.jsの人気な外部ライブラリ「express」を導入したTypeScriptプロジェクトで、特定のモジュールをコンパイルの対象から除外する例を表しています。

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules/express/someUnwantedModule/**/*"
  ]
}

このコードでは、プロジェクトのルートディレクトリに配置されているtsconfig.jsonの設定を示しています。

excludeオプションにnode_modules/express/someUnwantedModule/**/*を追加することで、expressライブラリの中のsomeUnwantedModuleというモジュールをコンパイルの対象から除外しています。

このコードを実行すると、TypeScriptのコンパイラはsrcディレクトリ内のすべての.tsファイルをコンパイルの対象として取り込みますが、expressのsomeUnwantedModuleモジュールはコンパイルの対象から除外されます。

その結果、出力ディレクトリであるdistには、someUnwantedModuleに関連するファイルは生成されません。

まとめ

TypeScriptを使いこなすには、多くの設定項目とその使い方を理解することが欠かせません。

今回は、TypeScriptの様々な設定項目の中でも、特に多くのプロジェクトで使用される「exclude」オプションに焦点を当て、その詳細な使い方を10のサンプルコードを通じて解説しました。

また、excludeオプションだけでなく、他のオプションについてもしっかりと理解し、最適な設定を追求していくことで、より効率的で快適な開発を実現することが可能です。

今後の開発作業に役立てていただければ幸いです。