Svelte入門：リファレンス Types -Vol.7-

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

背景

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

Types

Locals

event.localsを定義するインターフェースで、サーバーフック（handleとhandleError）、サーバーオンリーのload関数、そして+server.jsファイル内でアクセスできます。

interface Locals {}

解説

SvelteKitのLocalsインターフェースは、サーバーサイドでリクエスト間でデータを共有するための重要な仕組みです。以下にこの機能の詳細を説明します：

Localsの目的と役割

• リクエストスコープのデータ保存: 現在のリクエスト処理チェーン内でのみ有効なデータを保存する場所
• リクエスト間の情報共有: サーバーフックからページのload関数、APIエンドポイントまで情報を渡す手段
• 認証状態の管理: ユーザー認証情報などをリクエスト処理中に保持するのに最適

1. 型の定義

まずapp.d.tsファイルでlocalsの型を定義します：

// src/app.d.ts
declare global {
  namespace App {
    interface Locals {
      user: {
        id: string;
        name: string;
        role: 'admin' | 'user';
      } | null;
      
      // その他のリクエスト固有のデータ
      visitCount?: number;
      requestStartTime?: number;
    }
  }
}

export {};

2. データの設定 (hooks.server.js)

典型的にはサーバーフックでlocalsにデータを設定します：

// src/hooks.server.js
export async function handle({ event, resolve }) {
  // リクエスト開始時間の記録
  event.locals.requestStartTime = Date.now();
  
  // 認証トークンの確認とユーザー情報の設定
  const token = event.cookies.get('session');
  
  if (token) {
    try {
      const user = await validateToken(token);
      event.locals.user = user;
    } catch {
      event.locals.user = null;
    }
  } else {
    event.locals.user = null;
  }
  
  // リクエスト処理を続行
  return resolve(event);
}

3. データの使用 (サーバーサイドload関数)

ページのサーバーサイドload関数でlocalsにアクセス：

// src/routes/profile/+page.server.js
export function load({ locals }) {
  // 未認証ユーザーのチェック
  if (!locals.user) {
    throw redirect(302, '/login');
  }
  
  return {
    user: {
      name: locals.user.name,
      role: locals.user.role
      // 注: パスワードハッシュなどの機密情報はクライアントに送らない
    }
  };
}

4. APIエンドポイントでの使用

+server.jsファイルでもlocalsにアクセスできます：

// src/routes/api/user/+server.js
export async function GET({ locals }) {
  if (!locals.user) {
    return new Response('Unauthorized', { status: 401 });
  }
  
  return new Response(JSON.stringify({
    name: locals.user.name,
    role: locals.user.role
  }), {
    headers: {
      'Content-Type': 'application/json'
    }
  });
}

重要なポイント

• サーバーサイド限定: localsはサーバーサイドでのみアクセス可能で、クライアントサイドのコードからは直接アクセスできません
• リクエストスコープ: localsのデータはリクエスト処理の間だけ存在し、リクエスト間で共有されません
• 安全なデータ受け渡し: サーバー内でのみデータを共有するので、機密情報を安全に扱えます

ユースケース例

1. 認証システム: ユーザーのログイン状態や権限情報を保存
2. パフォーマンス測定: リクエスト処理時間の計測
3. リクエスト固有の設定: ユーザーの言語設定や表示設定などの保持
4. リクエスト追跡: ログ記録用のリクエストIDの保持
5. 一時的なキャッシュ: リクエスト中に複数回使用される計算結果の保存

Localsインターフェースを適切に設計することで、サーバーサイドのコード間でのデータ共有がスムーズになり、コードの可読性と保守性が向上します。

おわりに 

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