環境変数と設定のパターン
小さなデフォルト値、安全な環境変数の読み取り、明示的なオブジェクトでアプリを設定します。ブラウザに秘密情報を漏らさない方法も学びます。初心者向けのパターンです。
「環境変数と設定のパターン」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。
全体像
目標: どの実行環境でも設定を安全に読み取ります。
- まずデフォルト
- 環境を機能検出します（process.envを前提にしません）
- 文字列を数値や真偽値にパースします
- ブラウザーバンドルに秘密情報を入れません
安全な環境変数の読み取り
環境が存在する場合にのみ読み取るため、機能検出を使います。実行可能な例には、小さなデモ用ストアを用意します。
// Read an env var if available; otherwise use a fallback
function readEnv(name, fallback) {
// detect Node-like env
const hasProcessEnv = typeof process !== "undefined" && process && process.env && typeof process.env === "object";
if (hasProcessEnv && typeof process.env[name] === "string") {
return process.env[name];
}
// demo fallback store so this snippet runs everywhere
const DEMO = { API_URL: "https://api.example.com", NODE_ENV: "development" };
if (typeof DEMO[name] === "string") return DEMO[name];
return fallback;
}
console.log("API_URL:", readEnv("API_URL", "https://fallback.local"));
デフォルト+環境変数から設定を作る
まずデフォルトを使い、その後、環境変数で上書きします。文字列はnumber/booleanに明示的に変換します。
// Build config from defaults, then override via env when present
function buildConfig() {
const defaults = {
apiUrl: "https://api.example.com",
port: 3000,
debug: false
};
// env values are strings; parse to right types
const apiUrl = readEnv("API_URL", defaults.apiUrl);
const portStr = readEnv("PORT", String(defaults.port));
const debugStr = readEnv("DEBUG", defaults.debug ? "1" : "0");
return {
apiUrl: apiUrl,
port: Number.parseInt(portStr, 10),
debug: debugStr === "1" || debugStr === "true"
};
}
const cfg = buildConfig();
console.log("config:", cfg);
明示的な設定パラメーター
関数には小さな設定オブジェクトを渡します。グローバル状態や予期しない動作を避けられます。
// Pass config into functions explicitly (easier to test)
function startApp(config) {
// use values directly
const mode = config.debug ? "debug" : "prod";
return "Starting " + mode + " at " + config.apiUrl + " on :" + config.port;
}
console.log(startApp(cfg));
環境変数を安全にパースする
環境変数の値は文字列です。バグを避けるため、真偽値や整数用の小さなパーサーを作成します。
// Helpers to parse common env shapes safely
function toBool(s, fallback) {
if (typeof s !== "string") return fallback;
const v = s.trim().toLowerCase();
if (v === "1" || v === "true" || v === "yes") return true;
if (v === "0" || v === "false" || v === "no") return false;
return fallback;
}
function toInt(s, fallback) {
const n = Number.parseInt(s, 10);
return Number.isFinite(n) ? n : fallback;
}
console.log("toBool:", toBool("yes", false), toBool("no", true));
console.log("toInt :", toInt("8080", 3000), toInt("oops", 3000));
秘密情報とクライアントコード
重要:
- クライアント側のJSに秘密情報を入れてはいけません。ユーザーが読み取れるためです。
- ブラウザーには無害なフラグやURLだけを置きます。
- Nodeでは、実際の秘密情報をprocess.envまたはボールトから読み取ります。
- ローカル実行用に、必ずデフォルト設定を用意します。
環境変数と設定の基礎クイズ
クイックチェック: 移植性の高い設定パターンを確認します。
まとめ
まとめ: デフォルトと安全な環境変数の読み取りから設定を作り、文字列をパースして、明示的な設定オブジェクトを渡します。クライアントコードに秘密情報を決して含めません。
よくある質問
「環境変数と設定のパターン」レッスンは無料ですか？
はい。「環境変数と設定のパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。
「環境変数と設定のパターン」で何を学びますか？
小さなデフォルト値、安全な環境変数の読み取り、明示的なオブジェクトでアプリを設定します。ブラウザに秘密情報を漏らさない方法も学びます。初心者向けのパターンです。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「環境変数と設定のパターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。