Skip to main content

Modules

Edit this page on GitHub

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

$app/env

import { browser, dev, mode, prerendering } from '$app/env';

browser

アプリがブラウザで動作しているか、それともサーバーで動作しているかを示します。

const browser: boolean;

dev

開発モードの場合は true、本番環境の場合は false です。

const dev: boolean;

mode

アプリが動作している Vite.js のモードを示します。config.kit.vite.mode で設定可能です。 Vite.js は、.env.[mode] や .env.[mode].local のような、モードに関する dotenv ファイルを読み込みます。 デフォルトでは、svelte-kit dev の場合は mode=development で、svelte-kit build の場合は mode=production で実行されます。

const mode: string;

prerendering

プリレンダリング時は true、それ以外の場合は false です。

const prerendering: boolean;

$app/navigation

import {
  afterNavigate,
  beforeNavigate,
  disableScrollHandling,
  goto,
  invalidate,
  prefetch,
  prefetchRoutes
} from '$app/navigation';

afterNavigate

ページがマウントされたときや、ページコンポーネントがそのままでも Sveltekit がナビゲーションしたときに実行されるライフサイクル関数です。

function afterNavigate(
  fn: (navigation: { from: URL | null; to: URL }) => void
): void;

beforeNavigate

リンクをクリックしたり、goto を呼び出したり、ブラウザの 戻る/進む を使うなどして新しい URL (内部と外部どちらも含む) にナビゲーションするその直前にトリガーされるナビゲーションインターセプターです。 条件付きでナビゲーションを完了させないようにしたり、次の URL を調べたい場合に便利です。

function beforeNavigate(
  fn: (navigation: {
    from: URL;
    to: URL | null;
    cancel: () => void;
  }) => void
): void;

disableScrollHandling

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

function disableScrollHandling(): void;

goto

SvelteKit が指定された href にナビゲーションしたときに解決する Promise を返します(ナビゲーションに失敗した場合は、Promise はリジェクトされます)。

function goto(
  href: string,
  opts?: {
    replaceState?: boolean;
    noscroll?: boolean;
    keepfocus?: boolean;
    state?: any;
  }
): Promise<void>;

invalidate

現在アクティブなページに属している load 関数が当該リソースを fetch する場合や、invalidate されたリソースがページそのものだったときにページエンドポイントからデータを再フェッチする場合に再実行させます。それに続いてページが更新されたときに解決される Promise を返します。

function invalidate(
  dependency: string | ((href: string) => boolean)
): Promise<void>;

prefetch

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

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

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

function prefetch(href: string): Promise<void>;

prefetchRoutes

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

引数を指定しない場合は全てのルート(routes)を取得します。指定する場合は、ルート(routes)にマッチするパス名、例えば /about (src/routes/about.svelte にマッチ) や /blog/* (src/routes/blog/[slug].svelte にマッチ) のように指定することができます。

prefetch 関数とは異なり、この関数はそれぞれのページの load を呼び出しません。 ルート(routes)のプリフェッチが完了したときに解決される Promise を返します。

function prefetchRoutes(routes?: string[]): Promise<void>;

$app/paths

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

assets

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

svelte-kit dev や svelte-kit preview を実行しているときはアセットがまだ最終的な URL に存在しないため、config.kit.paths.assets に値が指定されている場合はそれが '/_svelte_kit_assets' に置き換えられます。

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

base

config.kit.paths.base にマッチする文字列です。先頭は / で始まる必要があり、末尾は / にしてはいけません(例 /base-path)。空文字(empty string)の場合はこのルールに該当しません。

const base: `/${string}`;

$app/stores

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

ストア(Store)は コンテクスチュアル(contextual) で、ルート(root)コンポーネントの context に追加されます。つまり、session と page はサーバー上の各リクエストごとにユニークであり、同じサーバー上で同時に処理される複数のリクエスト間で共有されません。これにより、session にユーザー固有のデータを含めても安全になります。

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

getStores

getContext をラップしている便利な関数です。コンポーネントの初期化時に呼び出す必要があります。 何らかの理由で、コンポーネントのマウント後までストアのサブスクライブを遅延させたい場合にのみ、これを使用してください。

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

navigating

読み取り可能なストアです。 ナビゲーションを開始すると、その値は { from: URL, to: URL } となります。 ナビゲーションが終了すると、その値は null に戻ります。

const navigating: Readable<Navigation | null>;

page

ページ(page) のデータを値として持つ読み取り可能なストアです。

const page: Readable<Page>;

session

書き込み可能なストアで、初期値は getSession の戻り値です。 書き込み可能ですがその変更内容をサーバー上で永続化しません。それはご自身で実装する必要があります。

const session: Writable<App.Session>;

updated

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

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

$lib

This is a simple alias to src/lib, or whatever directory is specified as config.kit.files.lib. It allows you to access common components and utility modules without ../../../../ nonsense.

$service-worker

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

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

build

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

const build: string[];

files

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

const files: string[];

prerendered

プリレンダリングされたページとエンドポイントに合致するパス名の配列です。

const prerendered: string[];

version

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

const version: string;

@sveltejs/kit/hooks

sequence

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

src/hooks.js
ts
import { sequence } from '@sveltejs/kit/hooks';
 
/** @type {import('@sveltejs/kit').Handle} */
async function first({ event, resolve }) {
  console.log('first pre-processing');
  const result = await resolve(event);
  console.log('first post-processing');
  return result;
}
 
/** @type {import('@sveltejs/kit').Handle} */
async function second({ event, resolve }) {
  console.log('second pre-processing');
  const result = await resolve(event);
  console.log('second post-processing');
  return result;
}
 
export const handle = sequence(first, second);

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

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

@sveltejs/kit/node

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

getRequest

function getRequest(
  base: string,
  request: import('http').IncomingMessage
): Promise<Request>;

setResponse

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

@sveltejs/kit/node/polyfills

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

installPolyfills

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

  • crypto
  • fetch
  • Headers
  • Request
  • Response
function installPolyfills(): void;
previous Hooks
next Service workers
We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.