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

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

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

paths

SvelteKitにおける「paths」設定について説明します。

assets

• デフォルト値: ""

アプリのファイルが提供される絶対パスを指定します。これは、ファイルが何らかのストレージバケットから提供される場合に便利です。

base

• デフォルト値: ""

ルート相対パスで、空の文字列でない限り、/で始まる必要がありますが、末尾は/で終わらないようにします（例：/base-path）。これはアプリがどこから提供されるかを指定し、アプリをルートパス以外の場所に配置できるようにします。

すべてのルート相対リンクの前にこのbase値を付ける必要があることに注意してください。そうしないと、それらはドメインのルートを指すことになります（これはブラウザの動作方法です）。そのために$app/pathsからbaseを使用できます：<a href="{base}/your-page">Link</a>。これを頻繁に書く場合は、再利用可能なコンポーネントとして抽出するのが良いでしょう。

relative

• デフォルト値: true
• バージョン1.9.0以降で利用可能

相対的なアセットパスを使用するかどうかを指定します。

trueの場合、サーバーサイドレンダリング中に$app/pathsからインポートしたbaseとassetsが相対アセットパスに置き換えられ、よりポータブルなHTMLが生成されます。falseの場合、paths.assetsが外部URLでない限り、%sveltekit.assets%とビルドアーティファクトへの参照は常にルート相対パスになります。

シングルページアプリのフォールバックページは、この設定に関係なく、常に絶対パスを使用します。

アプリが<base>要素を使用している場合は、これをfalseに設定する必要があります。そうしないと、アセットURLが現在のページではなく、<base> URLに対して正しく解決されません。

バージョン1.0では、undefinedも有効な値でした（デフォルトでそのように設定されていました）。その場合、paths.assetsが外部でなければ、SvelteKitは%sveltekit.assets%を相対パスに置き換え、ビルドアーティファクトを参照するのに相対パスを使用しますが、$app/pathsからインポートしたbaseとassetsは設定で指定したとおりになります。

解説

assets設定の使い方

この設定は、静的アセット（画像、CSS、JS）がアプリとは別の場所からホストされる場合に使用します。例えば、CDNやクラウドストレージからアセットを提供する場合です。

// svelte.config.js
export default {
  kit: {
    paths: {
      assets: 'https://cdn.example.com/my-app'
    }
  }
};

base設定の使い方

この設定は、アプリがドメインのルート以外の場所でホストされる場合に使用します。例えば、https://example.com/my-app/でアプリを実行する場合：

// svelte.config.js
export default {
  kit: {
    paths: {
      base: '/my-app'
    }
  }
};

そして、アプリ内でリンクを作成する際：

<script>
  import { base } from '$app/paths';
</script>

<a href="{base}/about">Aboutページ</a>

relative設定の主な用途

この設定は、特にHTMLの可搬性を重視する場合や特定のホスティング環境に対応する場合に役立ちます。

• true（デフォルト）: 生成されるHTMLがより可搬性が高く、異なるパスやドメインに移動しても動作します
• false: <base>タグを使用するアプリや、静的アセットへの絶対パスが必要な特定の環境で必要です

これらの設定を適切に組み合わせることで、様々なホスティング環境やデプロイシナリオに対応できるようになります。

おわりに 

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