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

生徒

「TypeScriptを使うときに、tsconfig.jsonというファイルが必要って聞いたんですが、これは何ですか？」

先生

「tsconfig.jsonは、TypeScriptのコンパイル設定を管理するファイルです。これがあることで、プロジェクト全体の動作を一括で管理できるんですよ。」

生徒

「コンパイル設定って、具体的にどんなことを設定するんですか？」

先生

「それでは、tsconfig.jsonの役割と基本的な設定項目について、詳しく見ていきましょう！」

1. tsconfig.jsonとは？

TypeScriptで開発を行うとき、tsconfig.jsonというファイルを作成します。このファイルは、TypeScriptのコンパイラがどのようにコードを変換するかを指定する設定ファイルです。

例えるなら、料理のレシピのようなものです。料理を作るときには、どの材料を使うか、何分加熱するか、といった手順が書かれたレシピが必要ですよね。同じように、TypeScriptをJavaScriptに変換するときにも、どのバージョンのJavaScriptに変換するか、どのファイルをコンパイル対象にするか、といった指示が必要になります。それを記述するのがtsconfig.jsonなのです。

このファイルをプロジェクトのルートディレクトリに配置することで、TypeScriptコンパイラは自動的にこの設定を読み込んで動作します。

2. tsconfig.jsonの作成方法

tsconfig.jsonは、手動で作成することもできますが、TypeScriptには便利なコマンドが用意されています。コマンドライン（黒い画面のようなもの）で以下のコマンドを実行すると、自動的に基本的なtsconfig.jsonが生成されます。


tsc --init

このコマンドを実行すると、プロジェクトのフォルダ内にtsconfig.jsonファイルが作成され、たくさんの設定項目がコメント付きで記載されています。初めて見ると難しく感じるかもしれませんが、実際によく使う設定は限られているので安心してください。

3. tsconfig.jsonの基本構造

tsconfig.jsonは、JSON形式で記述されます。JSON形式とは、データを構造化して記述するための書き方の一つで、キーと値のペアで情報を管理します。基本的な構造は以下のようになっています。


{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

大きく分けて、compilerOptions、include、excludeという３つの主要な項目があります。それぞれの役割を理解していきましょう。

4. compilerOptionsの主要な設定項目

compilerOptionsは、TypeScriptコンパイラの動作を細かく制御するための設定をまとめた項目です。ここでは、初心者がまず知っておくべき重要な設定をいくつか紹介します。

target（ターゲット）

targetは、TypeScriptをどのバージョンのJavaScriptに変換するかを指定します。例えば、"ES2020"と指定すると、2020年版のJavaScript仕様に準拠したコードに変換されます。古いブラウザでも動作させたい場合は"ES5"を、最新の環境であれば"ES2020"や"ESNext"を指定します。


"target": "ES2020"

module（モジュール）

moduleは、コード内でモジュール（プログラムを部品化したもの）をどの形式で扱うかを指定します。Node.js環境で動作させる場合は"commonjs"、ブラウザ向けのモダンな開発では"ES2020"や"ESNext"を選択します。


"module": "commonjs"

strict（厳格モード）

strictは、TypeScriptの型チェックを厳格にするかどうかを設定します。trueにすると、より厳しい型チェックが行われるため、バグを未然に防ぐことができます。初心者のうちは厳しく感じるかもしれませんが、将来的に安全なコードを書くためにはtrueに設定することをおすすめします。


"strict": true

outDir（出力ディレクトリ）

outDirは、コンパイル後のJavaScriptファイルをどのフォルダに出力するかを指定します。例えば、"./dist"と指定すると、distフォルダ内にコンパイル済みのファイルが生成されます。


"outDir": "./dist"

rootDir（ルートディレクトリ）

rootDirは、TypeScriptのソースコードがどのフォルダに格納されているかを指定します。通常は"./src"のように、ソースコード専用のフォルダを指定します。


"rootDir": "./src"

5. includeとexcludeの設定

includeとexcludeは、どのファイルをコンパイル対象に含めるか、または除外するかを指定する設定です。

include（含めるファイル）

includeには、コンパイル対象とするファイルのパターンを配列形式で指定します。例えば、["src/**/*"]と指定すると、srcフォルダ内のすべてのファイルが対象になります。**はすべてのサブフォルダを意味し、*はすべてのファイルを意味します。


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

exclude（除外するファイル）

excludeには、コンパイル対象から除外したいファイルやフォルダを指定します。通常、外部ライブラリが格納されるnode_modulesフォルダや、テストファイルなどを除外します。


"exclude": ["node_modules", "**/*.test.ts"]

6. 実際のtsconfig.json設定例

ここまで学んだ設定を組み合わせて、実際に使えるtsconfig.jsonの例を見てみましょう。これは、一般的なTypeScriptプロジェクトでよく使われる基本的な設定です。


{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

この設定では、srcフォルダ内のTypeScriptファイルを厳格な型チェックでコンパイルし、結果をdistフォルダに出力します。esModuleInteropは、CommonJSモジュールとESモジュールの互換性を高める設定で、skipLibCheckは型定義ファイルのチェックをスキップして高速化する設定です。