Reactを使用する場合、開発中にローカル環境の変数を読み込む必要があることがあります。例えば、APIキーなどの機密情報を保護するために、環境変数を使用することができます。しかし、Reactでは、環境変数を直接参照することはできません。そのため、この記事では、Reactでローカル環境の変数を読み込む方法について説明します。
1. dotenvを使用する方法
dotenvは、ローカル環境にある変数を読み込むためのライブラリです。まず、dotenvをインストールします。
npm install dotenv
そして、.envファイルを作成します。
API_KEY=xxxxxxxxxxxxxxxxxxxxx
このように、環境変数名と値を等号で区切って、ファイルに書き込みます。これで、Reactでこの変数を使用することができます。App.jsファイルに以下のように記述します。
import React from 'react';
import dotenv from 'dotenv';
dotenv.config();
function App() {
const apiKey = process.env.API_KEY;
return (
<div>
<h1>{apiKey}</h1>
</div>
);
}
export default App;
dotenv.config()を呼び出すことで、.envファイルから変数を読み込むことができます。そして、process.envオブジェクトを使用して、変数にアクセスします。
2. webpackを使用する方法
webpackを使用することで、環境変数を直接参照することができます。まず、webpackをインストールします。
npm install webpack webpack-cli webpack-dev-server dotenv-webpack --save-dev
そして、webpack.config.jsファイルを作成します。
const path = require('path');
const Dotenv = require('dotenv-webpack');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new Dotenv(),
],
};
このように、Dotenvプラグインを追加します。これにより、ローカル環境の変数が読み込まれます。そして、App.jsファイルに以下のように記述します。
import React from 'react';
function App() {
const apiKey = process.env.API_KEY;
return (
<div>
<h1>{apiKey}</h1>
</
import>
);
}
export default App;
webpackを使用する場合は、dotenvを使用する方法よりも簡単に環境変数を読み込むことができます。webpack.config.jsファイルに環境変数を追加することで、Reactで直接参照することができます。
まとめ
Reactでローカル環境の変数を読み込む方法について、dotenvとwebpackを使用する方法について説明しました。環境変数を使用することで、機密情報を保護し、セキュリティを強化することができます。Reactでは、環境変数を直接参照することはできませんが、dotenvとwebpackを使用することで、簡単に読み込むことができます。