Skip to main content

ブラウザに公開しても安全な環境変数もあります。これらは PUBLIC_ プレフィックスを付けることで、プライベートな環境変数と区別します。

.env にある2つのパブリックな環境変数に値を追加します。

.env
PUBLIC_THEME_BACKGROUND="steelblue"
PUBLIC_THEME_FOREGROUND="bisque"

そして、これらを src/routes/+page.svelte にインポートします。

src/routes/+page.svelte
<script>
	const PUBLIC_THEME_BACKGROUND = 'white';
	const PUBLIC_THEME_FOREGROUND = 'black';
	import {
		PUBLIC_THEME_BACKGROUND,
		PUBLIC_THEME_FOREGROUND
	} from '$env/static/public';
</script>

Next: $env/dynamic/public

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
	const PUBLIC_THEME_BACKGROUND = 'white';
	const PUBLIC_THEME_FOREGROUND = 'black';
</script>
 
<main
	style:background={PUBLIC_THEME_BACKGROUND}
	style:color={PUBLIC_THEME_FOREGROUND}
>
	{PUBLIC_THEME_FOREGROUND} on {PUBLIC_THEME_BACKGROUND}
</main>
 
<style>
	main {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		font-size: 10vmin;
	}
</style>
initialising