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

よっしー

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

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

背景
@sveltejs/kit
おわりに

背景

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

@sveltejs/kit

OnNavigate

OnNavigate（onNavigateコールバックに渡される引数）

interface OnNavigate extends Navigation {…}

プロパティ：

type: Exclude<NavigationType, 'enter' | 'leave'>;
ナビゲーションの種類：

form: ユーザーが<form>を送信
link: リンククリックによるナビゲーション
goto: goto(...)呼び出しまたはリダイレクトによるナビゲーション
popstate: 戻る/進むナビゲーションによって開始

willUnload: false;
onNavigateコールバックはクライアントサイドのナビゲーションの直前に呼び出されるため、ページをアンロードするナビゲーションでは決して呼び出されません。

解説

OnNavigateインターフェースは、クライアントサイドのナビゲーション制御に特化したインターフェースです。

基本特徴：

Navigationインターフェースを拡張
クライアントサイドに特化した動作
ページのアンロードを伴わないナビゲーションのみを扱う

ナビゲーションタイプの制限：

enterとleaveを除外
アプリケーション内部のナビゲーションに焦点
ユーザーアクションとプログラム的なナビゲーションをカバー

使用例：

onNavigate((navigation) => {
  if (navigation.type === 'form') {
    // フォーム送信時の特別な処理
  } else if (navigation.type === 'link') {
    // リンククリック時の処理
  }
});

主な用途：

ナビゲーション前の状態保存
遷移アニメーションの制御
ナビゲーション分析
カスタムナビゲーション動作の実装

このインターフェースは、SPAにおけるスムーズなページ遷移とユーザー体験の向上に貢献します。

Page

Page（pageリアクティブオブジェクトと$pageストアの形状）

インターフェース定義：

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

プロパティ：

url: URL;
現在のページのURL。
params: Params;
現在のページのパラメータ – 例えば /blog/[slug] のようなルートに対して、{ slug: string } オブジェクト。
route: {…}
現在のルートに関する情報。
id: RouteId;
現在のルートのID – 例えば src/routes/blog/[slug] に対して、/blog/[slug]。
status: number;
現在のページのHTTPステータスコード。
error: App.Error | null;
現在のページのエラーオブジェクト（存在する場合）。handleErrorフックから設定される。
data: App.PageData & Record<string, any>;
現在のページのすべてのload関数からのデータをマージした結果。App.PageDataを通じて共通の型を定義できる。
state: App.PageState;
$app/navigationのpushStateとreplaceState関数を使用して操作できるページの状態。
form: any;
フォーム送信後にのみ設定される。詳細はフォームアクションを参照。

解説

Pageインターフェースは、SvelteKitアプリケーションの現在のページ状態を包括的に表現するための重要なインターフェースです。

型パラメータの意義：

Params: URLパラメータの型定義
RouteId: ルート識別子の型定義
型安全なルーティングを実現

主要な機能グループ：

ナビゲーション情報（url, params, route, id）
状態管理（status, error, state）
データ管理（data, form）

実践的な使用例：

// ページコンポーネント内での使用
<script>
  import { page } from '$app/stores';

  $: currentSlug = $page.params.slug;
  $: pageData = $page.data;
  $: if ($page.error) {
    // エラーハンドリング
  }
</script>

用途：

現在のページ状態の監視
ルーティング情報へのアクセス
エラー状態の管理
フォームデータの処理
ページデータの統合管理

このインターフェースは、アプリケーションの状態管理とユーザーインターフェースの構築に不可欠な情報を提供します。

ParamMatcher

ParamMatcher（パラムマッチャーの形状。詳細はマッチングを参照）

型定義：

type ParamMatcher = (param: string) => boolean;

これは文字列パラメータを受け取り、真偽値を返す関数型です。

解説

ParamMatcherは、URLパラメータのバリデーションと照合を行うための関数型定義です。

基本構造：

入力：文字列型のパラメータ
出力：boolean型（true/false）
シンプルな関数型定義

使用例：

// 数値のみを許可するマッチャー
const numberMatcher: ParamMatcher = (param) => {
  return /^\d+$/.test(param);
};

// UUIDを検証するマッチャー
const uuidMatcher: ParamMatcher = (param) => {
  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(param);
};