Svelte入門：リファレンス $env/static/public

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

スポンサーリンク

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

$env/static/public

$env/static/privateと同様ですが、config.kit.env.publicPrefix（デフォルトはPUBLIC_）で始まる環境変数のみを含む点が異なります。そのため、クライアントサイドのコードに安全に公開することができます。

値はビルド時に静的に置換されます。

import { PUBLIC_BASE_URL } from '$env/static/public';

解説

Svelteアプリケーションで静的な（ビルド時に解決される）公開可能な環境変数を扱うための$env/static/publicモジュールについて説明しています。

1. 公開可能な静的環境変数：
   • このモジュールは、クライアントサイドに公開しても安全な環境変数へのアクセスを提供します
   • 具体的には、config.kit.env.publicPrefix（デフォルトではPUBLIC_）で始まる変数のみを含みます
2. 静的な解決：
   • 値はビルド時に静的に解決され、バンドルに直接組み込まれます
   • これにより、実行時のオーバーヘッドがなく、効率的なコードとなります
3. $env/static/privateとの違い：
   • private版が非公開環境変数を含むのに対し、こちらは公開用プレフィックスで始まる変数のみを含みます
   • クライアントサイドのコードでも使用できる点が大きな違いです
4. $env/dynamic/publicとの違い：
   • 動的版は実行時に値を解決するのに対し、こちらはビルド時に値を解決します
   • 静的な解決により、ネットワークリクエストの削減やパフォーマンスの向上が期待できます

このモジュールは、APIのベースURL、アプリケーションの設定値など、ビルド時に決定可能で、かつクライアントサイドで必要な情報を扱う場合に最適です。クライアントサイドでも使用できるため、UIコンポーネントやブラウザ側のロジックでも環境変数を参照できます。

おわりに

今日は、 SvelteKitのリファレンスについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)