こんにちは。よっしーです(^^)
今日は、ルーティングについて解説しています。
背景
ルーティングについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
ルーティング
SvelteKitのファイルシステムベースのルーターについての主要なポイントは以下の通りです：
- 基本概念：
- ルートは、コードベース内のディレクトリ構造によって定義されます。
- ユーザーがアクセスできるURLパスは、これらのディレクトリに対応します。
- ディレクトリ構造とルートの対応：
src/routesはルートルート（/）に対応src/routes/aboutは/aboutルートを作成src/routes/blog/[slug]は動的パラメータslugを持つルートを作成
例：/blog/hello-world
- カスタマイズ：
- プロジェクト設定を編集することで、
src/routesを別のディレクトリに変更可能
- ルートファイル：
- 各ルートディレクトリには、1つ以上のルートファイルが含まれます。
- ルートファイルは
+プレフィックスで識別されます。
- ルーティングの基本ルール：
- すべてのファイルはサーバー上で実行可能
+serverファイル以外のすべてのファイルはクライアント上でも実行される+layoutと+errorファイルは、自身のディレクトリだけでなくサブディレクトリにも適用される
- 動的ルーティング：
[slug]のような角括弧を使用して動的パラメータを定義できます。- これにより、同じルートファイルで異なるURLパスを処理できます。
このファイルシステムベースのアプローチにより、SvelteKitは直感的で柔軟なルーティングシステムを提供しています。これにより、開発者はアプリケーションの構造を簡単に理解し、管理することができます。
+page
+page.svelte
+page.svelte コンポーネントはアプリのページを定義します。デフォルトでは、ページは最初のリクエストではサーバー (SSR) でレンダリングされ、その後のナビゲーションではブラウザー (CSR) でレンダリングされます。
サンプルコード:
// src/routes/+page.svelte
<h1>Hello and welcome to my site!</h1>
<a href="/about">About my site</a>// src/routes/about/+page.svelte
<h1>About this site</h1>
<p>TODO...</p>
<a href="/">Home</a>// src/routes/blog/[slug]/+page.svelte
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
<h1>{data.title}</h1>
<div>{@html data.content}</div>SvelteKit は、フレームワーク固有の <Link> コンポーネントではなく、 <a> 要素を使用してルート間を移動することに注意してください。
+page.js
多くの場合、ページはレンダリングされる前にいくつかのデータをロードする必要があります。このために、ロード関数をエクスポートする +page.js モジュールを追加します。
// src/routes/blog/[slug]/+page.js
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
if (params.slug === 'hello-world') {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
};
}
error(404, 'Not found');
}この関数は+page.svelteと並行して実行される。つまり、サーバー側のレンダリング時にはサーバー上で実行され、クライアント側のナビゲーション時にはブラウザ上で実行される。APIの詳細についてはloadを参照してください。
loadと同様に、+page.jsはページの動作を設定する値をエクスポートできます：
export const prerender = true or false or ‘auto’.
export const ssr = true または false
export const csr = true または false
これらの詳細については、ページオプションをご覧ください。
+page.server.js
ロード関数がサーバー上でしか実行できない場合、例えばデータベースからデータをフェッチする必要があったり、APIキーのようなプライベートな環境変数にアクセスする必要がある場合、+page.jsを+page.server.jsにリネームし、PageLoadタイプをPageServerLoadに変更することができる。
// src/routes/blog/[slug]/+page.server.js
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
const post = await getPostFromDatabase(params.slug);
if (post) {
return post;
}
error(404, 'Not found');
}クライアント側のナビゲーションの間、SvelteKit はこのデータをサーバからロードします。つまり、返される値は devalue を使用してシリアライズ可能でなければなりません。APIの詳細についてはloadを参照してください。
page.jsと同様に、+page.server.jsはページオプション（prerender、ssr、csr）をエクスポートできます。
page.server.jsファイルは、アクションをエクスポートすることもできます。loadがサーバーからデータを読み込むのに対し、actionは要素を使ってサーバーにデータを書き込むことができます。アクションの使い方については、フォームアクションのセクションを参照してください。
おわりに
今日は、 ルーティングについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント