https://zenn.dev/mutex/articles/quit-dotenv-file

mutex CEO の熊澤です。

開発には「環境設定ファイル」がつきものです。プロジェクト直下などに.env という名前のファイルを置いて、コードから参照できるようにします。

最近では、環境別に.env.development や.env.production などのファイルを作って運用する形態も増えています。

弊社では、TypeScript+Node.js によるバックエンド開発をしていますが、node では process.env で環境変数を参照します。しかし、process.env の型は 以下のように定義されており、型付けが弱く、補完が効かないという難点があります。また、string しか表現できないため、数値などはパースする必要があるのも面倒です。

interface ProcessEnv {
    [key: string]: string | undefined;
}

本稿では、環境設定ファイルを TypeScript ベースで書き、型付け可能にする方法を提案します。

1. 対象読者

• TypeScript+Node.js+AWS でバックエンド開発をしている方
• TypeScript の Decorator 機能を使用している方

2. 満たすべき要件

さて、環境変数の ts 化にあたり、満たすべき要件は以下の通りです。

• 簡潔性 記述に際して、.env ファイルと比べてそれほど記述量が多くならないこと
• 実行可能性 ランタイムで実行エラーを吐かないこと。具体的には、実行時に環境変数が最初に格納され、必ず定義した環境変数が存在する状態であること。（言い換えると、環境変数が格納されるより前に環境変数を参照することがないこと）

実は、二つ目の実行可能性を実現するのに、TypeScript の Decorator 機能が効いています。それについては後ほど説明します。

3. 完成形

実装の説明の前に、完成形をみていただきましょう。環境変数の設定ファイルは次のようになります。

export class Env extends BaseEnv {
  // 環境ごとに変数を設定することができる
  @EnvVar({ local: 'value1', dev: 'value2', stg: 'value3', prod: 'value4' })
  static readonly key1: string;

  // string以外の値も設定することができる
  @EnvVar({ local: 1, dev: 2, stg: 3, prod: 4 })
  static readonly key2: number;

  // 環境に依存しない変数はまとめて設定できる
  @EnvVar({ default: 'default value' })
  static readonly key3: string;
}

どうでしょうか。.env ファイルを環境ごとに複数用意するよりも簡潔に表現できているのではないかと思います。実際の使い方も非常に簡潔です。