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

用語解説

2025.02.28

この記事は約5分で読めます。

よっしー

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

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

背景

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

Navigationインターフェース：

willUnload: boolean;
ナビゲーションによってページがアンロードされるかどうか（クライアントサイドのナビゲーションでない場合）
delta?: number;
履歴の戻る/進むナビゲーションの場合、前後に移動するステップ数
complete: Promise<void>;
ナビゲーションが完了すると解決し、失敗または中断された場合は拒否されるPromise。willUnloadナビゲーションの場合、Promiseは決して解決されない

Navigationインターフェースは、SvelteKitにおけるナビゲーション状態と動作を管理する重要なインターフェースです。

このインターフェースは、SPAにおける複雑なナビゲーション管理を効果的に実現するための基盤を提供します。

NavigationEventインターフェース定義：

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

プロパティ：

params: Params;
現在のページのパラメータ – 例えば /blog/[slug] のようなルートに対して、{ slug: string } オブジェクト
route: {…}
現在のルートに関する情報
id: RouteId;
現在のルートのID – 例えば src/routes/blog/[slug] に対して、/blog/[slug] となる
url: URL;
現在のページのURL

NavigationEventは、SvelteKitのルーティングシステムにおけるナビゲーション情報を扱うための基本インターフェースです。

// 例：/blog/hello-world に対して
{
  params: { slug: 'hello-world' },
  route: { id: '/blog/[slug]' }
}

export const load = (event: NavigationEvent) => {
  const { slug } = event.params;
  const currentUrl = event.url;
  // slugやURLを使用したデータ取得など
};

このインターフェースは、型安全性を保ちながら、ルーティングとナビゲーションに関する重要な情報へのアクセスを提供します。

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

よっしー

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

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