Svelte入門：SvelteKitでの移行 -Vol.5-

用語解説

2025.01.22

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

よっしー

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

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

背景
goto(…) の変更
1. 解説
おわりに

背景

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

goto(…) の変更

goto(...)は外部URLを受け付けなくなりました。外部URLへのナビゲーションを行うには、window.location.href = urlを使用してください。stateオブジェクトは現在$page.stateを決定し、もし宣言されている場合はApp.PageStateインターフェースに準拠する必要があります。詳細については、シャロールーティングのドキュメントを参照してください。

解説

この変更には以下の重要なポイントがあります：

外部URLの扱いの変更

変更前：goto()で内部・外部URLどちらも扱えた
変更後：goto()は内部ナビゲーションのみに使用
外部URLへの遷移は標準的なJavaScriptのwindow.location.hrefを使用

stateオブジェクトの変更

$page.stateの値がstateオブジェクトによって決定される
型安全性の向上：App.PageStateインターフェースへの準拠が必要

使用例：

// 内部ナビゲーション - 正しい使用法
goto('/dashboard');

// 外部URL - 新しい使用法
window.location.href = 'https://example.com';

// stateの使用例
goto('/page', {
  state: {
    // App.PageStateに準拠する必要があるプロパティ
    scrollPosition: 0
  }
});

この変更は、主に以下の目的があると考えられます：