.envファイルの書き方とセキュリティ対策（.gitignore漏れ・誤コミット防止）

.env（環境変数定義ファイル）の正しく安全な書き方、各種フレームワークでの参照方法、およびGit漏洩防止対策です。

1. オンライン .env バリデータ・フォーマッター

.env ファイルの構文エラー（クォート閉じ忘れ・不要なスペースなど）をブラウザ上でチェックできます。

---

2. .env ファイルの文法ルール・クォート指定

ケース	記述例	解説
基本形	PORT=8080	KEY=VALUE の形式（イコール前後にスペース不可）
スペースを含む値	DB_NAME="My Project Database"	ダブルクォートで囲む
= を含む値	CONNECTION="host=db;port=5432"	クォートがないとパースエラーになる
特殊文字のエスケープ	SECRET="hello\nworld"	ダブルクォート内では改行等のエスケープが有効
コメント	# データベース接続設定	# で始まる行は無視される

---

3. 各環境での環境変数参照コード

① Node.js (dotenv / ES Modules)

import 'dotenv/config'; // .env を自動読込
const apiKey = process.env.API_KEY;

② Vite (フロントエンド)

Vite環境ではセキュリティ上の理由から VITE_ 接頭辞のついた変数のみがクライアント側に露出します。

// .env 内: VITE_API_URL=https://api.example.com
const apiUrl = import.meta.env.VITE_API_URL;

③ Next.js

Next.jsでは NEXT_PUBLIC_ 接頭辞のついた変数がブラウザ側へ公開されます。

// クライアント側で参照可能
const endpoint = process.env.NEXT_PUBLIC_ENDPOINT;

---

4. セキュリティ対策と誤コミット時のレスキュー

① .gitignore への追加（必須）

リポジトリ作成時に必ず .env をコミット対象から除外します。テンプレートとして .env.example（値を含まない空の変数名一覧）のみをGit管理します。

# .gitignore
.env
.env.local
.env.*.local

② 間違えて .env をコミットしてしまった場合

インデックスから追跡を外し、履歴から消去します。

# 作業ツリーのファイルは残し、Gitの追跡から外す
git rm --cached .env
git commit -m "fix: .env をGit追跡対象から削除"

※既に GitHub 等のパブリックリポジトリへ push してしまった API キーやシークレットは、無効化（Revoke）して即座に再発行 してください。