Upgrade to Pro — share decks privately, control downloads, hide ads and more …

暗黙的な process.env から脱却しよう

Avatar for 3846masa 3846masa
January 20, 2026
160

暗黙的な process.env から脱却しよう

2026/01/20
TECH BATON in 東京 〜うちのフロントエンド進化のツボ !コード長持ちのための技術〜
https://findy.connpass.com/event/380541/

Avatar for 3846masa

3846masa

January 20, 2026
Tweet

Transcript

  1. 宮代 理弘 2019 年 CyberAgent 新卒入社 ABEMA Web チーム テックリード

    ブラウザ向け ABEMA / テレビ向け ABEMA の開発 CyberAgent Web クライアント Next Experts (2026) 自己紹介 AbemaTV, Inc. All Rights Reserved 2
  2. これは ABEMA Web 開発のどこで使われている process.env でしょうか process.env['NODE_ENV'] どの開発環境に向けたビルドなのか(ビルド時設定) process.env['RELEASE_CHANNEL'] どの開発環境で実行しているのか(実行時環境変数)

    process.env['DEPLOY_STAGE'] どの GCS バケットを参照するか(ビルド時設定) 「ビルド時に必要な変数」と「実行時に必要な変数」がごちゃまぜ process.env クイズ AbemaTV, Inc. All Rights Reserved 7
  3. 実行時環境変数を 独自のグローバル変数として定義する declare interface AppEnv { releaseType: 'development' | 'production';

    // process.env とは異なり、ネストした表現も可能 localStorage: { keyPrefix: string; }; } // グローバルな変数として型定義すると process.env と同じ要領で使える declare global { const appEnv: AppEnv; } 環境変数を明示的にする AbemaTV, Inc. All Rights Reserved 9
  4. 実行時環境変数をビルドフェーズで生成する export function buildAppEnv(params: Params): AppEnv { switch (params.releaseType) {

    case 'production': { return { releaseType, localStorage: { keyPrefix: 'app_' }, }; } default: { return { releaseType, localStorage: { keyPrefix: 'dev_app_' }, }; } } } 環境変数を明示的にする AbemaTV, Inc. All Rights Reserved 10
  5. ビルドコマンドの引数を拡張して 明示的に値を渡す optique ライブラリを使うと valibot-like に引数定義が書けて明示的 const argsSchema = object({

    releaseType: option('--release-type', choice(['production', 'development'])), }); const params = run(argsSchema, { args: process.argv.slice(process.argv.indexOf('--') + 1), }); const appEnv = JSON.stringify(buildAppEnv(params)); const config = { plugins: [new webpack.DefinePlugin({ appEnv })] }; $ webpack build -- --release-type development 環境変数を明示的にする AbemaTV, Inc. All Rights Reserved 11
  6. ビルド時変数は 明示的にコマンドライン引数として受け取る このとき optique などで引数定義も明示するとより良い 実行時変数は コマンドライン引数をもとにビルド時に生成する このとき buildAppEnv 関数と

    AppEnv 型の宣言は 同じファイルに書くと情報が分散しない declare interface AppEnv { /* ... */ } declare global { const appEnv: AppEnv; } export function buildAppEnv(params: Params): AppEnv { /* ... */ } 環境変数を明示的にする AbemaTV, Inc. All Rights Reserved 12