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

よっしー

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

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

スポンサーリンク

背景

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

goto(…) の変更

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

解説

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

1. 外部URLの扱いの変更

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

1. stateオブジェクトの変更

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

使用例：

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

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

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

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

• 内部/外部ナビゲーションの明確な区別
• 型安全性の向上
• アプリケーションの状態管理の改善

これらの変更により、コードの意図がより明確になり、タイプミスや誤用を防ぐことができます。

おわりに

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

よっしー

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

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