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

用語解説

2025.04.15

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

よっしー

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

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

背景
KitConfig
1. alias
おわりに

背景

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

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

alias

デフォルト値: {} import 文の値を置き換えるために使用される、0個以上のエイリアスを含むオブジェクトです。これらのエイリアスは自動的に Vite と TypeScript に渡されます。

解説

alias プロパティは、インポートパスを短縮したりわかりやすくしたりするために使用します。これによって、アプリケーション内での相対パスの使用を減らし、コードの可読性と保守性を向上させることができます。

設定例

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		alias: {
			// これはファイルにマッチします
			'my-file': 'path/to/my-file.js',

			// これはディレクトリとその内容にマッチします
			// (`my-directory/x` は `path/to/my-directory/x` に解決されます)
			'my-directory': 'path/to/my-directory',

			// /* で終わるエイリアスは、ディレクトリ自体ではなく、
			// ディレクトリの内容のみにマッチします
			'my-directory/*': 'path/to/my-directory/*'
		}
	}
};

重要なポイント

エイリアスのタイプ:
- 特定のファイルへのエイリアス
- ディレクトリ全体へのエイリアス
- ディレクトリの内容のみへのエイリアス（/* で終わるもの）
組み込みエイリアス:
- 組み込みの $lib エイリアスは config.kit.files.lib によって制御されています。これはパッケージング時に使用されるためです。
TypeScript/JavaScript の設定:
- エイリアス設定を有効にするには、npm run dev を実行して SvelteKit に jsconfig.json または tsconfig.json に必要なエイリアス設定を自動生成させる必要があります。
使用例:
- 設定後は次のようにインポートできます： // 以前: import { myFunc } from '../../../path/to/my-file.js';// 設定後: import { myFunc } from 'my-file';// ディレクトリからのインポートimport { someUtil } from 'my-directory/utils';