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

用語解説

2025.05.07

この記事は約4分で読めます。

よっしー

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

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

背景
Types
1. app.d.ts
2. 解説
おわりに

背景

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

Types

app.d.ts

app.d.tsファイルは、アプリの環境型（ambient types）、つまり明示的にインポートしなくても利用可能な型の収納場所です。このファイルには常にApp名前空間が含まれています。この名前空間には、あなたが操作するSvelteKitの特定の機能の形状に影響を与えるいくつかの型が含まれています。

解説

app.d.tsファイルはSvelteKitプロジェクトの型定義システムにおいて重要な役割を果たします。このファイルについてより詳しく説明します：

app.d.tsの基本概念

環境型（ambient types）: 明示的なインポート文なしでプロジェクト全体から利用可能な型定義
グローバルスコープ: このファイルで定義された型はプロジェクト全体でグローバルに利用可能
App名前空間: SvelteKitの中核機能をカスタマイズするための型が含まれる特別な名前空間

一般的な使用例

典型的なapp.d.tsファイルは以下のような構造を持ちます：

// src/app.d.ts
declare global {
  namespace App {
    // SvelteKitが認識する特別な型定義
    interface Locals {
      user: {
        id: string;
        name: string;
        role: 'admin' | 'user';
      } | null;
    }

    interface PageData {
      // 共通のページデータ
      meta?: {
        title: string;
        description: string;
      }
    }

    interface Error {
      message: string;
      code?: string;
    }

    interface Platform {
      // プラットフォーム固有のデータ（Cloudflareなど）
      env?: {
        MY_SECRET: string;
      };
    }
  }
}

export {};

重要な型の説明

App名前空間内で定義できる主要な型と使用例：

Locals:
- リクエスト間で情報を共有するために使用
- hooks.server.jsや+page.server.jsのlocalsオブジェクトの型を定義
- ユーザーセッション情報などを格納するのに最適
// hooks.server.js での使用例 export async function handle({ event, resolve }) { const token = event.cookies.get('token'); if (token) { const user = await verifyToken(token); // ↓ ここでLocals型のチェックを受ける event.locals.user = user; } return resolve(event); }
PageData:
- ページ全体で共通のデータ構造を定義
- 各ページのload関数の返り値に共通の型を適用
Error:
- エラーオブジェクトの型を定義
- SvelteKitのエラーハンドリングに使用される
Platform:
- デプロイプラットフォーム固有のデータの型を定義
- CloudflareやVercelなどのホスティングサービスのプラットフォーム固有の機能を型付けする場合に便利