Skip to main content

Modules

Edit this page on GitHub

SvelteKit では、数多くのモジュールがアプリケーションで利用可能です。

$app/environment

ts
import { browser, building, dev, version } from '$app/environment';

browser

アプリがブラウザで動作している場合 true です。

ts
const browser: boolean;

building

SvelteKit はビルド時にアプリを実行し、アプリを解析します。このプロセス中は、buildingtrue です。これはプリレンダリング中にも適用されます。

ts
const building: boolean;

dev

開発サーバーが動作しているかどうか。NODE_ENVMODE に対応しているかどうかは保証されません。

ts
const dev: boolean;

version

config.kit.version.name の値です。

ts
const version: string;

$app/forms

ts
import { applyAction, deserialize, enhance } from '$app/forms';

applyAction

この action は現在のページの form プロパティを与えられたデータで更新し、$page.status を更新します。 エラーの場合、もっとも近くにあるエラーページにリダイレクトされます。

ts
function applyAction<
Success extends Record<string, unknown> | undefined = Record<string, any>,
Invalid extends Record<string, unknown> | undefined = Record<string, any>
>(result: ActionResult<Success, Invalid>): Promise<void>;

deserialize

フォーム送信からのレスポンスをデシリアライズするためにこの関数を使用してください。 使用方法:

ts
import { deserialize } from '$app/forms';
 
async function handleSubmit(event) {
const response = await fetch('/form?/action', {
method: 'POST',
body: new FormData(event.target)
});
 
const result = deserialize(await response.text());
// ...
}
ts
function deserialize<
Success extends Record<string, unknown> | undefined = Record<string, any>,
Invalid extends Record<string, unknown> | undefined = Record<string, any>
>(serialized: string): ActionResult<Success, Invalid>;

enhance

この action は <form> 要素を強化(enhances)します。JavaScriptが無効化されていても <form> 要素自体は動作します。

ts
function enhance<
Success extends Record<string, unknown> | undefined = Record<string, any>,
Invalid extends Record<string, unknown> | undefined = Record<string, any>
>(
form: HTMLFormElement,
/**
* Called upon submission with the given FormData and the `action` that should be triggered.
* If `cancel` is called, the form will not be submitted.
* You can use the abort `controller` to cancel the submission in case another one starts.
* If a function is returned, that function is called with the response from the server.
* If nothing is returned, the fallback will be used.
*
* If this function or its return value isn't set, it
* - falls back to updating the `form` prop with the returned data if the action is one same page as the form
* - updates `$page.status`
* - resets the `<form>` element and invalidates all data in case of successful submission with no redirect response
* - redirects in case of a redirect response
* - redirects to the nearest error page in case of an unexpected error
*
* If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
*/
submit?: SubmitFunction<Success, Invalid>
): { destroy(): void };

$app/navigation

ts
import {
afterNavigate,
beforeNavigate,
disableScrollHandling,
goto,
invalidate,
invalidateAll,
preloadCode,
preloadData
} from '$app/navigation';

afterNavigate

現在のコンポーネントがマウントされるときや、新しい URL に移動するときに、与えられた callback を実行するライフサイクル関数です。

afterNavigate はコンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている間、アクティブな状態を維持します。

ts
function afterNavigate(callback: (navigation: AfterNavigate) => void): void;

beforeNavigate

リンクをクリックしたり、goto(...) を呼び出したり、ブラウザの 戻る/進む を使うなどして新しい URL にナビゲーションするその直前にトリガーされるナビゲーションインターセプターです。 cancel() を呼び出すと、ナビゲーションが完了するのを中止します。ナビゲーションが直接現在のページをアンロードした場合、cancel はネイティブブラウザの アンロード確認ダイアログが表示されます。この場合、navigation.willUnloadtrue になります。

ナビゲーションがクライアントサイドではない場合、navigation.to.route.idnull になります。

beforeNavigate はコンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている間、アクティブな状態を維持します。

ts
function beforeNavigate(callback: (navigation: BeforeNavigate) => void): void;

disableScrollHandling

ナビゲーション後のページ更新の時にこれが(例えば onMountafterNavigate の中や action で)呼び出された場合、SvelteKit の組み込みのスクロール処理を無効にします。 ユーザーの期待する動きではなくなるため、一般的には推奨されません。

ts
function disableScrollHandling(): void;

goto

SvelteKit が指定された url にナビゲーションしたときに解決する Promise を返します(ナビゲーションに失敗した場合は、Promise はリジェクトされます)。 外部の URL の場合は、goto(url) を呼び出す代わりに window.location = url を使用してください。

ts
function goto(
url: string | URL,
opts?: {
/**
* If `true`, will replace the current `history` entry rather than creating a new one with `pushState`
*/
replaceState?: boolean;
/**
* If `true`, the browser will maintain its scroll position rather than scrolling to the top of the page after navigation
*/
noScroll?: boolean;
/**
* If `true`, the currently focused element will retain focus after navigation. Otherwise, focus will be reset to the body
*/
keepFocus?: boolean;
/**
* The state of the new/updated history entry
*/
state?: any;
/**
* If `true`, all `load` functions of the page will be rerun. See https://kit.svelte.jp/docs/load#rerunning-load-functions for more info on invalidation.
*/
invalidateAll?: boolean;
}
): Promise<void>;

invalidate

現在アクティブなページに属している load 関数が fetchdepends を通じて当該の url に依存している場合は load 関数を再実行させます。ページが更新されたときに解決される Promise を返します。

引数が string または URL で与えられる場合、fetchdepends に渡されたものと同じ URL が解決できなければいけません (クエリパラメータも含みます)。 カスタムの識別子を作るには、[a-z]+: から始まる文字列を使用してください (例: custom:state) — これは有効な URL です。

function 引数はカスタムの predicate を定義するのに使用されます。フルの URL を受け取り、true が返された場合は load を再実行します。 これは、完全一致ではなくパターンに基づいて invalidate をしたい場合に便利です。

ts
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';
 
invalidate((url) => url.pathname === '/path');
ts
function invalidate(url: string | URL | ((url: URL) => boolean)): Promise<void>;

invalidateAll

現在アクティブなページに属する全ての load 関数を再実行させます。ページが更新されたときに解決される Promise を返します。

ts
function invalidateAll(): Promise<void>;

preloadCode

まだ取得されていないルート(routes)のコードをプログラム的にインポートします。 通常、後続のナビゲーションを高速にするためにこれを呼び出します。

You can specify routes by any matching pathname such as /about (to match src/routes/about/+page.svelte) or /blog/* (to match src/routes/blog/[slug]/+page.svelte).

preloadData とは異なり、この関数は load 関数を呼び出しません。 モジュールのインポートが完了したときに解決される Promise を返します。

ts
function preloadCode(...urls: string[]): Promise<void>;

preloadData

指定されたページをプログラム的にプリロードします、つまり

  1. そのページのコードが取得され読み込まれていることを確認し、
  2. そのページの load 関数を適切なオプションで呼び出します。

data-sveltekit-preload-data が使用された <a> 要素をユーザーがタップまたはマウスオーバーしたときに SvelteKit がトリガーする動作と同じです。 次のナビゲーション先が href である場合、load から返される値が使われるので、ナビゲーションを瞬時に行うことができます。 プリロードが完了したときに解決される Promise を返します。

ts
function preloadData(href: string): Promise<void>;

$app/paths

ts
import { assets, base } from '$app/paths';

assets

config.kit.paths.assets にマッチする絶対パス(absolute path)です。

config.kit.paths.assets に値が設定された場合でも、vite devvite preview のときは '/_svelte_kit_assets' で置き換えられます。なぜなら、アセットはまだその最終的な URL に存在しないからです。

ts
const assets: `https://${string}` | `http://${string}`;

base

config.kit.paths.base にマッチする文字列です。

使い方の例: <a href="{base}/your-page">Link</a>

ts
const base: `/${string}`;

$app/stores

ts
import { getStores, navigating, page, updated } from '$app/stores';

サーバー上のストア(Store)は コンテクスチュアル(contextual) で、ルート(root)コンポーネントの context に追加されます。つまり、page はリクエストごとにユニークであり、同じサーバーで同時に処理される複数のリクエスト感で共有されません。

そのため、ストアを使用するためには、コンポーネントの初期化の際にそのストアをサブスクライブする必要があります (コンポーネント内で $page という形でストアの値を参照する場合、自動的にそうなります)。

ブラウザでは、これを心配する必要はありません。ストアはどこからでもアクセスできます。ブラウザ上でのみ実行されるコードは、いつでもこれらのストアを参照 (またはサブスクライブ) することができます。

getStores

全てのコンテクスチュアルなストア(contextual stores)を返す関数です。サーバー上では、コンポーネントの初期化時に呼び出す必要があります。 何らかの理由で、コンポーネントのマウント後までストアのサブスクライブを遅延させたい場合にのみ、これを使用してください。

ts
function getStores(): {
navigating: typeof navigating;
page: typeof page;
updated: typeof updated;
};

navigating

読み取り可能なストア(readable store)です。 ナビゲーションが開始すると、その値は fromtotype、(もし type === 'popstate' の場合) delta プロパティを持つ Navigation オブジェクトです。 ナビゲーションが終了すると、その値は null に戻ります。

サーバー上では、この store はコンポーネントの初期化時にのみサブスクライブ(subscribe)できます。ブラウザでは、いつでもサブスクライブ(subscribe)できます。

ts
const navigating: Readable<Navigation | null>;

page

ページのデータの値を含む読み取り可能なストア(readable store)です。

サーバー上では、この store はコンポーネントの初期化時にのみサブスクライブ(subscribe)できます。ブラウザでは、いつでもサブスクライブ(subscribe)できます。

ts
const page: Readable<Page>;

updated

読み取り可能なストア(readable store)で、初期値は false です。version.pollInterval が 0 以外の値である場合、SvelteKit はアプリの新しいバージョンをポーリングし、それを検知するとこのストアの値を true に更新します。updated.check() は、ポーリングに関係なくすぐにチェックするよう強制します。

サーバー上では、この store はコンポーネントの初期化時にのみサブスクライブ(subscribe)できます。ブラウザでは、いつでもサブスクライブ(subscribe)できます。

ts
const updated: Readable<boolean> & { check(): Promise<boolean> };

$env/dynamic/private

このモジュールは、実行中のプラットフォームで定義された、実行時の環境変数へのアクセスを提供します。例えば、adapter-node を使用している場合 (または vite preview を実行中の場合)、これは process.env と同じです。このモジュールは config.kit.env.publicPrefix で始まらない変数のみを含んでいます。

このモジュールをクライアントサイドコードにインポートすることはできません。

ts
import { env } from '$env/dynamic/private';
console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);

開発中(In dev)は、$env/dynamic には常に .env からの環境変数が含まれます。本番(In prod)では、この動作は使用する adapter に依存します。

$env/dynamic/public

$env/dynamic/private と似ていますが、config.kit.env.publicPrefix (デフォルトは PUBLIC_) で始まる変数のみを含んでおり、クライアントサイドのコードに安全に公開することができます。

パブリックで動的な環境変数は全て、サーバーからクライアントに送られるため、より大きなネットワークリクエストを引き起こすことにご注意ください。可能であれば、代わりに $env/static/public をお使いください。

ts
import { env } from '$env/dynamic/public';
console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);

$env/static/private

.env ファイルや process.env から Vite が読み込む 環境変数です。$env/dynamic/private と同様に、このモジュールはクライアントサイドコードにインポートすることはできません。このモジュールは config.kit.env.publicPrefix で始まらない変数のみを含んでいます。

$env/dynamic/private とは 異なり 、このモジュールからエクスポートされた値はビルド時に静的に注入され、デッドコードの排除などの最適化が可能になります。

ts
import { API_KEY } from '$env/static/private';

コード内で参照される環境変数は、たとえアプリがデプロイされるまで値を持たない場合でも、すべて (例えば .env ファイルで) 宣言する必要があることに注意してください。:

MY_FEATURE_FLAG=""

このように、コマンドラインから .env の値を上書きすることができます:

MY_FEATURE_FLAG="enabled" npm run dev

$env/static/public

$env/static/private と似ていますが、config.kit.env.publicPrefix (デフォルトは PUBLIC_) で始まる変数のみを含んでおり、クライアントサイドのコードに安全に公開することができます。

値はビルド時に静的に置き換えられます。

ts
import { PUBLIC_BASE_URL } from '$env/static/public';

$lib

これは src/lib (または config.kit.files.lib に指定されたディレクトリ) へのシンプルなエイリアスです。../../../../ のようなナンセンスなことをせずに、共通のコンポーネントやユーティリティモジュールにアクセスすることができます。

$lib/server

$lib のサブディレクトリです。SvelteKit は、クライアントサイドコードに $lib/server のモジュールがインポートされるのを防ぎます。server-only modules をご参照ください。

$service-worker

ts
import { base, build, files, prerendered, version } from '$service-worker';

このモジュールは service workers でのみ使用できます。

base

デプロイメントの base パスです。通常は、これは config.kit.paths.base と同じですが、location.pathname から計算されるので、サイトがサブディレクトリにデプロイされても正しく動作し続けます。 base はありますが、assets がないことにご注意ください。config.kit.paths.assets が指定されている場合に service worker を使用することができないためです。

ts
const base: string;

build

Viteが生成するファイルを表すURL文字列の配列で、cache.addAll(build) を使ってキャッシュするのに適しています。 開発中は、これは空の配列となります。

ts
const build: string[];

files

静的なディレクトリまたは config.kit.files.assets で指定されたディレクトリにあるファイルを表す URL 文字列の配列です。どのファイルを static ディレクトリに含めるかについては、config.kit.serviceWorker.files でカスタマイズできます。

ts
const files: string[];

prerendered

プリレンダリングされたページとエンドポイントに合致するパス名の配列です。 開発中は、これは空の配列となります。

ts
const prerendered: string[];

version

config.kit.version をご参照ください。これは、Service Worker 内で一意なキャッシュ名を生成するのに便利で、後でアプリをデプロイしたときに古いキャッシュを無効にすることができます。

ts
const version: string;

@sveltejs/kit

ts
import { error, fail, json, redirect, text } from '@sveltejs/kit';

error

HTTP ステータスコードとオプションのメッセージで HttpError オブジェクトを作成します。 リクエストの処理中にこのオブジェクトがスローされると、SvelteKit は handleError を呼ばずにエラーレスポンス(error response)を返します。 スローされた redirect をキャッチしないようにしてください、SvelteKit が処理するのを妨げてしまいます。

ts
function error(status: number, body: App.Error): HttpError;

error

ts
function error(
status: number,
// this overload ensures you can omit the argument or pass in a string if App.Error is of type { message: string }
body?: { message: string } extends App.Error
? App.Error | string | undefined
: never

fail

ActionFailure オブジェクトを作成します。

ts
function fail<T extends Record<string, unknown> | undefined = undefined>(
status: number,
data?: T

json

与えられた data から JSON Response オブジェクトを作成します。

ts
function json(data: any, init?: ResponseInit): Response;

redirect

Redirect オブジェクトを作成します。リクエストの処理中にスローされると、SvelteKit はリダイレクトレスポンス(redirect response)を返します。 スローされた redirect をキャッチしないようにしてください、SvelteKit が処理するのを妨げてしまいます。

ts
function redirect(
status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308,
location: string

text

Create a Response object from the supplied body.

ts
function text(body: string, init?: ResponseInit): Response;

@sveltejs/kit/hooks

ts
import { sequence } from '@sveltejs/kit/hooks';

sequence

複数の handle の呼び出しを middleware ライクな方法でシーケンス化するヘルパー関数です。

src/hooks.server.js
ts
import { sequence } from '@sveltejs/kit/hooks';
 
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.
async function first({ event, resolve }) {
console.log('first pre-processing');
const result = await resolve(event, {
transformPageChunk: ({ html }) => {
// transforms are applied in reverse order
console.log('first transform');
return html;
}
});
console.log('first post-processing');
Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.
7031
7031
Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.
return result;
}
 
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.
async function second({ event, resolve }) {
console.log('second pre-processing');
const result = await resolve(event, {
transformPageChunk: ({ html }) => {
console.log('second transform');
return html;
}
});
console.log('second post-processing');
return result;
}
 
export const handle = sequence(first, second);

上記の例はこのようにプリントされます:

first pre-processing
second pre-processing
second transform
first transform
second post-processing
first post-processing
ts
function sequence(...handlers: Handle[]): Handle;

@sveltejs/kit/node

ts
import { getRequest, setResponse } from '@sveltejs/kit/node';

Node ライクな環境向けの adapter で使用されるユーティリティーです。

getRequest

ts
function getRequest(opts: {
base: string;
request: import('http').IncomingMessage;
bodySizeLimit?: number;
}): Promise<Request>;

setResponse

ts
function setResponse(
res: import('http').ServerResponse,
response: Response
): void;

@sveltejs/kit/node/polyfills

ts
import { installPolyfills } from '@sveltejs/kit/node/polyfills';

fetch やそれに関連する interface の polyfill で、ネイティブ実装が提供されない環境向けの adapter が使用します。

installPolyfills

様々な web API をグローバルで使用できるようにします:

  • crypto
  • fetch
  • Headers
  • Request
  • Response
ts
function installPolyfills(): void;

@sveltejs/kit/vite

ts
import { sveltekit } from '@sveltejs/kit/vite';

sveltekit

SvelteKit Vite プラグインを返します。

ts
function sveltekit(): Promise<Plugin[]>;