2024-05-18
概要
- 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
作成日
2024-05-18
更新日
2024-05-18