🔒 環境変数・シークレットを安全に扱う
このページで学ぶこと
- APIキーやパスワードをコードに直接書いてはいけない理由がわかる
- 環境変数とは何かがわかる
.envファイルの使い方がわかる
なぜ重要か
開発をしていると、APIキーやデータベースのパスワードなどの「秘密の情報」が必要になります。
これをコードに直接書いてしまうと、GitHubにアップした瞬間に世界中に公開されます。
実際に、GitHubに誤ってAPIキーを公開して不正利用され、数十万円の請求が来た事例が多数あります。
// ❌ 絶対にやってはいけない
const apiKey = "sk-1234567890abcdef"環境変数とは
環境変数とは、コードの外側（OSやサーバー）に保存する変数のことです。
コードからは「この名前の変数を読んでください」とだけ書き、実際の値はコードに入れません。
// ✅ こう書く。値はコードの外に置く
const apiKey = process.env.MY_API_KEYやってみよう
ステップ1: .env ファイルを作る
practice フォルダに .env というファイルを作り、以下を書く。
MY_NAME=とんペディア
MY_SECRET=super-secret-valueステップ2: .gitignore に追加する
.gitignore ファイルを開き（なければ作り）、以下を追加する。
.envこれで .env は Git の管理対象から外れ、GitHubにアップされなくなります。
ステップ3: 値を参照する
Node.js では process.env.変数名 で読み込める。
// .env を読み込むために dotenv パッケージを使う
require('dotenv').config()
console.log(process.env.MY_NAME) // → とんペディア
console.log(process.env.MY_SECRET) // → super-secret-valueNext.js では不要
Next.js は.envファイルを自動で読み込んでくれます。dotenvを別途インストールする必要はありません。
ステップ4: .env.example を作る
.env 自体は共有できませんが、「どんな変数が必要か」を伝えるために .env.example を作ります。
値は空にして、GitHubにアップします。
MY_NAME=
MY_SECRET=チームメンバーはこれを見て、自分の .env を作れます。
ルールまとめ
| ファイル | GitHubにアップ | 用途 |
|---|---|---|
.env | ❌ しない | 実際の秘密の値を書く |
.env.example | ✅ する | 必要な変数名だけ書いてチームに共有 |
確認しよう
-
.envファイルを作って変数を定義した -
.gitignoreに.envを追加した -
process.env.変数名で値を読み込めた -
.env.exampleを作った -
git statusで.envが追跡されていないことを確認した
AIに聞いてみよう
「Next.js で環境変数を使うとき、
NEXT_PUBLIC_プレフィックスは何のためにありますか？」
次のステップ
Last updated on