👀

環境変数の設定と利用方法

2025/04/26に公開

開発環境を整えている際に、API の URL と API キーを環境変数に設定したくなりました。
そこで Vite で環境変数を設定してみようと思います。環境変数を設定するにあたって調べたことも踏まえて手順のおさらいをしましょう！

環境変数とは

プログラミングの学習をしていると「変数」という言葉は必ずできますよね。それに、「変数は値を入れておく箱のようなもの」として紹介されていることが多いかと思います。
環境変数も同様に、「箱」としてイメージするのが分かりやすいです。
肝心な「箱」の中身は、アプリの設定情報や外部に公開したくないものを代入します。
例えば・・・

API のキー
機能の切り替え(開発用と本番用の機能)
などです。

もう少し具体的な例を挙げるとすれば、
開発用にコンポーネントを用意しているけど、本番用では公開したくないコンポーネントがある。
という場合に、デプロイ時にいちいちコメントアウトするのも面倒ですよね。
そんな時に環境変数としてフラグを 1 つ用意しておけば「開発用では表示する、本番用用では表示しない」という設定がフラグだけで完了できます！

Vite での環境変数を設定する

まずはディレクトリ構成です。

/
├─ node_modules
├─ public
├─ src
│  ├─ components
│  └─ ・・・
├─ package.json
├─ package.lock.json
├─ tsconfig.json
├─ README.md
├─ .gitignore
└─ vite.confgi.ts

プロジェクト作成後に一番外側のルートディレクトリで、.envファイルを作成します。tsconfig.jsonなどと同じ階層です。

 /
 ├─ node_modules
 ├─ public
 ├─ src
 │  ├─ components
 │  └─ ・・・
+├─ .env
 ├─ package.json
 ├─ package.lock.json
 ├─ tsconfig.json
 ├─ README.md
 ├─ .gitignore
 └─ vite.confgi.ts

この.envファイルに環境変数を記述していきます。
今回は例として環境変数を追加します。

.env

VITE_SAMPLE_1 = "環境変数です！"

Vite で環境変数を利用する場合は頭文字をVITEにしないと読み込まれません

環境変数を読み込む

では設定した環境変数を読み込んで見ましょう。

App.tsx

function App() {
  return (
    <h1>{import.meta.env.VITE_SAMPLE_1}</h1>
      );
}

export default App;

ブラウザ上で設定した環境変数の中身"環境変数です！"が表示されていますね。

これで環境変数の設定が出来ました！

おまけ

冒頭では、「開発用にコンポーネントを用意しているけど、本番用では公開したくないコンポーネントがある」という例を使って環境変数を紹介しました。
Vite ではmodeというオプションを付与することによって、開発用環境、本番用環境をより厳密に切り替えることができます。
オプションの切り替えはファイル名で行います。
では、例として.env.developmentファイルを用意します。

.env.development

VITE_SAMPLE_DEV = "developmentの環境変数です！"

modeの切り替えはコマンド実行時のスクリプトで変更できます。

package.json

  "scripts": {
    "dev": "vite",
+   "build-test": "vite build --mode development",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

この状態でbuild-testを実行すると、開発用の環境変数でビルドされVITE_SAMPLE_DEVに代入されている"developmentの環境変数です！"が確認できるようになります。

環境変数をうまく利用してテストなどの環境切り替えを楽にしていきましょう・・・！

環境変数とは

Vite での環境変数を設定する

環境変数を読み込む

おまけ

Discussion