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

背景

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

@sveltejs/kit

NavigationTarget

NavigationTarget（特定のナビゲーションの対象に関する情報）

インターフェース定義：

interface NavigationTarget {…}

プロパティ：

1. params: Record<string, string> | null;
   対象ページのパラメータ – 例えば /blog/[slug] のようなルートに対して、{ slug: string } オブジェクト。
   対象がSvelteKitアプリの一部でない場合（ルートとして解決できない場合）は null。
2. route: { id: string | null };
   対象ルートに関する情報
3. url: URL;
   ナビゲーション先のURL

解説

NavigationTargetは、ナビゲーションの目的地に関する情報を提供するインターフェースです。

1. パラメータ処理の特徴：

• 動的ルートパラメータのマッピング
• アプリ外部へのナビゲーション考慮（nullケース）
• 型安全な文字列マッピング

1. 実用的なシナリオ：

// 内部ナビゲーションの例
{
  params: { slug: 'post-1' },
  route: { id: '/blog/[slug]' },
  url: new URL('/blog/post-1', location.href)
}

// 外部ナビゲーションの例
{
  params: null,
  route: { id: null },
  url: new URL('https://external-site.com')
}

3. 主な用途：

• ナビゲーション先の事前検証
• ルーティングの制御
• 外部/内部リンクの区別
• URLパラメータの抽出

このインターフェースは、アプリケーション内のナビゲーション制御と情報アクセスを安全に行うための基盤を提供します。

NavigationType

NavigationType（ナビゲーションの種類）は以下の値を持つ：

• enter: アプリがハイドレーションされた
• form: ユーザーがGETメソッドの<form>を送信した
• leave: ユーザーがタブを閉じるか、戻る/進むボタンで別のドキュメントに移動することでアプリを離れる
• link: リンクのクリックによってナビゲーションが開始された
• goto: goto(...)の呼び出しまたはリダイレクトによってナビゲーションが開始された
• popstate: 戻る/進むナビゲーションによってナビゲーションが開始された

型定義：

type NavigationType =
    | 'enter'
    | 'form'
    | 'leave'
    | 'link'
    | 'goto'
    | 'popstate';

解説

NavigationTypeは、SvelteKitアプリケーションにおけるナビゲーションの発生要因を分類する列挙型です。

1. アプリケーションのライフサイクル関連：

• enter: アプリの初期化完了時
• leave: アプリケーションからの離脱時

1. ユーザーアクション起因：

• form: フォーム送信による遷移
• link: リンククリックによる遷移

1. プログラム的な制御：

• goto: プログラムによる遷移
• リダイレクトによる自動遷移

1. ブラウザ履歴操作：

• popstate: 履歴操作による遷移

この型定義の主な用途：

• ナビゲーション種別に応じた適切な処理の実装
• アナリティクスやログ記録
• ユーザー体験の最適化
• 状態管理の制御

これらの分類により、アプリケーションは異なるナビゲーション状況に応じて適切な動作を実装できます。

NumericRange

NumericRangeは、数値の範囲を表現する型で：

• TStart: 開始数値（number型）
• TEnd: 終了数値（number型）
• 戻り値はTEndとLessThan<TEnd>の和集合からLessThan<TStart>を除外した型

型定義：

type NumericRange
    TStart extends number,
    TEnd extends number
> = Exclude<TEnd | LessThan<TEnd>, LessThan<TStart>>;

解説

NumericRangeは、TypeScriptの型システムを使用して、コンパイル時に数値の範囲を表現するための型です。

1. 動作の仕組み：

// 例：NumericRange<2, 4>の場合
// 1. LessThan<4> = 0 | 1 | 2 | 3
// 2. TEnd | LessThan<TEnd> = 4 | 0 | 1 | 2 | 3
// 3. LessThan<2> = 0 | 1
// 4. 最終結果 = 2 | 3 | 4

2. 使用例：

type Example = NumericRange<2, 5>;
// 結果: 2 | 3 | 4 | 5

// 配列の長さ制限などに利用可能
type LimitedArray<T> = T[] & { length: NumericRange<1, 10> };

3. 主な用途：

• 配列の長さ制限
• 数値パラメータの範囲制限
• 型レベルでの数値バリデーション
• コンパイル時の数値制約

この型定義は、型システムを使って数値の範囲を表現する高度なテクニックを示しています。

おわりに

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