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

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

背景

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

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

embedded

デフォルト値: false アプリがより大きなアプリ内に埋め込まれているかどうかを指定します。true の場合、SvelteKit はナビゲーションなどに関連するイベントリスナーを window ではなく %sveltekit.body% の親要素に追加し、location.pathname から推測するのではなくサーバーから params を渡します。同一ページ内に複数の SvelteKit アプリを埋め込み、それらの中でクライアント側の SvelteKit 機能を使用することは一般的にサポートされていないことに注意してください（履歴状態への追加などの機能は単一のインスタンスを前提としています）。

embedded プロパティの概要

embedded プロパティは、SvelteKit アプリケーションが単独で実行されるのではなく、別のアプリケーションやフレームワーク内に組み込まれる場合に使用します。

主なポイント

1. 使用シナリオ:
   • 既存のウェブアプリケーション内に SvelteKit アプリを統合する場合
   • マイクロフロントエンドアーキテクチャの一部として SvelteKit を使用する場合
   • 既存のシステムに段階的に SvelteKit を導入する場合
2. 変更される動作:
   • イベントリスナーの配置: 通常は window オブジェクトに配置されるナビゲーションなどのイベントリスナーが、%sveltekit.body% の親要素に追加されます
   • パラメータの取得: URL (location.pathname) からパラメータを取得する代わりに、サーバーから直接パラメータを受け取ります
   • スコープの限定: SvelteKit の操作がグローバルな window オブジェクトではなく、特定の DOM 要素に限定されます
3. 制限事項:
   • 同じページ内に複数の SvelteKit アプリを埋め込み、それぞれでクライアント側のナビゲーション機能を使用することは一般的にサポートされていません
   • 履歴状態の管理（ブラウザの「戻る」「進む」ボタンの動作など）は、単一の SvelteKit インスタンスを前提としています
4. 設定例:

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    embedded: true
  }
};

5. 実装上の注意点:
   • 埋め込みモードを使用する場合、親アプリケーションとの連携方法を慎重に計画する必要があります
   • ルーティングやナビゲーションの衝突を避けるための調整が必要になる場合があります
   • この設定は主に高度な統合シナリオで使用され、通常の SvelteKit アプリ開発では必要ありません

embedded モードは、SvelteKit を既存のアプリケーションエコシステムに統合するための柔軟性を提供しますが、いくつかの制限があることを理解して使用する必要があります。

おわりに 

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