tsconfig.jsonとは何か
tsconfig.json は、TypeScript プロジェクトの「設定ファイル」です。TypeScript コンパイラ（tsc）が「どのファイルを、どんなルールで、どんな JavaScript に変換するか」を理解するための設計図のような役割を持っています。プロジェクトのルートディレクトリに置くのが一般的で、このファイルがあると、tsc はそれを自動的に読み込み、コンパイル時の挙動を tsconfig.json に合わせて変えてくれます。
TypeScript は tsconfig.json がなくてもコンパイルできますが、その場合は「デフォルト設定」で動きます。小さなサンプルならそれでも構いませんが、ファイルが増えたり、型チェックを厳しくしたくなったり、出力先フォルダを分けたくなったりした瞬間に、tsconfig.json の存在が一気に重要になります。
tsconfig.json があると何が変わるのか
プロジェクト全体を「まとめて」コンパイルできる
tsconfig.json があると、tsc にファイル名をいちいち渡さなくても、プロジェクト全体をまとめてコンパイルできるようになります。まず tsc --init を実行すると、カレントディレクトリに tsconfig.json が生成されます。その状態で単に tsc と打つと、tsconfig.json の設定に従って、そのディレクトリ配下の .ts ファイルが一括でコンパイルされます。
初心者目線で言うと、「単発のファイルをコンパイルするモード」から「プロジェクトとしてコンパイルするモード」に切り替えるスイッチが tsconfig.json です。ファイルが増えてきたときに、毎回 tsc a.ts b.ts c.ts と書かなくてよくなるのは、地味だけどかなり大きな違いです。
tsconfig.json の基本構造とよく出てくる項目
compilerOptions と include / exclude のイメージ
典型的な tsconfig.json は、次のような形をしています。
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"strict": true,
"outDir": "dist"
},
"include": ["src"],
"exclude": ["node_modules"]
}
compilerOptions は「コンパイラの動作」を細かく制御する場所です。どのバージョンの JavaScript を出力するか（target）、どのモジュールシステムを使うか（module）、型チェックをどれくらい厳しくするか（strict）、コンパイル後のファイルをどこに出力するか（outDir）などをここに書きます。
include と exclude は、「どのファイルをコンパイル対象にするか」を決めるための設定です。たとえば、"include": ["src"] としておけば、src フォルダ以下の .ts ファイルだけが対象になります。node_modules はデフォルトで除外されますが、exclude をいじるときに空にしてしまうと、node_modules までコンパイル対象になってしまうので注意が必要です。 Note Zenn Qiita
具体例で見る：tsconfig.json が効いている瞬間
出力先フォルダを変える例
たとえば、ソースコードを src フォルダに置き、コンパイル後の JavaScript を dist フォルダにまとめたいとします。その場合、tsconfig.json を次のようにします。
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"outDir": "dist"
},
"include": ["src"]
}
この状態で npx tsc を実行すると、src/main.ts のようなファイルが dist/main.js として出力されます。毎回 tsc src/main.ts --outDir dist のようにオプションを付けなくても、tsconfig.json に一度書いておけば、以降は tsc だけで同じルールが適用されます。
ここでのポイントは、「コンパイルのルールをコマンドラインではなくファイルに固定する」ことです。これにより、チームメンバー全員が同じ設定でコンパイルでき、IDE もその設定を読み取って補完やエラーチェックに反映してくれます。
型チェックの厳しさをコントロールする役割
strict や noImplicitAny などの重要オプション
tsconfig.json の中でも特に重要なのが、型チェックの厳しさを決めるオプションです。代表的なのが strict で、これを true にすると、複数の厳格なチェックがまとめて有効になります。たとえば、暗黙の any を禁止する noImplicitAny や、null / undefined をより厳密に扱う strictNullChecks などが含まれます。
初心者のうちは、strict をオンにするとエラーが増えてつらく感じるかもしれませんが、それは「将来ハマるはずだったバグを、今のうちに洗い出してくれている」状態です。tsconfig.json で strict を有効にしておくと、プロジェクト全体の型安全性が一気に上がり、「なんとなく動いているけど実は危ないコード」を減らすことができます。
IDE やツールとの連携という、もうひとつの顔
エディタが賢くなるのは tsconfig.json のおかげ
多くの IDE やエディタ（VS Code など）は、tsconfig.json を読み込んで、プロジェクトの構造やコンパイル設定を理解します。その結果として、型に基づいた補完、エラー表示、定義ジャンプなどの機能が正しく動くようになります。
たとえば、include / exclude で指定した範囲外のファイルは「このプロジェクトの一部ではない」とみなされるので、エディタの解析対象から外れます。逆に、tsconfig.json がないと、エディタは「どこからどこまでが TypeScript プロジェクトなのか」を判断しづらくなり、補完やエラーチェックの精度が落ちることがあります。
初心者がまず押さえるべき tsconfig.json のイメージ
tsconfig.json は、「TypeScript プロジェクトのルールブック兼地図」です。コンパイラに対して「こういう JavaScript を出力して」「このフォルダだけ見て」「型チェックはこれくらい厳しくして」と指示する場所であり、その設定を IDE やビルドツールも共有することで、開発体験全体が整っていきます。
最初のうちは、tsc --init で生成された tsconfig.json をほぼそのまま使い、必要になったときに target、outDir、strict、include / exclude あたりから少しずつ触っていくのがおすすめです。「この設定を変えると、コンパイル結果やエラーがどう変わるか」を自分の手で確かめていくと、tsconfig.json が単なる難しそうなファイルではなく、「自分の開発スタイルを反映するダッシュボード」に見えてきます。