Modules

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

$app/environmentpermalink

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

browserpermalink

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

ts
const browser: boolean;

buildingpermalink

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

ts
const building: boolean;

devpermalink

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

ts
const dev: boolean;

versionpermalink

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

ts
const version: string;

$app/formspermalink

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

applyActionpermalink

この 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>;

deserializepermalink

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

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>;

enhancepermalink

この 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 };

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

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

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

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

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

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

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

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

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

ts
function disableScrollHandling(): void;

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>;

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

引数が string または URL で与えられる場合、fetch や depends に渡されたものと同じ 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>;

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

ts
function invalidateAll(): Promise<void>;

まだ取得されていないルート(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>;

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

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

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

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

$app/pathspermalink

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

assetspermalink

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

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

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

basepermalink

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

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

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

$app/storespermalink

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

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

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

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

getStorespermalink

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

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

navigatingpermalink

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

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

ts
const navigating: Readable<Navigation | null>;

pagepermalink

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

ts
const page: Readable<Page>;

updatedpermalink

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

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

$env/dynamic/privatepermalink

このモジュールは、実行中のプラットフォームで定義された、実行時の環境変数へのアクセスを提供します。例えば、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/publicpermalink

$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/privatepermalink

.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/publicpermalink

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

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

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

$libpermalink

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

`$lib/server`permalink

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

$service-workerpermalink

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

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

basepermalink

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

ts
const base: string;

buildpermalink

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

ts
const build: string[];

filespermalink

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

ts
const files: string[];

prerenderedpermalink

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

ts
const prerendered: string[];

versionpermalink

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

ts
const version: string;

@sveltejs/kitpermalink

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

errorpermalink

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

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

errorpermalink

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
): HttpError;

failpermalink

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

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

jsonpermalink

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

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

redirectpermalink

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

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

textpermalink

Create a Response object from the supplied body.

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

@sveltejs/kit/hookspermalink

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

sequencepermalink

複数の 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
7031Binding 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/nodepermalink

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

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

getRequestpermalink

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

setResponsepermalink

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

@sveltejs/kit/node/polyfillspermalink

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

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

installPolyfillspermalink

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

crypto
fetch
Headers
Request
Response

ts
function installPolyfills(): void;

@sveltejs/kit/vitepermalink

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

sveltekitpermalink

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

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

previous Command Line Interface

next Types

Modules

$app/environmentpermalink

browserpermalink

buildingpermalink

devpermalink

versionpermalink

$app/formspermalink

applyActionpermalink

deserializepermalink

enhancepermalink

$app/navigationpermalink

afterNavigatepermalink

beforeNavigatepermalink

disableScrollHandlingpermalink

gotopermalink

invalidatepermalink

invalidateAllpermalink

preloadCodepermalink

preloadDatapermalink

$app/pathspermalink

assetspermalink

basepermalink

$app/storespermalink

getStorespermalink

navigatingpermalink

pagepermalink

updatedpermalink

$env/dynamic/privatepermalink

$env/dynamic/publicpermalink

$env/static/privatepermalink

$env/static/publicpermalink

$libpermalink

$lib/serverpermalink

$service-workerpermalink

basepermalink

buildpermalink

filespermalink

prerenderedpermalink

versionpermalink

@sveltejs/kitpermalink

errorpermalink

errorpermalink

failpermalink

jsonpermalink

redirectpermalink

textpermalink

@sveltejs/kit/hookspermalink

sequencepermalink

@sveltejs/kit/nodepermalink

getRequestpermalink

setResponsepermalink

@sveltejs/kit/node/polyfillspermalink

installPolyfillspermalink

@sveltejs/kit/vitepermalink

sveltekitpermalink

`$lib/server`permalink