環境変数は、プログラムの外部で設定される変数です。主にクラウドプロバイダやオペレーティングシステムを介して設定されます。

Node.jsにおいて、環境変数を利用することで、URLや認証キー、パスワードなどの頻繁に変更されない設定を安全かつ便利に構成することができます。これにより、プログラム内部のハードコーディングされた値を避け、柔軟性とセキュリティを向上させることができます。環境変数を使用することで、プログラムを異なる環境で簡単に設定でき、再利用性も高まります。

またGitHubなどにリポジトリを公開する際はこの.envファイルを.gitignoreファイルに登録して大事なキーなどを公開しないようにすることが一般的です。

環境変数の作成方法

Node.jsでは、環境変数はデフォルトでサポートされており、envオブジェクトを介して利用することができます（このオブジェクトはprocessグローバルオブジェクトの一部です）。

具体的に使ってみるために、NodeのREPL（対話型シェル）で環境変数を自分で作成することができます。そのためには、process.envオブジェクトに直接変数を追加するだけです。

例えば、スーツケースパスワードを保存するための環境変数を作成する場合は、次のように変数に値を割り当てます：process.env.LUGGAGE_COMBO=“12345”。

（ちなみに、環境変数は通常、全て大文字で書かれるのが一般的です。）

ただし、アプリケーションでは通常、NodeのREPLを使って環境変数を作成することはありません。実際のアプリケーションで環境変数を作成するには、DotEnvなどのパッケージを使用することが一般的です。これにより、プロジェクト内の環境変数を簡単に管理できます。

NodeのREPL（Read-Eval-Print Loop）は、Node.jsの対話型シェル環境を指します。REPLは、コマンドを入力し、それを評価（実行）、結果を表示し、次のコマンドの入力を待ち受けるというループ形式で動作します。

REPLは、開発者がNode.jsのコードを素早くテストしたり、JavaScriptの試し書きやデバッグを行ったりするための便利なツールです。コマンドラインでnodeと入力すると、デフォルトでREPLが起動します。

REPLは、JavaScriptのコードを直接実行し、その結果を即座に表示するため、コードの試行錯誤や動作確認に役立ちます。また、変数の値を確認したり、関数をテストしたりする際にも便利です。

REPLは、Node.jsの開発やデバッグの初期段階で特に役立つツールですが、実際のアプリケーションの開発では、通常はエディタや開発環境を使用してコードを作成・実行します。

DotEnvの使い方

DotEnvは、軽量なnpmパッケージであり、.envファイルに定義された環境変数を自動的にprocess.envオブジェクトに読み込みます。

DotEnvを使用するには、まずコマンドを使用してインストールします: npm i dotenv。その後、アプリ内で以下のようにDotEnvをrequireして設定します: require('dotenv').config()。

なお、一部のパッケージ（例: Create React App）にはDotEnvが既に含まれている場合があり、クラウドプロバイダによっては環境変数の設定方法が異なる場合もあります。したがって、この記事のアドバイスを実行する前に、使用しているパッケージやプロバイダのドキュメントを確認してください。

.envファイルの作成の仕方

DotEnvをインストールして設定した後、ファイル構造のトップレベルに.envというファイルを作成します。ここに、すべての環境変数をNAME=valueの形式で記述します。例えば、ポート変数を3000に設定する場合は、以下のように記述します: PORT=3000。

.envファイルで複数の変数を宣言することもできます。例えば、以下のようにデータベース関連の環境変数を設定することができます:

DB_HOST=localhost
DB_USER=admin
DB_PASSWORD=password


文字列を引用符で囲む必要はありません。DotEnvが自動的に処理してくれます。

このファイルを作成したら、認証キーやパスワードなどの機密データが含まれている可能性があるため、GitHubにプッシュしないように注意してください。.gitignoreファイルに追加して、誤って公開リポジトリにプッシュされないようにします。

環境変数にアクセスする方法

環境変数へのアクセスは非常に簡単です。グローバルにアクセスできるprocess.envオブジェクトに格納されているため、process.env.KEYのパターンを使ってアクセスすることができます。

もし環境変数の値を変更する必要がある場合は、単に.envファイルを編集すればOKです。

process is not defined エラー

process is not defined エラーは、おそらくブラウザ環境でprocessオブジェクトにアクセスしようとした場合に発生するものです。processオブジェクトは通常、Node.jsの環境で利用されるグローバルオブジェクトですが、ブラウザ環境では直接使用することはできません。

もしブラウザ環境で環境変数を扱う必要がある場合は、以下の方法を検討してください:

  1. .env ファイルを直接ブラウザで使用することはできません。代わりに、環境変数を直接JavaScriptファイルに埋め込むか、別の方法で変数を管理する必要があります。
  2. ビルドツールやフレームワークに組み込まれた機能を使用して、ブラウザ環境での環境変数の管理を行います。たとえば、Vue.jsの場合は.envファイルを使用することができますが、ビルド時に環境変数は静的に注入されます。
  3. サーバーサイドのプログラム (例: Node.js) を使用して、ブラウザとの間で環境変数をやり取りするAPIを作成することもできます。ブラウザからAPIを呼び出し、必要な環境変数を取得する方法です。

Viteを使って.envを使う

これは2つの環境変数を定義しており、VITE_でプレフィックスが付いているものはVueクライアントアプリからアクセス可能であり、プレフィックスのないものはサーバーサイドのコードからのみアクセス可能です。

#Vueで使用可能
VITE_MY_ENV_VARIABLE=apikey

#Nuxtで使用可能
SERVER_SIDE_ONLY_VAR=testkey

Vueでインポートしたい場合はこのように記載しましょう。

import.meta.env.VITE_MY_ENV_VARIABLE