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

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

背景

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

@sveltejs/kit

LoadEvent

LoadEvent（PageLoadEventとLayoutLoadEventの汎用形式）
./$typesからそれらをインポートする必要があります（生成された型を参照）。LoadEventを直接使用するのは避けてください。

インターフェース定義：

interface LoadEvent
    Params extends Partial<Record<string, string>>,
    Data extends Record<string, unknown> | null,
    ParentData extends Record<string, unknown>,
    RouteId extends string | null
> extends NavigationEvent<Params, RouteId> {…}

プロパティとメソッド：

1. fetch: typeof fetch;
   ネイティブのfetch Web APIと同等で、以下の追加機能があります：

• サーバー上で認証付きリクエストが可能（ページリクエストのcookieと認証ヘッダーを継承）
• サーバー上で相対リクエストが可能
• 内部リクエストはサーバー上で直接ハンドラー関数に移行
• サーバーサイドレンダリング中、レスポンスはHTMLにインライン化
• ハイドレーション中、レスポンスはHTMLから読み込まれる

1. data: Data;
   ルートのサーバーロード関数（+layout.server.jsまたは+page.server.js）から返されたデータを含みます。
2. setHeaders: (headers: Record) => void;
   レスポンスのヘッダーを設定する必要がある場合に使用します。例えば、ページをキャッシュする場合に有用です。

• 同じヘッダーを複数回設定するのはエラー
• set-cookieヘッダーは設定不可
• ブラウザでの実行時は効果なし

1. parent: () => Promise;
   親の+layout.jsロード関数からのデータを返します。
   注意：意図しないウォーターフォールを避けるため、他のデータフェッチの後で呼び出すべき場合があります。
2. depends: (…deps: Array<${string}:${string}>) => void;
   ロード関数がURLやカスタム識別子に依存していることを宣言します。

• URLは絶対パスまたは相対パスで、エンコードが必要
• カスタム識別子は小文字のプレフィックスとコロンが必要

1. untrack: (fn: () => T) => T;
   コールバック内で同期的に呼び出されるすべての依存関係の追跡を無効にします。
   例：URLのパス名の変更がロード関数の再実行をトリガーしないようにする場合に使用。

解説

LoadEventは、SvelteKitのデータローディングシステムにおける重要なインターフェースで、以下の特徴と目的を持っています。

1. 基本構造と目的

• PageLoadEventとLayoutLoadEventの基底となる汎用インターフェース
• ナビゲーションイベントを拡張し、データローディングに必要な機能を提供
• 型パラメータを使用して柔軟な型定義を実現

1. 主要なプロパティとメソッドの役割

fetch

• 通常のfetchに機能拡張を加えたバージョン
• サーバーサイドでの認証やキャッシュの最適化
• パフォーマンス向上のための最適化（HTTP呼び出しのオーバーヘッド削減）

data

• サーバーサイドのデータをクライアントで利用可能に
• レイアウトとページ間でのデータ共有を実現

setHeaders

• レスポンスヘッダーのカスタマイズ
• キャッシュ制御などのHTTPヘッダー管理
• セキュリティ制約（set-cookie制限など）の考慮

parent

• レイアウト階層でのデータ共有
• 最適化のためのデータ取得順序の考慮
• 暗黙的なデータ転送の処理

depends

• 依存関係の明示的な宣言
• カスタム識別子による柔軟な無効化システム
• キャッシュと再読み込みの制御

untrack

• 特定の依存関係の追跡を無効化
• パフォーマンス最適化
• 不要な再レンダリングの防止

1. 使用上の注意点

• 直接使用を避け、生成された型を使用
• ヘッダー設定の重複を避ける
• 適切なタイミングでのparent()呼び出し
• フェッチの依存関係の自動追跡の理解

1. ベストプラクティス

• 型安全性の維持
• パフォーマンスを考慮したデータ取得
• 適切なキャッシュ戦略の実装
• セキュリティ考慮事項の遵守

このインターフェースは、SvelteKitアプリケーションでのデータローディングとナビゲーションの中核となる機能を提供します。

おわりに

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