# はじめに
Reactでの.envファイルの使い方についてメモとして残しておきます。

# Reactにおける.envファイルの使い方
.envファイルにはアプリケーションで使用する、環境変数や設定値を設定することが多いです。

以下がサンプルコードになります。
![img](/mosaic-code.jpg)
Reactでは、頭文字に「REACT_APP_」を付けないといけません。
それでは呼び出してみましょう。
![img](/mosaic-code.jpg)
呼び出すときは、「process.env.(環境変数名)」という風に呼び出します。
画面を確認していきましょう。

![スクリーンショット 2023-11-09 22.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/940a995a-9588-9c4a-7f12-6c602f95a9d9.png)

すると、画像のように.envファイルの変数の値を取得することができました!

ちなみに、APIのシークレットキーなどの情報は、管理すべきではないそうです。
※gitignoreで隠しファイルとして設定しても、ビルド時のログを確認すると見れてしまうらしいです。

https://qiita.com/ken-s/items/b6190283db28295155bb

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# はじめに
Reactでの.envファイルの使い方についてメモとして残しておきます。

# Reactにおける.envファイルの使い方
.envファイルにはアプリケーションで使用する、環境変数や設定値を設定することが多いです。

以下がサンプルコードになります。
``` .env
REACT_APP_SAMPLE_VALUE=Hello World
```
Reactでは、頭文字に「REACT_APP_」を付けないといけません。
それでは呼び出してみましょう。
```
export const Sample = () => {
  const envValue = process.env.REACT_APP_SAMPLE_VALUE;

  return (
    <div>
        <p>{envValue}</p>
    </div>
  );
};
```
呼び出すときは、「process.env.(環境変数名)」という風に呼び出します。
画面を確認していきましょう。

![スクリーンショット 2023-11-09 22.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/940a995a-9588-9c4a-7f12-6c602f95a9d9.png)

すると、画像のように.envファイルの変数の値を取得することができました!

ちなみに、APIのシークレットキーなどの情報は、管理すべきではないそうです。
※gitignoreで隠しファイルとして設定しても、ビルド時のログを確認すると見れてしまうらしいです。

https://qiita.com/ken-s/items/b6190283db28295155bb

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

Reactにおける.envファイルの使い方

続きを読むには単価診断を受けてください（30秒）