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

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

背景

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

Types

$lib/server

$libのサブディレクトリです。SvelteKitは、$lib/server内のモジュールをクライアントサイドのコードにインポートすることを防止します。サーバーオンリーモジュールを参照してください。

解説

$lib/serverは、SvelteKitプロジェクトにおいてサーバーサイド専用のコードを分離するための特別なディレクトリです。この機能についてより詳しく解説します：

$lib/serverの目的と機能

• サーバー専用コード: サーバーでのみ実行される予定のコードを格納するための専用ディレクトリ
• セキュリティ保護: SvelteKitは自動的にこのディレクトリ内のコードがクライアントサイドにインポートされることを防止
• 明確な分離: サーバー専用ロジックとクライアント/サーバー両方で利用可能なコードを明確に分離

一般的な使用例

$lib/serverディレクトリに格納される典型的なコード：

1. データベース接続: // $lib/server/db.js import { createPool } from 'mysql2/promise'; export const db = createPool({ host: process.env.DB_HOST, user: process.env.DB_USER, // ...その他の接続設定 });
2. 環境変数や機密情報へのアクセス: // $lib/server/secrets.js export const API_KEY = process.env.API_SECRET_KEY; export const JWT_SECRET = process.env.JWT_SECRET;
3. サーバーサイドユーティリティ: // $lib/server/auth.js import jwt from 'jsonwebtoken'; import { JWT_SECRET } from './secrets'; export function verifyToken(token) { return jwt.verify(token, JWT_SECRET); }

正しい使用方法

$lib/server内のモジュールは、以下のファイルでのみインポートできます：

• サーバーサイドのloadファンクション（+page.server.js, +layout.server.js）
• アクション（+page.server.jsのアクション）
• APIエンドポイント（+server.js）
• フック（hooks.server.js）

例えば：

// src/routes/protected/+page.server.js
import { verifyToken } from '$lib/server/auth';

export async function load({ cookies }) {
  const token = cookies.get('auth_token');
  
  try {
    const userData = verifyToken(token);
    return { user: userData };
  } catch (err) {
    return { user: null };
  }
}

エラー例

クライアント側のコンポーネントやクライアントサイドのloadファンクションから$lib/serverのモジュールをインポートしようとすると、ビルド時にエラーが発生します：

// src/routes/+page.js - これはクライアントでも実行される可能性がある
import { db } from '$lib/server/db'; // エラー！

export function load() {
  // ...
}

このようなセキュリティ機能により、機密情報や純粋にサーバーでのみ動作するコードがクライアントに漏れることを防ぎ、SvelteKitアプリケーションのセキュリティを向上させることができます。

おわりに 

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