【React(初心者向け)】外部ファイルへ値を保存・取り出す！環境変数 process.envの導入、使い方

（最終更新月：2021年8月）

「データベースではなく、外部のファイルに値を保存して.jsファイルで取り出したい！」

「シークレットキーなど直接コードに記述したくない！」

という方へ向けて、外部ファイルへ保存した文字列を.jsファイルから取り出す方法をお伝えします

【著者プロフィール】

【Python・Django歴】10年 x 【営業マン歴】11年

HP作成、社内システムの構築、コンサルティング

当ブログを通じて、下記アプリの作り方、コード等を公開、解説しています

☆日報アプリ「D-Repo」（デモ版）→こちら

※Djangoをベースに作成したアプリです

☆便利ツールアプリ「Tool Station」→こちら

※Django REST frameworkとReactで作成しているアプリです

✔初期費用ゼロ／月9,800円でWebデザインが学べる

デザインを習得するためには、客観的なフィードバックと改善が不可欠です。

以下の記事ではこんなWebデザインスクールをご紹介しています。

デザナルはトップデザイナーからレビューがもらえる、格安のWebデザインスクールです。

詳細をまとめた記事もございますので、ぜひご覧ください。

「.env」ファイルを作成します

プロジェクトフォルダ直下（Reactの場合はpackage.jsonと同ファイル内）に、

.env

というファイルを作成します

最初に「 . (ドット)」をつけるのを忘れずに！」

.env内で、

変数名=保存したい文字列

と記述します

文字列の前後に「”」「’」は不要です

例えば、BASE_URL変数に「http://localhost:8000」を保存したい場合、

BASE_URL=http://localhost:8000

などとします

process.env(“変数名”)

で値を取り出しましょう！

const BASE_URL = process.env.BASE_URL

.envファイルに記述するのは外に公開したくない情報ですので、

.gitignoreに.envを追記するのを忘れずに！

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい！」
「Djangoで開発したアプリをWebで公開するにはどうするの？」

という方は必見です！