Svelte入門：SvelteKitでのデータ読み込み -Vol.4-

用語解説

2024.09.25

この記事は約2分で読めます。

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでのデータ読み込みについて解説しています。

背景
SvelteKitでのデータ読み込み
おわりに

背景

SvelteKitでのデータ読み込みについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

SvelteKitでのデータ読み込み

+page.svelte コンポーネント (およびそれに含まれる +layout.svelte コンポーネント) をレンダリングする前に、多くの場合、データを取得する必要があります。これは、ロード関数を定義することによって行われます。

URLデータの利用

多くの場合、ロード関数は何らかの形で URL に依存します。このために、load 関数は URL、route、および params を提供します。

url

オリジン、ホスト名、パス名、searchParams (解析されたクエリ文字列を URLSearchParams オブジェクトとして含む) などのプロパティを含む URL のインスタンス。 url.hash はサーバー上で使用できないため、ロード中にアクセスできません。

一部の環境では、これはサーバー側のレンダリング中のリクエストヘッダーから派生します。たとえば、adapter-node を使用している場合、URL が正しくなるようにアダプターを構成する必要がある場合があります。

route

src/routes を基準とした現在のルートディレクトリの名前が含まれます。

// src/routes/a/[b]/[...c]/+page.js
/** @type {import('./$types').PageLoad} */
export function load({ route }) {
	console.log(route.id); // '/a/[b]/[...c]'
}

params

paramsはurl.pathnameとroute.idから派生します。 /a/[b]/[…c] の Route.id と /a/x/y/z の url.pathname を指定すると、params オブジェクトは次のようになります。

{
	"b": "x",
	"c": "y/z"
}

おわりに

今日は、 SvelteKitでのデータ読み込みについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)