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

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

Transcript

1. 暗黙的な process.env から 脱却しよう Masahiro Miyashiro 2026-01-20 / TECH BATON in 東京 AbemaTV, Inc. All Rights Reserved 1
2. 宮代 理弘 2019 年 CyberAgent 新卒入社 ABEMA Web チーム テックリード ブラウザ向け ABEMA / テレビ向け ABEMA の開発 CyberAgent Web クライアント Next Experts (2026) 自己紹介 AbemaTV, Inc. All Rights Reserved 2
3. process.env クライアントコードで 使っていますか？ AbemaTV, Inc. All Rights Reserved 3
4. process.env 使っているもの すべて列挙できますか？ AbemaTV, Inc. All Rights Reserved 4
5. Node.js が実行時環境変数を受け取るためのインタフェース 転じて、クライアントコードに環境依存の値を渡すためのインタフェース /** @type {import('webpack').Configuration} */ const config = { plugins: [ new webpack.EnvironmentPlugin({ API_ORIGIN: 'https://api.exapmle.com/', // ... }), ], }; process.env とは AbemaTV, Inc. All Rights Reserved 5
6. これは ABEMA Web 開発のどこで使われている process.env でしょうか process.env['NODE_ENV'] process.env['RELEASE_CHANNEL'] process.env['DEPLOY_STAGE'] process.env クイズ AbemaTV, Inc. All Rights Reserved 6
7. これは 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
8. 暗黙的な process.env から 脱却して 明示的なコードにしよう AbemaTV, Inc. All Rights Reserved 8
9. 実行時環境変数を 独自のグローバル変数として定義する declare interface AppEnv { releaseType: 'development' | 'production'; // process.env とは異なり、ネストした表現も可能 localStorage: { keyPrefix: string; }; } // グローバルな変数として型定義すると process.env と同じ要領で使える declare global { const appEnv: AppEnv; } 環境変数を明示的にする AbemaTV, Inc. All Rights Reserved 9
10. 実行時環境変数をビルドフェーズで生成する 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
11. ビルドコマンドの引数を拡張して 明示的に値を渡す 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
12. ビルド時変数は 明示的にコマンドライン引数として受け取る このとき optique などで引数定義も明示するとより良い 実行時変数は コマンドライン引数をもとにビルド時に生成する このとき buildAppEnv 関数と AppEnv 型の宣言は 同じファイルに書くと情報が分散しない declare interface AppEnv { /* ... */ } declare global { const appEnv: AppEnv; } export function buildAppEnv(params: Params): AppEnv { /* ... */ } 環境変数を明示的にする AbemaTV, Inc. All Rights Reserved 12
13. おわりに AbemaTV, Inc. All Rights Reserved 13
14. まとめ 暗黙的にいろんなコンテキストで使われる process.env から脱却しよう ビルド時変数は、コマンドライン引数で明示的に受け取ろう 実行時変数は、コマンドライン引数をもとにビルド時に生成しよう 今後の発展 コマンドライン引数に渡す値自体をどうやって管理するか CI/CD 環境変数をコマンドライン引数として渡す必要がある 環境変数の定義を一元化する fnox を活用すると CI/CD 環境変数とローカル環境変数が明示的になるかも おわりに AbemaTV, Inc. All Rights Reserved 14