型付きdotenv

Transcript

1. 型付きdotenv ssssota
2. だれ とみかわそうたろう 冨川宗太郎 { "x": "ssssotaro", "github": "ssssota" } フロントエンドエンジニア ViteやSvelteが好き。
3. 型付きdotenvとは typedotenv というライブラリの紹介。 型付きdotenv → typed-dotenv → typedotenv 課題は次の2点 1. `.env` で宣⾔されている、環境変数にstring型がついてほしい。 2. `process.env.NEXT_PUBLIC_API_TOKEN` 、 process.env ⻑い。 import.meta.env はもっと⻑い。
4. SvelteKitの例 SvelteKitでは、Virtual moduleという仕組み（Viteのプラグイン）ですでに解決 されている課題。 import { env as privateEnv } from '$env/dynamic/private'; import { env as publicEnv } from '$env/dynamic/public'; import { API_KEY } from '$env/static/private'; import { PUBLIC_BASE_URL } from '$env/static/public'; 上記のようなモジュールが利⽤できる。
5. typedotenvの解決⽅法 SvelteKit同様のVirtual moduleでもJavaScriptだけであれば2.の⻑いという問題 は解決できる。しかしTypeScriptだと存在しないモジュール扱いされてしまう。 →じゃあ .ts ファイル⽣成してしまおう。 TEST=value ↓ /* Auto generated by typedotenv */ if (typeof process.env.TEST !== 'string') throw new Error('TEST is not defined in .env'); export const TEST = process.env.TEST;
6. つかいかた typedotenvで検索しよう！ WebpackやViteから利⽤できるので、Next.jsでももちろん利⽤可能。 .envの変化に応じて⾃動で更新される。 ランタイムでthrowさせたくない場合は、as string だけ付けるオプションも。 CLIから⽣成、最新状態かチェックなども可能。
7. typedotenvで快適環境変数！