カテゴリ: TypeScript 更新日: 2026/06/17

TypeScriptとExpressで環境変数を型安全に管理!dotenvとprocess.envの初心者向け完全ガイド

TypeScriptで環境変数(dotenv)の型管理方法
TypeScriptで環境変数(dotenv)の型管理方法

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

生徒

「Node.jsとExpressでWebアプリを作っているのですが、データベースのパスワードやAPIの鍵といった機密情報を安全に管理する方法はありますか?TypeScriptでコードを書いているので、型安全にスマートに扱いたいです!」

先生

「それなら環境変数という仕組みと、dotenvというライブラリを使うのが一般的です。TypeScriptでは、そのまま使うと中身が文字列なのか何なのか分からなくなってしまいますが、しっかり型を定義して管理することで、開発中のミスを劇的に減らすことができますよ。」

生徒

「環境変数や型安全に管理する方法について、具体的な設定の手順や実際のプログラムコードを詳しく教えてほしいです!」

先生

「承知いたしました。それでは、環境変数の基本からTypeScriptでの確実な管理方法まで、一歩ずつ順番に学んでいきましょう!」

1. 環境変数とdotenvの基本概念

1. 環境変数とdotenvの基本概念
1. 環境変数とdotenvの基本概念

プログラムを開発するとき、データベースに接続するための接続情報や、外部のサービスと連携するための秘密の鍵など、プログラムのコードの中に直接書きたくない重要な情報がたくさんあります。これらをコードに直接書いてしまうと、誤ってインターネット上に公開されたときに悪用される危険性があります。そこで登場するのが環境変数という仕組みです。

環境変数とは、パソコンのシステム側や、プログラムを実行する土台となる環境に一時的に保存しておく文字列のデータのことです。この環境変数をファイルで簡単に管理できるようにしてくれる補助ツールがdotenvというライブラリになります。これを使うことで、設定ファイルから安全に重要データを読み込むことが可能になります。

2. バックエンド開発における環境変数の必要性

2. バックエンド開発における環境変数の必要性
2. バックエンド開発における環境変数の必要性

Node.jsやExpressを使用したバックエンド開発、いわゆるサーバー側のシステム開発では、開発を行っている自分のパソコン、テストを行う検証用のサーバー、実際にユーザーがアクセスする本番のサーバーというように、複数の異なる環境でプログラムを動かします。環境ごとに、接続するデータベースの場所やポート番号と呼ばれる通信の窓口番号を変更する必要があります。

環境変数を使用すれば、プログラムのコード自体はまったく同じもののまま、設定情報だけを切り替えることができるため、効率的かつ安全にシステムを運用できるようになります。近代的なWebアプリケーション開発において、この仕組みを導入することは必須の知識となっています。

3. 開発環境の準備と必要なパッケージのインストール

3. 開発環境の準備と必要なパッケージのインストール
3. 開発環境の準備と必要なパッケージのインストール

それでは、実際に環境を構築していきましょう。まずはプロジェクトの初期化を行い、必要な部品をインストールします。ここでは、Node.jsの環境で動作するWebサーバーを構築するためのExpressと、環境変数を扱うためのdotenv、そしてTypeScriptを動かすための各種ツールを導入します。

コマンドプロンプトやターミナルと呼ばれる、パソコンに文字で命令を出す画面を開き、下記のコマンドを順番に実行していきます。これにより、開発に必要なファイル群が自動的にダウンロードされて配置されます。


npm init -y
npm install express dotenv
npm install -D typescript @types/node @types/express ts-node
npx tsc --init

これで準備は完了です。これらのコマンドによって、プログラムの依存関係を記録するファイルや、TypeScriptの設定ファイルが自動的に作成されます。

4. ドットエンブファイルの作成と記述ルール

4. ドットエンブファイルの作成と記述ルール
4. ドットエンブファイルの作成と記述ルール

次に、設定情報を書き込むための専用のファイルを作成します。プロジェクトの一番上の階層に、ドットから始まる特別な名前のファイルを作成します。ファイル名は必ず半角英数字で指定してください。記述する際は、設定の名前と、その中身を等号で結ぶ形式をとります。

このファイルの中に、サーバーを起動するポート番号や、データベースへの接続文字列、暗号化に使用する秘密鍵などを定義します。このとき、文字の前後には余計な空白を入れないように注意してください。実際の記述例は以下のようになります。


PORT=3000
DATABASE_URL=mongodb://localhost:27017/myapp
API_KEY=secret_key_12345

このファイルに記述された情報は、プログラムが起動したときに自動的に読み込まれ、システム内のメモリに一時的に格納されることになります。

5. 通常のプロセス環境変数アクセスとその課題

5. 通常のプロセス環境変数アクセスとその課題
5. 通常のプロセス環境変数アクセスとその課題

Node.jsにおいて、環境変数にアクセスするときは、通常はオブジェクトと呼ばれるデータ構造のなかの特定の場所を参照します。しかし、TypeScriptでこれをそのまま実行しようとすると、大きな問題が発生します。TypeScriptは、その変数がどのような種類のデータなのかを厳しくチェックする性質を持っていますが、標準の状態では、すべての環境変数が文字列、または存在しない可能性があるデータとして扱われてしまいます。

そのため、プログラムの中で数値として扱いたいポート番号であっても、型チェックの機能が働き、予期せぬエラーを引き起こしたり、入力ミスに気づけなかったりすることがあります。実際の標準的なアクセス方法の例を見てみましょう。


import express from 'express';
import * as dotenv from 'dotenv';

dotenv.config();

const app = express();
const port = process.env.PORT;

app.listen(port, () => {
    console.log("サーバーが起動しました");
});

上記のコードでは、ポート番号が文字列として認識されてしまう可能性があり、大規模なシステム開発ではバグの原因になります。

6. インターフェースを使用した型定義の拡張

6. インターフェースを使用した型定義の拡張
6. インターフェースを使用した型定義の拡張

TypeScriptの強力な機能である型定義の拡張を使って、環境変数の型を事前にパソコンへ教えてあげる仕組みを構築します。グローバル空間と呼ばれる、プログラム全体の共通の設定を上書きすることで、特定の名前の環境変数が、確実に特定の型であることを保証させることができます。

これにより、コードを書いている最中に、入力の補完候補が表示されるようになり、スペルミスを防ぐことができるようになります。専用の定義ファイルを作成し、以下のように記述を追加します。


declare global {
    namespace NodeJS {
        interface ProcessEnv {
            PORT: string;
            DATABASE_URL: string;
            API_KEY: string;
        }
    }
}

export {};

このように設定することで、開発ツールが環境変数の名前を自動で認識してくれるようになり、開発効率が大幅に向上します。

7. バリデーション関数による値のチェックと確定

7. バリデーション関数による値のチェックと確定
7. バリデーション関数による値のチェックと確定

型を定義するだけでなく、プログラムが起動した瞬間に、本当に必要な設定値がすべて正しく揃っているかをチェックする防衛的なプログラム、いわゆるバリデーション機能を組み込むことが非常に重要です。もし設定が漏れていた場合は、プログラムをその場で安全に停止させることで、運用中の大事故を防ぐことができます。

文字列で読み込まれたポート番号を、安全に数値に変換する処理も含んだ、実践的な設定読み込み専用のプログラムファイルを作成します。この方法が、TypeScriptにおける最も推奨される型管理の手法の一つです。


import * as dotenv from 'dotenv';
dotenv.config();

interface Config {
    port: number;
    databaseUrl: string;
    apiKey: string;
}

export const getConfig = (): Config => {
    const portStr = process.env.PORT;
    if (!portStr) {
        throw new Error("ポート番号が設定されていません");
    }

    const databaseUrl = process.env.DATABASE_URL;
    if (!databaseUrl) {
        throw new Error("データベースのURLが設定されていません");
    }

    const apiKey = process.env.API_KEY;
    if (!apiKey) {
        throw new Error("APIキーが設定されていません");
    }

    return {
        port: parseInt(portStr, 10),
        databaseUrl: databaseUrl,
        apiKey: apiKey
    };
};

この関数を呼び出すことで、必要なデータがすべて適切な型で揃っていることが確定し、その後のプログラムを安心して書き進めることができます。

8. エクスプレスサーバーでの安全な環境変数の運用

8. エクスプレスサーバーでの安全な環境変数の運用
8. エクスプレスサーバーでの安全な環境変数の運用

最後に、先ほど作成した安全な設定読み込み関数を、実際のExpressサーバーの起動処理に組み込んでみましょう。これにより、すべての設定情報が完全に型安全な状態となり、バックエンドの開発が非常に快適になります。

メインとなるプログラムファイルに以下のように記述し、サーバーを起動します。エラー処理が内包されているため、万が一設定ファイルに不備があれば、起動時に分かりやすいエラーメッセージが出力されます。


import express from 'express';
import { getConfig } from './config';

const app = express();

try {
    const config = getConfig();

    app.get('/', (req, res) => {
        res.send('型安全なサーバーが稼働中です');
    });

    app.listen(config.port, () => {
        console.log("指定されたポートで通信を開始しました");
    });
} catch (error) {
    console.error("起動エラーが発生しました");
}

プログラムを実行すると、以下の結果が画面に表示され、安全にWebサーバーが立ち上がったことを確認できます。


指定されたポートで通信を開始しました

以上の手順を踏むことで、初心者の方でも迷うことなく、TypeScriptによる安全で堅牢なバックエンド開発の基盤を構築することができます。環境変数の適切な管理は、安全なアプリケーション運用のための第一歩です。

関連記事:
カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptのスコープとは?ローカル変数・グローバル変数の違いと使い分け
New2
TypeScript
TypeScriptで型の合成時に発生する型エラーの対処法を徹底解説!初心者にもわかりやすく解説
New3
TypeScript
TypeScriptでAPI呼び出しをラップするユーティリティ関数の設計完全ガイド!初心者向けにAxiosやFetchの使い方を解説
New4
TypeScript
TypeScriptのMapped Typesとインターフェースの連携方法を徹底解説!初心者でも理解できる型変換の基本
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのループで無限ループが起きる原因と対策を初心者向けに徹底解説!
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptの文字列の長さを取得する(lengthプロパティ)
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptのファイル分割とimport/exportの基本を徹底解説!初心者でも安心のやさしい入門
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptでクエリパラメータを取得する方法を完全解説 URLSearchParamsの使い方を初心者向けに丁寧に説明
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのプリミティブ型と参照型の違いを初心者向けに解説