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

よっしー

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

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

背景
KitConfig
1. files
おわりに

背景

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

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

files

files プロジェクト内のさまざまなファイルの場所を指定します。

assets?: string;

デフォルト値: "static" 安定した URL を持ち、処理を行わない静的ファイル（favicon.ico や manifest.json など）を置く場所です。

hooks?: {…}

client?: string;

デフォルト値: "src/hooks.client" クライアントフックの場所です。

server?: string;

デフォルト値: "src/hooks.server" サーバーフックの場所です。

universal?: string;

デフォルト値: "src/hooks"
バージョン 2.3.0 以降で利用可能ユニバーサルフックの場所です。

lib?: string;

デフォルト値: "src/lib" アプリの内部ライブラリで、コードベース全体で $lib としてアクセス可能です。

params?: string;

デフォルト値: "src/params" パラメータマッチャーを含むディレクトリです。

routes?: string;

デフォルト値: "src/routes" アプリの構造を定義するファイル（ルーティングを参照）です。

serviceWorker?: string;

デフォルト値: "src/service-worker" サービスワーカーのエントリーポイントの場所（サービスワーカーを参照）です。

appTemplate?: string;

デフォルト値: "src/app.html" HTML レスポンスのテンプレートの場所です。

errorTemplate?: string;

デフォルト値: "src/error.html" フォールバックエラーレスポンスのテンプレートの場所です。

SvelteKit のファイル構造設定

files プロパティを使用すると、SvelteKit プロジェクトの各種ファイルの場所をカスタマイズできます。これにより、既存のプロジェクト構造に合わせたり、チームの好みに応じてファイル配置を変更したりすることが可能になります。

主要な設定項目

静的アセット (assets):
- デフォルト: "static"
- ブラウザに直接提供される静的ファイル（画像、フォント、マニフェストファイルなど）を格納する場所
- この中のファイルはビルド時に処理されず、そのままの形でデプロイされます
フックファイル:
- クライアントフック (hooks.client): クライアント側で実行されるフック関数
- サーバーフック (hooks.server): サーバー側で実行されるフック関数
- ユニバーサルフック (hooks.universal): クライアントとサーバーの両方で実行されるフック関数
内部ライブラリ (lib):
- デフォルト: "src/lib"
- 再利用可能なコンポーネント、ユーティリティ関数などを格納
- $lib というエイリアスを通じて簡単にインポートできます（例：import { Button } from '$lib/components';）
パラメータマッチャー (params):
- デフォルト: "src/params"
- 動的ルートパラメータの検証や変換を行うためのファイルを格納
ルート定義 (routes):
- デフォルト: "src/routes"
- アプリケーションのルーティング構造を定義するファイルを配置
- フォルダとファイル名に基づく規約によってルートが自動的に生成されます
サービスワーカー (serviceWorker):
- デフォルト: "src/service-worker"
- オフライン機能やキャッシュ管理のためのサービスワーカースクリプトの場所
テンプレート:
- アプリテンプレート (appTemplate): すべてのページのベースとなるHTML
- エラーテンプレート (errorTemplate): サーバーエラー時に表示されるHTML

設定例

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    files: {
      assets: 'public',
      lib: 'src/components',
      routes: 'src/pages',
      appTemplate: 'src/template.html'
    }
  }
};

このようにカスタマイズすることで、既存のプロジェクト構造や他のフレームワークから移行する際にも柔軟に対応できます。ただし、カスタマイズする場合は、チーム内での一貫性を保つために、適切なドキュメント化が重要です。

おわりに

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

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)