---
title: SvelteのStoreについて
tags: 
author: [Norihiro Narayama](https://www.docswell.com/user/northprint)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/3EKXMXPV7D.jpg?width=480
description: SvelteのStoreについて by Norihiro Narayama
published: December 28, 23
canonical: https://www.docswell.com/s/northprint/K6Y4VL-2023-12-28-175020
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/3EKXMXPV7D.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/L735Y54QE5.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/87DD5DQW7G.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/VJPXGXLX78.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/2EVL6LQ3JQ.jpg)

実践


# Page. 6

![Page Image](https://bcdn.docswell.com/page/57GXNXWYEL.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4EQ8Q836JP.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/KJ42N21ME1.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LE1M5MGY7G.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GEW353K1E2.jpg)



# Page. 11

![Page Image](https://bcdn.docswell.com/page/47ZVNVZXE3.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/YJ6585ZP7V.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GJ5Y9YWPJ4.jpg)



# Page. 14

![Page Image](https://bcdn.docswell.com/page/LE35Y546J5.jpg)

まとめ


# Page. 15

![Page Image](https://bcdn.docswell.com/page/8EDD5DQMEG.jpg)

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


