はじめに
Vite は高速な開発環境を提供するフロントエンドツールであり、React との相性も抜群です。本記事では、Vite を使用した React プロジェクトに .env ファイルを導入し、環境変数を管理する方法を初心者向けに解説します。
.env ファイルとは？
.env ファイルは、環境変数を定義するためのファイルです。アプリケーションの機密情報や設定を外部ファイルに保存することで、コードの可読性とセキュリティを向上させることができます。
.env ファイルの作成
プロジェクトのルートディレクトリに .env ファイルを作成し、環境変数を定義します。
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vite App
注意：Vite の環境変数は
VITE_というプレフィックスを付けないと認識されません。
環境変数の使用方法
React コンポーネント内で環境変数を使用するには、import.meta.env を利用します。
function App() {
return (
<div>
<h1>{import.meta.env.VITE_APP_TITLE}</h1>
<p>API URL: {import.meta.env.VITE_API_URL}</p>
</div>
);
}
export default App;
環境ごとの設定
複数の環境に応じた .env ファイルを用意することも可能です。
.env（デフォルト）.env.development（開発環境用）.env.production（本番環境用）
例えば、.env.development に以下のように設定すると、開発環境でのみ適用されます。
VITE_API_URL=https://dev-api.example.com
環境変数の適用確認
環境変数が適用されているか確認するには、以下のコマンドを実行します。
echo "import.meta.env.VITE_API_URL:" $(npm run dev | grep VITE_API_URL)
また、ブラウザの DevTools の Console で import.meta.env を確認することも可能です。
.env ファイルの管理とセキュリティ
.envファイルは.gitignoreに追加して Git にコミットしないようにします。- 環境変数を適切に管理するために、
.env.exampleというサンプルファイルを作成し、プロジェクトに含めておくと便利です。
# .gitignore に追加
.env# .env.example（参考用）
VITE_API_URL=
VITE_APP_TITLE=
まとめ
Vite + React で .env ファイルを導入することで、環境変数を簡単に管理できるようになります。開発環境と本番環境で適切に環境変数を分け、プロジェクトの可読性やセキュリティを向上させましょう。
ポイントのまとめ
.envで環境変数を定義（VITE_プレフィックス必須）import.meta.envで環境変数を参照- 環境ごとの
.envファイルを作成可能 .envを.gitignoreに追加してセキュリティ対策
ぜひ活用してみてください。
コメント