Svelte入門：リファレンス @sveltejs/kit -Vol.4-

よっしー

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

今日は、SvelteKitのリファレンスについて解説しています。

背景
@sveltejs/kit
おわりに

背景

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

@sveltejs/kit

Cookies

Cookiesインターフェースについて解説します。

このインターフェースは、SvelteKitでCookieを管理するための包括的なAPIを提供します。サーバーサイドでCookieの読み取り、設定、削除を安全に行うことができます。

interface Cookies {
    // cookieを取得
    get: (name: string, opts?: CookieParseOptions) => string | undefined;
    // すべてのcookieを取得
    getAll: (opts?: CookieParseOptions) => Array<{ name: string; value: string }>;
    // cookieを設定
    set: (name: string, value: string, opts: CookieSerializeOptions & { path: string }) => void;
    // cookieを削除
    delete: (name: string, opts: CookieSerializeOptions & { path: string }) => void;
    // cookieをシリアライズ
    serialize: (name: string, value: string, opts: CookieSerializeOptions & { path: string }) => string;
}

各メソッドの説明：

get(name, opts)

name: cookieの名前
opts: cookie.parseに直接渡されるオプション
以前にcookies.setで設定された、またはリクエストヘッダーからcookieを取得します

getAll(opts)

opts: cookie.parseに直接渡されるオプション
以前にcookies.setで設定された、またはリクエストヘッダーからすべてのcookieを取得します

set(name, value, opts)

name: cookieの名前
value: cookieの値
opts: cookie.serializeに直接渡されるオプションとpathプロパティ
cookieを設定します。レスポンスにset-cookieヘッダーを追加し、現在のリクエスト中にcookies.getまたはcookies.getAllでcookieを利用可能にします
httpOnlyとsecureオプションはデフォルトでtrueです（http://localhostではsecureはfalse）
sameSiteオプションのデフォルトはlaxです
pathの指定が必須です。通常はpath: '/'を明示的に設定してアプリ全体でcookieを利用可能にします

delete(name, opts)

name: cookieの名前
opts: cookie.serializeに直接渡されるオプションとpathプロパティ
値を空文字列に設定し、有効期限を過去に設定することでcookieを削除します
pathの指定が必須で、削除したいcookieのパスと一致する必要があります

serialize(name, value, opts)

name: cookieの名前
value: cookieの値
opts: cookie.serializeに直接渡されるオプションとpathプロパティ
cookie名と値のペアをSet-Cookieヘッダー文字列にシリアライズしますが、レスポンスには適用しません
セキュリティ関連のデフォルト設定はsetメソッドと同じです

主要な機能と使用例

Cookie の取得

// 単一のCookieを取得
const userToken = cookies.get('userToken');

// すべてのCookieを取得
const allCookies = cookies.getAll();

Cookie の設定

// 基本的な設定
cookies.set('userPreference', 'darkMode', {
    path: '/',                // アプリ全体で利用可能
    maxAge: 60 * 60 * 24 * 7 // 1週間の有効期限
});

// セキュリティを考慮した設定
cookies.set('sessionId', 'abc123', {
    path: '/',
    httpOnly: true,     // JavaScriptからアクセス不可
    secure: true,       // HTTPS接続でのみ送信
    sameSite: 'strict' // クロスサイトリクエストを制限
});

Cookie の削除

cookies.delete('sessionId', {
    path: '/' // 設定時と同じパスを指定する必要がある
});

セキュリティ上の特徴

httpOnly: デフォルトでtrue（クライアントサイドJavaScriptからの読み取りを防止）
secure: デフォルトでtrue（localhost以外ではHTTPS接続を強制）
sameSite: デフォルトでlax（クロスサイトリクエストを制限）

実践的な使用例

ユーザー認証の実装

// ログインハンドラー
async function handleLogin(event) {
    const { cookies } = event;

    // セッションの作成
    const sessionId = generateSessionId();
    cookies.set('sessionId', sessionId, {
        path: '/',
        maxAge: 60 * 60 * 24, // 24時間
        httpOnly: true,
        secure: true
    });
}

// ログアウトハンドラー
async function handleLogout(event) {
    const { cookies } = event;
    cookies.delete('sessionId', { path: '/' });
}

ユーザー設定の保存

// テーマ設定の保存
cookies.set('theme', userTheme, {
    path: '/',
    maxAge: 60 * 60 * 24 * 365, // 1年
    httpOnly: false  // クライアントJSからアクセス可能
});

言語設定の管理

function setLanguagePreference(lang: string) {
    cookies.set('preferredLanguage', lang, {
        path: '/',
        maxAge: 60 * 60 * 24 * 365 * 2, // 2年
        sameSite: 'lax'
    });
}

重要な注意点

パスの指定

常にpathの指定が必要
通常はpath: '/'を使用してアプリ全体でアクセス可能に

セキュリティ

機密情報は必ずhttpOnly: trueで保護
本番環境ではsecure: trueを維持
必要に応じてsameSiteオプションを適切に設定

Cookie管理

有効期限（maxAgeまたはexpires）の適切な設定
不要なCookieの確実な削除

このインターフェースを適切に使用することで、安全でユーザーフレンドリーなCookie管理を実現できます。

おわりに

今日は、 SvelteKitのリファレンスについて解説しました。

よっしー

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

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