Svelte入門:SvelteKitでのState管理 -Vol.5-

スポンサーリンク
Svelte入門:SvelteKitでのState管理 -Vol.5- 用語解説
Svelte入門:SvelteKitでのState管理 -Vol.5-
この記事は約2分で読めます。
よっしー
よっしー

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

今日は、SvelteKitでのstate管理について解説しています。

スポンサーリンク

背景

SvelteKitでのstate管理について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

SvelteKitでのstate管理について

クライアントのみのアプリの構築に慣れている場合、サーバーとクライアントにまたがるアプリでの状態(state)管理は困難に思えるかもしれません。このセクションでは、よくある落とし穴を回避するためのヒントを紹介します。

URLに状態を保存する

リロード後も維持されるべき状態や、サーバーサイドレンダリング(SSR)に影響を与えるべき状態(例えば、テーブルのフィルターやソートルールなど)がある場合、URLの検索パラメータ(?sort=price&order=ascendingのような)はそれらを配置するのに適した場所です。これらは<a href="..."><form action="...">属性に配置したり、goto('?key=value')を通してプログラム的に設定したりできます。これらのパラメータはload関数内ではurlパラメータを通じてアクセスでき、コンポーネント内では$page.url.searchParamsを通じてアクセスできます。

スナップショットに一時的な状態を保存する

「アコーディオンが開いているか?」といった一部のUI状態は使い捨てです – ユーザーが別のページに移動したりページを更新したりしても、その状態が失われても問題ありません。一方で、ユーザーが別のページに移動して戻ってきた時に、データを保持したい場合もあります。しかし、そのような状態をURLやデータベースに保存するのは大げさすぎるでしょう。このような場合のために、SvelteKitはスナップショットを提供しています。スナップショットを使用すると、コンポーネントの状態を履歴エントリーに関連付けることができます。

おわりに

今日は、 SvelteKitでのstate管理について解説しました。

よっしー
よっしー

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

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

コメント

タイトルとURLをコピーしました