Svelte入門：SvelteKitでの Shallow routing -Vol.2-

今日は、SvelteKitでのShallow routingについて解説しています。

背景

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

API

pushStateの最初の引数は、現在のURLに対する相対URLです。現在のURLにとどまる場合は''を使用します。

2番目の引数は新しいページの状態で、$page.stateとしてページストアからアクセスできます。ページの状態を型安全にするには、App.PageStateインターフェース（通常はsrc/app.d.tsに）を宣言します。

新しい履歴エントリを作成せずにページの状態を設定する場合は、pushStateの代わりにreplaceStateを使用します。

解説

このドキュメントは、SvelteKitの状態管理APIの詳細な使用方法を説明しています。主なポイントを解説します：

1. pushStateの引数：

• 第1引数：相対URL
  • 空文字列''は現在のURLを維持
  • 他のパスを指定すると、そのURLに対する状態となる
• 第2引数：ページ状態
  • $page.stateでアクセス可能
  • 任意のJavaScriptオブジェクトが設定可能

1. 型安全性の確保：

• App.PageStateインターフェースを定義可能
• src/app.d.tsに定義を配置
• TypeScriptによる型チェックが有効

1. replaceStateの使用：

• 履歴エントリを追加せずに状態を更新
• 現在の履歴エントリを上書き
• ブラウザの戻る/進む操作に影響しない

使用例：

// src/app.d.ts
declare namespace App {
  interface PageState {
    showModal?: boolean;
    selectedItem?: string;
    // その他の状態定義
  }
}

// コンポーネント内での使用
import { pushState, replaceState } from '$app/navigation';

// 新しい履歴エントリを作成
pushState('', { showModal: true });

// 現在の履歴エントリを更新
replaceState('', { showModal: false });

この機能は以下のような場合に特に有用です：

• モーダルダイアログの状態管理
• 複数ステップのフォーム
• アプリケーションの状態遷移
• ユーザーインタラクションの履歴管理

注意点：

• 状態は適切にシリアライズ可能である必要がある
• 大きすぎる状態オブジェクトは避ける
• 型定義を適切に行い、型安全性を確保する

おわりに

今日は、 SvelteKitでのShallow routingについて解説しました。