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

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

背景

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

SvelteKit 2.12：$app/storesは非推奨になりました

SvelteKit 2.12では、Svelte 5のルーンAPIに基づく$app/stateが導入されました。$app/stateは$app/storesが提供するすべての機能を提供しますが、使用する場所と方法についてより柔軟性があります。最も重要なのは、pageオブジェクトが細分化されたことで、例えばpage.stateの更新はpage.dataを無効化せず、その逆も同様です。

結果として、$app/storesは非推奨となり、SvelteKit 3で削除される予定です。まだの場合はSvelte 5にアップグレードし、$app/storesから移行することを推奨します。ほとんどの置き換えはかなり簡単なはずです：$app/storesのインポートを$app/stateに置き換え、使用箇所から$プレフィックスを削除します。

<script>
    import { page } from '$app/stores';
    import { page } from '$app/state';
</script>

{$page.data}
{page.data}

.svelteコンポーネント内の$app/storesの使用のほとんどを自動的に移行するには、npx sv migrate app-stateを使用してください。

解説

この変更は、SvelteKitのステート管理に関する重要な更新について説明しています：

1. 新機能$app/stateの導入：

• Svelte 5のルーンAPIをベースに設計
• より柔軟な使用方法を提供
• パフォーマンスの改善
• 細分化された更新（fine-grained updates）
• 必要な部分のみが再レンダリング

1. 主な改善点：

• pageオブジェクトの細分化
• page.stateの更新はpage.dataに影響しない
• より効率的な更新処理
• より柔軟な使用方法
• パフォーマンスの向上

1. 移行方法：

• インポートの変更：

  // 古い方法
  import { page } from '$app/stores';
  // 新しい方法
  import { page } from '$app/state';

• 使用方法の変更：
• $プレフィックスの削除
• 例：$page.data → page.data
• 自動移行ツール：
• npx sv migrate app-stateコマンド
• .svelteコンポーネントの自動更新

1. 今後の予定：

• $app/storesは非推奨に
• SvelteKit 3で完全に削除予定
• Svelte 5への移行を推奨

この変更により：

より効率的なステート管理

よりクリーンなコード

より良いパフォーマンス
が実現されます。

おわりに

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