devlog

Sveltekit で slug の値を取り出すとき Key block を活用した

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