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

用語解説

2025.04.16

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

よっしー

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

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

背景
KitConfig
1. appDir
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 アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

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

appDir

デフォルト値: "_app" SvelteKit が自身のファイル（JS や CSS などの静的アセットや内部で使用されるルートを含む）を保管するディレクトリです。 paths.assets が指定されている場合、2つのアプリディレクトリが存在することになります — ${paths.assets}/${appDir} と ${paths.base}/${appDir} です。

解説

appDir は SvelteKit アプリケーションのビルド出力とランタイムファイルが配置される特別なディレクトリを指定します。

デフォルト値: デフォルトでは _app という名前のディレクトリが使用されます。ビルド後のHTMLファイルには、このディレクトリを参照するスクリプトやリンクタグが含まれます。
内容:
- コンパイルされた JavaScript ファイル
- CSS ファイル
- その他のアセット
- SvelteKit の内部機能に使用されるルート
複数の appDir:
- paths.assets が設定されている場合、2つの異なる場所に appDir が作成されます：
  1. ${paths.assets}/${appDir} – CDN などの外部アセットサーバーからアセットを配信する場合
  2. ${paths.base}/${appDir} – アプリケーションのベースパスでのアプリディレクトリ
カスタマイズする理由:
- 既存のプロジェクトとの名前の競合を避ける
- サイトの構造を組織的に整理する
- 特定のホスティング環境の要件に合わせる
設定例: /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { appDir: 'svelte-app' } };