TypeScriptの設定ファイルtsconfig.jsonを使いこなす！extendsによる複数構成の切り分け完全ガイド

TypeScriptで複数のtsconfig（extends）を使い分ける構成例

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

生徒

「TypeScriptの学習を始めましたが、tsconfig.jsonという設定ファイルが難しくて困っています。本番用やテスト用で設定を分けたいのですが、どうすればいいですか？」

先生

「それは非常に重要なポイントですね。TypeScriptには、共通の設定をベースにしながら、用途に合わせて設定を上書きできるextendsという仕組みがあります。」

生徒

「上書き、ですか？それを使えば複数のファイルを一つずつ全部書かなくて済むのでしょうか？」

先生

「その通りです！基礎となる設定を一つ作り、それを継承することで、効率的に管理できます。今回はその構成例を詳しく解説しますね。」

1. TypeScriptの設定ファイルtsconfig.jsonとは？

TypeScriptを使ってプログラムを書く際、一番の基本となるのがtsconfig.jsonという名前のファイルです。これは、TypeScriptのソースコードをJavaScriptに変換（コンパイル）するときに、「どのようなルールで変換するか」を細かく指定するための指示書のような役割を果たします。

パソコンを初めて触る方にとって「設定ファイル」と聞くと難しく感じるかもしれませんが、料理のレシピ本のようなものだと考えてください。「材料をどう切るか（コードをどう解釈するか）」「火加減はどうするか（エラーの厳しさをどうするか）」といった手順が書かれています。このファイルが正しく設定されていないと、TypeScriptはうまく動いてくれません。

2. 設定を使い分ける必要がある理由

なぜ、設定ファイルを複数に分ける必要があるのでしょうか。それは、プログラムを作る段階（開発環境）と、実際にみんなに使ってもらう段階（本番環境）、あるいはプログラムが正しく動くか確認する段階（テスト環境）で、求められるルールが異なるからです。

例えば、開発中は「多少の書き方のミスがあっても、まずは動かしてみたい」と思うことがあります。一方で、本番用のプログラムを作るときは「絶対にミスがないように、一番厳しいチェックをしてほしい」と考えるのが普通です。これを一つのファイルで管理しようとすると、その都度中身を書き換えなければならず、非常に手間がかかり、ミスの原因にもなります。そこで、共通部分は一つにまとめ、違う部分だけを別ファイルにする「継承（extends）」という機能が役立ちます。

3. extends（継承）の仕組みを理解しよう

プログラミングの世界には「継承（けいしょう）」という言葉があります。これは、あるものの特徴を引き継いで、新しいものを作る仕組みのことです。TypeScriptの設定ファイルでも、この「継承」を使って「ベースとなる設定」を他のファイルで使い回すことができます。

"extends": "./base.json"のように記述することで、ベースとなるファイルの内容をすべて読み込み、その上で自分が必要な部分だけを書き換えることができます。これは、学校の制服のようなものです。全員が同じ制服（ベース設定）を着ていますが、名札（個別設定）だけは自分の名前に変える、といったイメージです。これにより、同じことを何度も書く無駄が省けます。

4. 共通設定となるベースファイルの作成例

まずは、すべての環境で共通して使いたい設定を記述した、土台となるファイルを作成します。通常、tsconfig.base.jsonという名前にすることが多いです。ここでは、基本的なJavaScriptのバージョンや、エラーチェックの厳しさを設定します。


{
  "compilerOptions": {
    "target": "ES2020",         // 変換後のJavaScriptのバージョンを指定
    "module": "CommonJS",       // プログラムの読み込み方式を指定
    "strict": true,             // プログラムの書き方を厳しくチェックする
    "esModuleInterop": true,    // 外部ライブラリを使いやすくする設定
    "skipLibCheck": true        // ライブラリの細かなチェックを飛ばして高速化
  }
}

上記のコードにあるstrict: trueは、TypeScriptの大きな特徴の一つです。これは「型（データの種類）」を厳密にチェックすることを意味します。初心者のうちは大変に感じるかもしれませんが、これがあるおかげでバグを未然に防ぐことができます。

5. 開発環境用の設定ファイルを使い分ける

次に、プログラミング作業中に使用する開発用の設定ファイルを作ります。ファイル名はtsconfig.dev.jsonなどとします。このファイルでは、先ほどのベース設定を読み込みつつ、開発に便利な機能を追加します。


{
  "extends": "./tsconfig.base.json", // ベース設定を引き継ぐ
  "compilerOptions": {
    "sourceMap": true,    // 変換前のコードと後のコードを紐づけてデバッグしやすくする
    "outDir": "./dist/dev" // 変換したファイルの出力先を開発専用フォルダにする
  },
  "exclude": ["node_modules", "**/*.test.ts"] // 余計なファイルは読み込まない
}

ここで登場したsourceMapは、エラーが起きた場所を特定しやすくするための「地図」のような役割を持ちます。これがあることで、ブラウザなどでデバッグ（間違い探し）をする際に、TypeScriptのどの行でミスがあったかが一目でわかるようになります。

6. 本番環境用の厳格な設定構成

実際にWebサイトやアプリとして公開するための「本番用」の設定ファイルです。ファイル名はtsconfig.prod.jsonとしましょう。本番用では、デバッグ用の情報を消して、動作を軽くしたり、より厳格なチェックを行ったりします。


{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "sourceMap": false,      // 本番用では不要な地図情報を削除して軽量化
    "removeComments": true,  // プログラム内のメモ書き（コメント）を削除
    "outDir": "./dist/prod"  // 本番専用の出力フォルダ
  }
}

removeCommentsをtrueにすることで、開発者が書いたメモ書き（コメント）をすべて削除して、JavaScriptファイルのサイズを小さくできます。これにより、インターネット経由でアプリを読み込むスピードが少しだけ速くなります。小さな積み重ねが、快適なアプリ作りに繋がります。

7. テスト環境専用の設定で品質を高める

プログラムが正しく動くかを自動でチェックする「テスト」という工程があります。テスト用のファイルは通常、本番のプログラムとは別の場所に置くことが多いため、テスト専用の設定が必要になります。ファイル名はtsconfig.test.jsonとします。


{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "types": ["jest", "node"] // テストで使う特別な道具（ライブラリ）を認識させる
  },
  "include": ["src/**/*.ts", "test/**/*.ts"] // テストファイルも読み込み対象に入れる
}

includeは、どのファイルをTypeScriptがチェックするかを指定する項目です。テスト用の設定では、本番のコードだけでなく、テスト用に書いたコードもしっかりチェック対象に入れることで、テストコード自体の間違いも防ぐことができます。

8. 複数の設定ファイルを切り替えて実行する方法

設定ファイルを複数作っただけでは、パソコンはどう動けばいいかわかりません。コマンドを入力して実行する際に、「どの設定ファイルを使うか」を教えてあげる必要があります。通常は、ターミナル（コマンドを入力する画面）で以下のように指示を出します。

開発用の設定で動かしたい場合は、以下のようなコマンドを使います。


tsc --project tsconfig.dev.json

また、本番用の設定でファイルを書き出したいときは、以下のように入力します。


tsc --project tsconfig.prod.json

このように--project（または短縮して-p）という言葉を付け加えることで、その時々に最適な設定を選んでコンパイルすることができます。これにより、一つのソースコードから、用途に合わせた最適なJavaScriptファイルを生成することが可能になります。

9. 初心者がハマりやすい注意点と用語解説

TypeScriptの設定でよくある落とし穴について解説します。まず、「パス」という言葉です。これは、パソコンの中にあるファイルの住所のようなものです。./というのは「今いる場所」を指します。設定ファイル同士の場所がずれていると、extendsがうまく動かないので注意しましょう。

次に、compilerOptions（コンパイラ・オプション）についてです。これは「変換の設定」という意味です。TypeScriptはそのままでは動かないため、JavaScriptに翻訳する必要があります。その翻訳の仕方を細かく決めるのがこの項目です。最初からすべてを覚える必要はありません。「困ったときに調べて、少しずつ設定を書き足していく」という姿勢が、上達への近道です。

最後に、設定を分けることでファイルが増えて管理が大変そうに見えますが、実際にはその逆です。共通化しておくことで、何か一つ基本ルールを変えたいときに、一つのベースファイルを直すだけで、開発用も本番用も一気に修正が反映されます。これこそが、プログラミングにおける「効率化」の醍醐味です。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。