SvelteKit

ディレクトリ構成

src/lib - 共通のライブラリコードを配置するディレクトリで、ここに置いたモジュールは$lib経由でimport可能

src/lib/server - サーバでのみ利用したいコードを置くディレクトリで、$lib/server経由でimport可能

src/params - Routing向けのMatcherを配置するディレクトリ

src/routes - Routing用にページコンポーネントなどを配置するディレクトリ

src/app.html - テンプレート用のHTMLファイル

src/error.html - エラー用のテンプレートHTMLファイル

src/hooks.js - フック

src/service-worker.js - サービスワーカー

static/ - 静的なアセットを配置するディレクトリ

.svelte-kit/ - SvelteKitが生成したファイルが配置されるディレクトリ

Routing

src/routes配下の構造を元に動作します

/helpにアクセスした際は、src/routes/help/+page.svelteがレンダリングされます

+page.svelteのレンダリング前に追加でデータの読み込みを行いたい際は、同一ディレクトリに+page.jsを用意し、load()をexportします

注意点として、+page.jsはSSR時だけでなくCSR時も実行されます

もしSSR時のみ実行して欲しい場合は、+page.jsではなく+page.server.jsを用意します

そのため、環境変数の参照やDBへのアクセスなどが必要な際は、+page.jsの代わりに+page.server.jsを用意する必要があります

動的なRouteを定義したいときは、src/routes/books/[id]のようなディレクトリを用意します

+server.jsでGETやPOSTなどの関数をexportしておくと、定義したエンドポイントにアクセスされた際に該当する関数が呼ばれます

Formアクション

+page.server.jsでactionsをexportすることで、対応するページの<form>から送信されたPOSTリクエストを処理できます

デフォルトではactions.defaultで定義した関数が呼ばれます (default action)

actions.default以外の関数を呼びたい際は、<form>のaction属性に/<対象の関数名>の形式でクエリパラメータを付与する必要があります (named action)

例) actions.createを呼びたい場合は、<form method="POST" action="?/create">のように指定します

default actionとnamed actionは併用不可です

エラーハンドリング

load()の実行中にエラーが発生すると、対象の+page(.server).jsから最も近くにある+error.svelteがレンダリングされます

@sveltejs/kitでいくつかのヘルパーが提供されています

error()で作成したエラーをthrowすることで、指定されたステータスコードのレスポンスを返却できます

fail()を使うと、指定したステータスコードとともにデータを返却できます (返却されたデータはページコンポーネントからはform経由で参照可能)

上記以外の方法でエラーが発生した際は、handleErrorフックが実行されます

その他