Svelte入門:リファレンス @sveltejs/kit -Vol.16-

スポンサーリンク
Svelte入門:リファレンス @sveltejs/kit -Vol.16- 用語解説
Svelte入門:リファレンス @sveltejs/kit -Vol.16-
この記事は約6分で読めます。
よっしー
よっしー

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

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

スポンサーリンク

背景

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

@sveltejs/kit

SSRManifest

interface SSRManifest {…}

「SSRManifest インターフェイス」 – サーバーサイドレンダリングに必要なマニフェスト(設定情報集)の定義

appDir: string;

「アプリケーションディレクトリ」 – アプリケーションのルートディレクトリのパス

appPath: string;

「アプリケーションパス」 – アプリケーションの URL パス(ベースパス)

assets: Set<string>;

「アセット」 – アプリケーションが使用する静的ファイル(JS、CSS、画像など)のセット

mimeTypes: Record<string, string>;

「MIME タイプ」 – ファイル拡張子と対応する MIME タイプのマッピング

_: {…}

「プライベートフィールド」 – 内部使用のためのプロパティ

client: NonNullable<BuildData['client']>;

「クライアント」 – ビルドデータからのクライアント情報(null にならないことが保証されている)

nodes: SSRNodeLoader[];

「ノード」 – SSR のためのノードローダーの配列

routes: SSRRoute[];

「ルート」 – アプリケーションのルート設定の配列

prerendered_routes: Set<string>;

「事前レンダリングされたルート」 – ビルド時に事前レンダリングされたルートのセット

matchers: () => Promise<Record<string, ParamMatcher>>;

「マッチャー」 – ルートパラメータのマッチングルールを提供する関数

server_assets: Record<string, number>;

「サーバーアセット」 – サーバーコードによってインポートされたすべてのアセットの「[ファイル]: サイズ」のマッピング

解説

SSRManifest は、サーバーサイドレンダリング(SSR)を実行するために必要な情報を含むインターフェイスです。これは主に SvelteKit や Next.js のような SSR フレームワークで使用されます。

このマニフェストには、アプリケーションの構造、ルート定義、静的アセット、サーバーコードが使用するリソースなど、SSR 実行に必要なすべての情報が含まれています。サーバーはこのマニフェストを読み込み、クライアントリクエストに基づいて適切なページをレンダリングします。

prerendered_routes のように、ビルド時に事前生成されたページを識別するための情報も含まれており、これによってサーバーは動的にレンダリングする必要があるページとすでに静的に生成されているページを区別できます。

matchers は動的ルートパラメータのバリデーションロジックを提供し、server_assets はサーバーコードが使用するファイルとそのサイズを管理します。

ServerInit

バージョン2.10.0から利用可能

init はサーバーが最初のリクエストに応答する前に呼び出されます。

ServerInit型は、戻り値が無い(void)か、または戻り値が無いPromiseオブジェクト(Promise<void>)を返す関数です

解説

ServerInit は、サーバーの初期化処理を定義するための型です。この機能はバージョン2.10.0から導入されました。

主な特徴:

  1. 実行タイミング:サーバーが起動した後、最初のリクエストを処理する前に実行されます。これはサーバーの準備が整った時点で必要な初期化処理を行うのに最適なタイミングです。
  2. 戻り値:この関数は何も返さないか(void)、または Promise を返します(非同期処理の場合)。返された Promise が解決されるまで、最初のリクエスト処理は待機します。
  3. 用途
    • データベース接続の確立
    • 環境変数のロード
    • キャッシュの初期化
    • ロギングシステムのセットアップ
    • 外部サービスとの接続確認
    • アプリケーションの初期状態の設定

この型を使用することで、サーバーがリクエストを受け付け始める前に必要なすべてのリソースと設定が準備されていることを保証できます。

ServerInitOptions

interface ServerInitOptions {…}

「ServerInitOptions インターフェイス」 – サーバー初期化時のオプション設定を定義するインターフェイス

env: Record<string, string>;

「環境変数」 – 環境変数のキーと値のマッピング

A map of environment variables

「環境変数のマッピング」

read?: (file: string) => ReadableStream;

「読み込み関数(オプション)」 – ファイル名を受け取り、ReadableStream を返す関数

アセットのファイル名をReadableStreamに変換する関数。$app/serverからエクスポートされるread関数が動作するために必要です

解説

ServerInitOptions は、サーバー初期化時に提供されるオプションを定義するインターフェイスです。このインターフェイスには以下の重要な構成要素があります:

  1. env: サーバーが利用できる環境変数のコレクションです。これらはキーと値のペアとして提供され、サーバーはこれらの環境変数を使用して設定や機密情報(APIキーなど)にアクセスできます。
  2. read(オプション): ファイルシステムからアセット(静的ファイル)を読み込むための関数です。この関数は:
    • 引数としてファイル名(string)を受け取ります
    • 対応するファイルの内容を ReadableStream として返します
    • これは特に $app/server モジュールからエクスポートされる read 関数の基盤となります

この read 関数はオプショナル(?)ですが、アプリケーションがサーバーサイドでファイルを読み込む必要がある場合には必須となります。このオプションを提供することで、フレームワークはファイルシステムへのアクセス方法をカスタマイズでき、さまざまな環境(Node.js、Deno、Cloudflare Workers など)で一貫した API を提供できます。

おわりに

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

よっしー
よっしー

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

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

コメント

タイトルとURLをコピーしました