Modules
Edit this page on GitHubSvelteKit では、数多くのモジュールがアプリケーションで利用可能です。
$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>
deserializepermalink
フォーム送信からのレスポンスをデシリアライズするためにこの関数を使用してください。 使用方法:
ts
import {deserialize } from '$app/forms';async functionhandleSubmit (event ) {constresponse = awaitfetch ('/form?/action', {method : 'POST',body : newFormData (event .target )});constresult =deserialize (awaitresponse .text ());// ...}
ts
function deserialize<Success extends Record<string, unknown> | undefined = Record<string, any>,Invalid extends Record<string, unknown> | undefined = Record<string, any>
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.*/): { destroy(): void };
$app/navigationpermalink
ts
import {afterNavigate ,beforeNavigate ,disableScrollHandling ,goto ,invalidate ,invalidateAll ,preloadCode ,preloadData } from '$app/navigation';
afterNavigatepermalink
現在のコンポーネントがマウントされるときや、新しい URL に移動するときに、与えられた callback
を実行するライフサイクル関数です。
afterNavigate
はコンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている間、アクティブな状態を維持します。
ts
beforeNavigatepermalink
リンクをクリックしたり、goto(...)
を呼び出したり、ブラウザの 戻る/進む を使うなどして新しい URL にナビゲーションするその直前にトリガーされるナビゲーションインターセプターです。
cancel()
を呼び出すと、ナビゲーションが完了するのを中止します。ナビゲーションが直接現在のページをアンロードした場合、cancel
はネイティブブラウザの
アンロード確認ダイアログが表示されます。この場合、navigation.willUnload
が true
になります。
ナビゲーションがクライアントサイドではない場合、navigation.to.route.id
は null
になります。
beforeNavigate
はコンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている間、アクティブな状態を維持します。
ts
disableScrollHandlingpermalink
ナビゲーション後のページ更新の時にこれが(例えば onMount
、afterNavigate
の中や action で)呼び出された場合、SvelteKit の組み込みのスクロール処理を無効にします。
ユーザーの期待する動きではなくなるため、一般的には推奨されません。
ts
function disableScrollHandling(): void;
gotopermalink
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>;
invalidatepermalink
現在アクティブなページに属している 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 parametersimport {invalidate } from '$app/navigation';invalidate ((url ) =>url .pathname === '/path');
ts
function invalidate(url: string | URL | ((url: URL) => boolean)): Promise<void>;
invalidateAllpermalink
現在アクティブなページに属する全ての load
関数を再実行させます。ページが更新されたときに解決される Promise
を返します。
ts
function invalidateAll(): Promise<void>;
preloadCodepermalink
まだ取得されていないルート(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>;
preloadDatapermalink
指定されたページをプログラム的にプリロードします、つまり
- そのページのコードが取得され読み込まれていることを確認し、
- そのページの 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
pagepermalink
ページのデータの値を含む読み取り可能なストア(readable store)です。
サーバー上では、この store はコンポーネントの初期化時にのみサブスクライブ(subscribe)できます。ブラウザでは、いつでもサブスクライブ(subscribe)できます。
ts
updatedpermalink
読み取り可能なストア(readable store)で、初期値は false
です。version.pollInterval
が 0 以外の値である場合、SvelteKit はアプリの新しいバージョンをポーリングし、それを検知するとこのストアの値を true
に更新します。updated.check()
は、ポーリングに関係なくすぐにチェックするよう強制します。
サーバー上では、この store はコンポーネントの初期化時にのみサブスクライブ(subscribe)できます。ブラウザでは、いつでもサブスクライブ(subscribe)できます。
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
からの環境変数が含まれます。本番(Inprod
)では、この動作は使用する 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 が処理するのを妨げてしまいます。
errorpermalink
ts
failpermalink
ActionFailure
オブジェクトを作成します。
ts
function fail<T extends Record<string, unknown> | undefined = undefined>(status: number,data?: 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
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 ライクな方法でシーケンス化するヘルパー関数です。
ts
import {sequence } from '@sveltejs/kit/hooks';Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async functionfirst ({event ,resolve }) {console .log ('first pre-processing');constresult = awaitresolve (event , {transformPageChunk : ({html }) => {// transforms are applied in reverse orderconsole .log ('first transform');returnhtml ;}});Binding element 'event' implicitly has an 'any' type.Binding element 'resolve' implicitly has an 'any' type.7031console .log ('first post-processing');
7031Binding element 'event' implicitly has an 'any' type.Binding element 'resolve' implicitly has an 'any' type.returnresult ;}Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async functionsecond ({event ,resolve }) {console .log ('second pre-processing');constresult = awaitresolve (event , {transformPageChunk : ({html }) => {console .log ('second transform');returnhtml ;}});console .log ('second post-processing');returnresult ;}export consthandle =sequence (first ,second );
上記の例はこのようにプリントされます:
first pre-processing
second pre-processing
second transform
first transform
second post-processing
first post-processing
@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[]>;