アプリを作っていると、必ずぶつかる問題があります。APIキーやパスワード、外部サービスの接続先といった大事な情報を、いったいどこに置けばいいのか、という問題です。プログラムの中に直接書けば動きはしますが、それが後で大きなトラブルの種になります。
その答えのひとつが、この記事で扱う環境変数です。よく .env というファイルとセットで語られます。なお、APIキーをブラウザなどのクライアント側に書いてはいけない理由そのものはAPIキーをクライアント側に書いてはいけない理由で詳しく扱っているので、この記事では環境変数とは何か、どう使うのかという土台の部分を、入門から実務まで掘り下げます。
結論:環境変数はプログラムの外側に置く設定値の入れ物
先に結論を言うと、環境変数とは、プログラム本体の外側に置いておく設定値の入れ物です。
APIキーやパスワードのような秘密の情報、あるいは接続先アドレスのように動かす場所によって変わる設定を、プログラムのコードから切り離して持たせる仕組みだと考えてください。プログラムは実行されるときに、外側に置かれたこの値を読みにいきます。コードの中には値そのものを書かず、この設定を読み込むという指示だけを書いておく、というイメージです。
なぜ使うのか:コードに直接書くと3つの困りごとが起きる
秘密の情報や設定をコードの中に直接書き込むと、大きく3つの困りごとが起きます。
1つ目は、公開したときに漏れることです。作ったコードをGitHubなどにアップロードして共有すると、その中に書いたAPIキーやパスワードも一緒に世界へ公開されてしまいます。コードは見せたいけれど、鍵は見せたくない。この2つが混ざっていると分けられません。
2つ目は、場所ごとに書き換えが必要になることです。手元のパソコンで動かすとき、本番で公開するときとで、接続先やキーが変わることはよくあります。値をコードに直接書いていると、動かす場所を変えるたびにコードを書き直すことになり、手間もミスも増えます。
3つ目は、共有しにくいことです。チームで開発するとき、あるいは自分の作業を誰かに引き継ぐとき、コードの中に個人の秘密情報が埋まっていると、そのまま渡すわけにいきません。
環境変数として外に切り離しておけば、コードは安心して共有でき、動かす場所に合わせて設定だけを入れ替えられます。安全性と、切り替えの手軽さの両方が得られるわけです。
.envファイルと.gitignore:手元の設定を書く場所と、上げない指定
手元のパソコンで開発するとき、環境変数をまとめて書いておく定番のファイルが .env です。名前のとおり、environment(環境)の略で、ここに設定をキーと値の形で並べて書いておきます。プログラムは起動時にこのファイルを読み込み、書かれた値を環境変数として使います。
ただし、この .env には秘密情報が入っています。そのままGitHubなどにアップロードしてしまうと、外に置いた意味がなくなってしまいます。そこで登場するのが .gitignore です。
.gitignore は、アップロードしないものを指定するためのファイルです。ここに .env と書いておくと、GitHubなどに上げるときにこのファイルを対象から外してくれます。つまり、コードは共有するけれど、秘密情報の入った .env は自分の手元だけにとどめておく、という状態を作れます。
本番環境ではどこに置くか:.envを持ち込まず、サービス側に登録する
ここでよくある勘違いがひとつあります。本番環境でも .env ファイルをそのまま置けばいい、という思い込みです。
本番環境というのは、実際にユーザーがアクセスする、公開された場所のことです。多くの場合、アプリを公開するとき(これをデプロイと呼びます)は、VercelやAWSといったホスティングサービスを使います。こうしたサービスには、環境変数を登録しておく専用の設定画面が用意されています。本番では、手元の .env を持ち込むのではなく、この設定画面に値を登録するのが基本的なやり方です。
こうしたサービス側の仕組みは、シークレット管理と呼ばれることもあります。シークレットとは秘密情報のことで、それを安全に預かって、プログラムが動くときにだけ渡してくれる仕組みです。手元は .env、本番はサービスの設定画面と、置き場所を分けて考えると整理しやすくなります。
やりがちなミス:誤爆と、フロント用の勘違い
環境変数まわりで初心者がつまずきやすいポイントを3つ挙げておきます。
1つ目は、.envをうっかりアップロードしてしまう誤爆です。.gitignore に書き忘れたまま公開すると、せっかく外に分けた秘密情報がそのまま世に出てしまいます。新しくプロジェクトを作ったら、まず .env を .gitignore に加える。これを習慣にしておくと安心です。
2つ目は、クライアント側に露出させてしまうことです。環境変数を使っていても、その値がブラウザに届く部分(クライアント側)で読み込まれていると、結局は誰でも見られる状態になります。環境変数を使えばどこでも安全、というわけではなく、どこで読み込まれているかが大事です。
3つ目は、フロント用の環境変数が公開前提であることを知らないケースです。フロントエンド、つまりブラウザで動く部分向けの環境変数は、多くの仕組みで名前に特定の接頭辞を付ける決まりになっています。これらは公開されることを前提にした値で、ブラウザに埋め込まれます。ここに秘密のキーを入れてしまうと、外から見えてしまいます。秘密にしたい情報は、フロント用の環境変数には入れない、と覚えておいてください。
AI開発での注意:生成されたコードにベタ書きが混ざっていないか
生成AIにコードを書いてもらう機会が増えました。とても便利ですが、AIが出したコードには、APIキーやパスワードがそのままコードの中に書き込まれている(いわゆるベタ書き)場合があります。
サンプルとして分かりやすくするために、あえて直接書いた形で提示されることもあるからです。それに気づかず公開してしまうと、これまで見てきたような漏洩につながります。AIに任せたコードほど、秘密情報がコードの中に直接書かれていないか、環境変数として外に分けられているかを、自分の目で確認する習慣をつけておくと安心です。サーバや外部サービスの設定が安全かどうかを見る視点は、AIで作ったアプリのサーバは安全かもあわせて読むと理解が深まります。
次の一歩
環境変数の考え方が分かったら、次はそれを何のために使うのか、という具体につなげると理解が定着します。
- APIキーをクライアント側に書いてはいけない理由:環境変数で守りたい代表格がAPIキーです。なぜ隠すのか、正しい隠し方を掘り下げています。
- APIとは?仕組み・メリット・セキュリティの注意点:そもそもAPIキーが何のための鍵なのか、前提から知りたい方へ。
- AIで作ったアプリのサーバは安全か:秘密情報やサーバの設定まわりを、もう一段広い視点で確認したい方へ。
まとめ
- 環境変数は、プログラムの外側に置く設定値の入れ物。秘密情報や環境ごとに変わる設定を、コードから切り離して持たせる。
- コードに直接書くと、公開時に漏れる・場所ごとに書き換えが要る・共有しにくい、という困りごとが起きる。
- 手元は
.envに書き、.gitignoreでアップロードしない指定をする。この2つはセット。 - 本番では
.envを持ち込まず、ホスティングサービスの設定画面(シークレット管理)に登録する。 - 誤爆・クライアント側への露出・フロント用は公開前提、という3点に気をつける。
環境変数のようなテーマは、ひとつずつ見ればどれも難しくありません。それでも独学でつまずきやすいのは、知識そのものよりも、何をどの順番で学ぶかが見えにくいからです。安全なアプリ作りの土台も、あなたの目標から逆算した学ぶ順番の一部として、1対1で一緒に整理できます。
