TypeScript設定ファイルを使い分ける！devとprodの環境構築ガイド

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

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

TypeScriptを扱う上で欠かせないのがtsconfig.jsonというファイルです。これは、TypeScriptのプログラムをJavaScriptに変換する際のルールを決める設計図のようなものです。例えば、どのバージョンのJavaScriptに変換するか、どのフォルダにあるファイルを読み込むかといった細かな指定をここで行います。

パソコンを初めて触る方にとって、設定ファイルと聞くと難しく感じるかもしれませんが、料理のレシピ本のようなものだと考えてください。同じ材料でも、レシピを変えれば煮物になったり炒め物になったりするように、設定ファイルを変えることで、出力されるプログラムの性質を変えることができるのです。

2. なぜ環境ごとに設定を分ける必要があるのか？

2. なぜ環境ごとに設定を分ける必要があるのか？

プログラミングの世界には、開発環境（dev）と本番環境（prod）という二つの大きなステージがあります。開発環境は、プログラマーが自分のパソコンでプログラムを書いたり、動作確認をしたりする場所です。ここでは、間違いをすぐに見つけられるように、厳格なチェック機能やデバッグ用の情報をたくさん含める設定が好まれます。

一方で本番環境は、実際に一般のユーザーがアプリやウェブサイトを利用する場所です。ここでは、動作の速さやファイルの軽さが最優先されます。開発用の余計な情報を取り除き、最小限の構成で動かしたいのです。このように、目的が全く異なるため、一つの設定ファイルで使い回すよりも、環境ごとに専用の設定を用意するほうが効率的で安全です。

3. 設定ファイルの継承機能extendsを使おう

3. 設定ファイルの継承機能extendsを使おう

環境ごとに設定を分けるといっても、全ての項目を最初から書き直すのは大変です。そこで便利なのが、継承（extends）という仕組みです。これは、共通の基本設定を一つのファイルにまとめ、それを別のファイルが引き継いだ上で、必要な部分だけを書き換える手法です。

まずは、土台となる共通設定ファイルを作成してみましょう。ファイル名はtsconfig.base.jsonとするのが一般的です。ここに、開発環境でも本番環境でも変わらない基本的なルールを記述します。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

この設定では、最新のJavaScript形式（ES2020）で出力し、エラーチェックを厳しく（strict）行うように指定しています。これが全ての環境のベースとなります。

4. 開発用設定ファイルtsconfig.dev.jsonの作成

4. 開発用設定ファイルtsconfig.dev.jsonの作成

次に、開発環境専用の設定ファイルを作成します。開発中は、エラーが起きた場所を特定しやすくするためのソースマップという機能が必要になります。ベースの設定を引き継ぎつつ、開発に便利な機能だけを有効にします。ファイル名はtsconfig.dev.jsonにします。

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "./dist/dev"
  },
  "include": ["src/**/*"]
}

一番上のextendsという部分が、先ほど作ったベースの設定を読み込む魔法の言葉です。これにより、共通部分は書かずに済みます。sourceMapを有効にすることで、ブラウザ上でTypeScriptの元のコードを確認できるようになり、修正がとても楽になります。outDirは、変換されたファイルが保存される場所を指定しています。

5. 本番用設定ファイルtsconfig.prod.jsonの作成

5. 本番用設定ファイルtsconfig.prod.jsonの作成

今度は、本番環境向けの設定ファイルtsconfig.prod.jsonを作成しましょう。本番ではソースマップは不要ですし、コメントなども削除してファイルを軽くしたい場合があります。また、誤ってテストコードが混じらないように、読み込む範囲を制限することも重要です。

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "sourceMap": false,
    "removeComments": true,
    "outDir": "./dist/prod"
  },
  "exclude": ["**/*.test.ts"]
}

ここではremoveCommentsを有効にして、プログラム内のメモ書き（コメント）を消去してファイルを軽量化しています。また、excludeを使って、テスト用のファイルが本番のプログラムに含まれないように除外しています。これにより、安全でクリーンな本番用ファイルが出来上がります。

6. 設定ファイルを指定してコンパイルする方法

6. 設定ファイルを指定してコンパイルする方法

設定ファイルを用意しただけでは、パソコンはどれを使えばいいか迷ってしまいます。そこで、命令を出すときに「この設定ファイルを使ってね」と教えてあげる必要があります。通常はtscというコマンドを打ちますが、その後に-pというオプションを付けてファイル名を指定します。

開発用で実行する場合は、コマンドプロンプトやターミナルで以下のように入力します。

npx tsc -p tsconfig.dev.json

本番用で実行する場合は、以下のようになります。

npx tsc -p tsconfig.prod.json

これで、環境に合わせた最適な変換処理が行われます。毎回これを手で打つのは面倒なので、プロジェクトの管理ファイルであるpackage.jsonにショートカットとして登録しておくのがプロのやり方です。

7. package.jsonでのスクリプト管理

7. package.jsonでのスクリプト管理

package.jsonというファイルの中に、よく使うコマンドを短い名前で登録することができます。これにより、長いコマンドを覚える必要がなくなります。初心者の方でも、ここを設定しておけば、ボタン一つや短い言葉でプログラムを動かせるようになります。

{
  "scripts": {
    "build:dev": "tsc -p tsconfig.dev.json",
    "build:prod": "tsc -p tsconfig.prod.json"
  }
}

このように設定すると、次回からはnpm run build:devと打つだけで開発用の変換が始まり、npm run build:prodと打てば本番用の変換が自動で行われるようになります。非常に便利ですね。

8. フォルダ構成のベストプラクティス

8. フォルダ構成のベストプラクティス

設定ファイルを分ける際は、プロジェクトのフォルダの中身も整理整頓しておくことが大切です。一般的には、プログラムの元となるファイルはsrcというフォルダに入れ、変換後のファイルはdistというフォルダに出力するように設定します。環境ごとにファイルを分ける場合、出力先も分けることで、ファイルが混ざるトラブルを防げます。

例えば、以下のような構造になります。

• project-root/
  • tsconfig.base.json （基本）
  • tsconfig.dev.json （開発用）
  • tsconfig.prod.json （本番用）
  • src/ （ここにプログラムを書く）
  • dist/
    • dev/ （開発用の変換後ファイル）
    • prod/ （本番用の変換後ファイル）

このように整理することで、今どの環境のファイルを触っているのかが一目でわかるようになり、ミスを大幅に減らすことができます。整理整頓はプログラミング上達の第一歩です。

9. コンパイルエラーへの対処法

9. コンパイルエラーへの対処法

環境を分けたばかりのときは、設定がうまく読み込まれず、エラー画面が出てしまうことがあります。例えば「ファイルが見つかりません」といったエラーです。これは、設定ファイル内のパス（場所の指定）が間違っている場合がほとんどです。

特にextendsで指定するパスが、実際のファイルの場所と合っているか確認しましょう。また、includeやexcludeで指定したフォルダ名が、実際に作ったフォルダ名と一文字でも違っていると動きません。大文字と小文字も区別されるので、慎重に確認してみてください。もし動かなくなったら、まずはベースとなる一番シンプルな設定に戻してみるのが解決の近道です。