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

用語解説

2025.05.08

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

よっしー

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

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

背景
Types
1. Error
2. 解説
おわりに

背景

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

Types

Error

期待されるエラーと予期せぬエラーの共通の形状を定義します。期待されるエラーはerror関数を使用して投げられます。予期せぬエラーはhandleErrorフックによって処理され、このフックはこの形状を返すべきです。

interface Error {…}

message: string;

解説

SvelteKitのErrorインターフェースは、アプリケーション全体でのエラー処理の一貫性を確保するための重要な型定義です。これについて詳しく説明します：

Error型の目的

App.Errorインターフェースは、SvelteKitアプリケーション内のエラーオブジェクトの構造を標準化します。これには2つの主要なケースがあります：

期待されるエラー：開発者が意図的に投げるエラー（例：認証エラー、不正なリクエストなど）
予期せぬエラー：アプリケーション実行中に予期せず発生するエラー（例：データベース接続の失敗など）

基本構造

最も基本的な形では、Errorインターフェースは少なくともmessageプロパティを含む必要があります：

// src/app.d.ts
declare global {
  namespace App {
    interface Error {
      message: string;
    }
  }
}

export {};

カスタマイズ例

実際のアプリケーションでは、よりリッチなエラー情報を提供するために拡張されることが多いです：

// src/app.d.ts
declare global {
  namespace App {
    interface Error {
      message: string;
      code?: string;        // エラーコード（例: 'AUTH_FAILED'）
      status?: number;      // HTTPステータスコード
      stack?: string;       // 本番環境では通常非表示
      details?: unknown;    // 追加のエラー詳細
    }
  }
}

export {};

期待されるエラーの投げ方

// src/routes/protected/+page.server.js
import { error } from '@sveltejs/kit';

export function load({ locals }) {
  if (!locals.user) {
    throw error(401, {
      message: 'ログインが必要です',
      code: 'AUTH_REQUIRED'
    });
  }
  
  // ...
}

予期せぬエラーの処理

// src/hooks.server.js
export function handleError({ error, event }) {
  // エラーをログに記録
  console.error(error);
  
  // クライアントに安全に返すエラーオブジェクトを整形
  return {
    message: 'サーバーで問題が発生しました',
    code: 'SERVER_ERROR',
    // オリジナルのエラーメッセージは本番環境では隠す場合も
    ...(import.meta.env.DEV ? { details: error.message } : {})
  };
}

エラー表示の例

Errorインターフェースで定義されたエラーは、SvelteKitのエラーページで表示されます：

<!-- src/routes/+error.svelte -->
<script>
  import { page } from '$app/stores';
</script>

<h1>エラーが発生しました</h1>
<p>{$page.error.message}</p>

{#if $page.error.code}
  <p>エラーコード: {$page.error.code}</p>
{/if}

<a href="/">ホームに戻る</a>