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

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

背景

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

クッキーを設定する際にpathの指定が必要です

Set-Cookieヘッダーでpathが指定されていない場合、ブラウザは対象リソースの親ディレクトリをクッキーのパスとして設定します。この挙動は特に有用でも直感的でもなく、開発者がクッキーをドメイン全体に適用されることを期待している場合に、しばしばバグの原因となります。

SvelteKit 2.0からは、あいまいさを排除するために、cookies.set(...)、cookies.delete(...)、cookies.serialize(...)を呼び出す際にpathの指定が必要となりました。ほとんどの場合はpath: '/'を使用することになるでしょうが、相対パスを含め、好きなパスを設定することができます。''は「現在のパス」を、'.'は「現在のディレクトリ」を意味します。

/** @type {import('./$types').PageServerLoad} */
export function load({ cookies }) {
    cookies.set(name, value, { path: '/' });
    return { response }
}

svelte-migrateは、調整が必要な箇所にコメントを追加します。

解説

では、このSvelteKitの仕様変更について、重要なポイントを解説させていただきます。

背景にある問題

• ブラウザのデフォルト動作について
• クッキーのpathを指定しない場合、ブラウザは「そのリソースの親ディレクトリ」をパスとして自動設定します
• 例えば /posts/123 というURLでクッキーを設定すると、パスは /posts になります
• この自動設定は予期せぬ動作を引き起こしやすい問題がありました

SvelteKit 2.0での対応

• 明示的なpath指定の必須化
• クッキー操作の全メソッド（set、delete、serialize）でpath指定が必須になりました
• これにより、開発者の意図しないパス設定を防ぎます

パスの指定方法

1. ドメイン全体に適用（推奨）

cookies.set(name, value, { path: '/' });

2. 現在のパスのみに適用

cookies.set(name, value, { path: '' });

3. 現在のディレクトリに適用

cookies.set(name, value, { path: '.' });

移行のサポート

• svelte-migrateツールが提供されており、このツールを使うと：
• 変更が必要な箇所を自動的に検出
• コメントで指摘してくれる
• 移行作業をスムーズに進めることができます

この変更の意義

1. バグの防止

• 開発者の意図とブラウザの動作の不一致を防ぎます
• クッキーのスコープを明示的に制御できます

1. コードの可読性向上

• パスが明示的に指定されることで、コードの意図が分かりやすくなります
• メンテナンス性が向上します

このような仕様変更は、一時的には開発者の手間が増えるものの、長期的にはアプリケーションの信頼性と保守性の向上につながる重要な改善と言えます。

おわりに

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