概要

• Sveltekit のルーティングで slug を用いた時の話
• ページで slug の値を取り出す際に Key block を活用した
• Svelte 初心者の備忘録です。悪しからず..

課題感: slug の値が変わったとき..

もともとの課題として 「ページ遷移して slug の値が変わった時に反映されて欲しい」 というものがありました。

これを実現するために次のようなコードを書いてました。

<!-- ./routes/notes/[id]/+page.svelte -->
<script lang="ts">
	import { page } from '$app/stores'

	let id;
	$: id = $page.params.id
</script>

id: {id}

パスに [id] を入れ +page.svelte で取り出してます。

例えば /notes/1 というページから /notes/2 というページへ遷移したとき、変数 id の値が更新されて欲しいので、 リアクティブステートメントを用いてます。

動き的にはこれで良いのですが、どうしても2行になってしまいます。
slug が複数あるとき冗長に感じてました。

Key block を活用する

Key block は変数の値が変化したとき中身を再作成してくれます。docs

<script lang="ts">
	import { page } from '$app/stores'
	import NoteDetail from './NoteDetail.svelte'
</script>

{#key $page.params}
	<NoteDetail id={$page.params.id} />
{/key}

Key block を書きつつコンポーネントの責務を分けました。
「+page.svelte がパスを扱い NoteDetail.svelte が表示を担当する」というイメージです。

好き嫌いのレベルの話だとは思いますが、実装がすっきりしたように思えます。

感想

Svelte 5 では Runes という新機能が入り、リアクティビティの制御方法が加わるので楽しみです。

Links

• Key block