Svelte入門：リファレンス Configuration -Vol.2-

用語解説

2025.04.14

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

よっしー

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

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

背景
KitConfig
1. adapter
  1. 解説
  2. 重要なポイント：
おわりに

背景

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

KitConfig

kit プロパティは SvelteKit を設定するために使用され、以下のようなプロパティを持つことができます：

svelte.config.js ファイル内の kit オブジェクトは、SvelteKit アプリケーションの核となる設定を定義します。このプロパティによって、アプリケーションのルーティング、ビルド、デプロイなどの多くの側面をカスタマイズできます。

例えば：

const config = {
  kit: {
    // KitConfig プロパティがここに入ります
    adapter: adapter(),
    paths: {
      base: '/my-app',
      assets: 'https://cdn.example.com'
    },
    // その他の設定...
  }
};

KitConfig には多くのプロパティが含まれる可能性があり、プロジェクトの要件に応じて以下のような設定が可能です：

adapter: アプリケーションのデプロイ先環境を定義します（Node.js、静的サイト、AWS Lambda など）
paths: ベースパスやアセットパスなどのパス設定
prerender: プリレンダリングの設定
env: 環境変数の扱い方
csp: コンテンツセキュリティポリシー設定
alias: インポートパスのエイリアス
files: さまざまなファイルやディレクトリの場所
outDir: ビルド出力先のディレクトリ
version: アプリケーションのバージョン管理方法

こうした設定を変更することで、SvelteKit アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

（注：具体的な各プロパティの詳細説明がドキュメントにはさらに記載されていると思われますが、入力された文章には含まれていないため、一般的な説明に留めています。）

adapter

デフォルト値: undefined アダプターは vite build を実行するときに実行されます。アダプターは、出力を異なるプラットフォーム向けにどのように変換するかを決定します。

解説

SvelteKit の kit.adapter 設定は、アプリケーションがどのようにビルドされ、どの環境にデプロイされるかを定義する非常に重要な設定です。

アダプターの主な役割は、SvelteKit アプリケーションを特定のホスティング環境やプラットフォームで動作するように適切なフォーマットに変換することです。

重要なポイント：

ビルドプロセスの一部: アダプターは vite build コマンドを実行したときに自動的に実行されます。
プラットフォーム対応: さまざまなホスティング環境（Node.js サーバー、静的サイトホスティング、サーバーレス関数など）に対応するために異なるアダプターが存在します。
主なアダプターの種類:
- @sveltejs/adapter-auto: 自動的にデプロイ環境を検出（Vercel, Netlify など）
- @sveltejs/adapter-static: 静的サイト生成（SSG）
- @sveltejs/adapter-node: Node.js サーバー
- @sveltejs/adapter-netlify: Netlify 用
- @sveltejs/adapter-vercel: Vercel 用
- その他、コミュニティによって開発されたアダプター
使用例:

import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      // アダプター固有のオプション
      out: 'build',
      precompress: true
    })
  }
};