SvelteのStoreについて

2023/12/27 NORIHIRO NARAYAMA SvelteのStoreについて

そもそもの話 • 今日紹介しようとしているsvelte/stroreモジュールを使わなくても、store contract（ストアコンス トラクト）を実装することでstoreを定義することは可能だし、普通のWebアプリケーションではそ ちらの実装の方が良い場合が多いです • だけど今日はあえてsvelte/storeモジュールの紹介をします

Storeとは何か • 状態管理を司る機能をStoreと称する事が多い • だいたいオブザーバーパターンになっている • ↑そもそもオブザーバーパターンとはなんぞや

オブザーバーパターンとは何か • デザインパターンのひとつ • オブザーバーがサブジェクトを購読し、サブジェクトの状態変 化を受け取るような実装

実践

writable • コンポーネントの外側からでも値を設定す ることができるストアを作成する関数 • Setメソッドとupdateメソッドを持つ

• 基本的に、storeのオブジェクトをサブスクライブして使う • $でのサブスクライブがかなりコード省略してくれる

readable • コンポーネントの外側からは値を設定でき ないストアを作成する関数

• readableもwritableも第二引数に関数を取ることが出来る • この関数がどういう動きをするのかというと、サブスクライバーが一個でもサブスクライブすると 動く関数になる • ちなみにサブスクライバーがさらに増えたときには動かない • サブスクライバーが全ていなくなる場合に動く関数を返してやる必要がある

derived • 1つ以上の他のストアからストアを派生さ せる • 既存のストア（単一または複数）に基づい て新しいリアクティブな値を生成したい場 合に使う

まとめ

• $でのサブスクライブがとてもよい • そもそも標準でこの機能が備わっているのがよい • とても直感的に書ける • 他フレームワークからの乗り換えも楽そうだ • やはりSvelteはよい