FrontEnd

SvelteのStore入門

投稿日:2021年2月1日 更新日:

はじめに

前回の記事では、Svelteの概要について紹介しました。そこで、今回はSvelteのStoreについて、どのように定義してどのように使用するかを紹介します。

SvelteにおけるStoreの概要

始めに、SvelteにおけるStoreについて、概要を説明します。

Storeの条件

Svelteでは、以下の条件に当てはまるものがStoreとみなされます。

  • constとして定義されている
  • subscribe関数および、unsubscribe関数が実装されている

また、subscribe関数および、unsubscribe関数には、それぞれ守るべき条件が定められていますが、ここでは割愛します。詳しく知りたい方は、こちらを参照してください。

Storeの種類

Svelteでは、できることが異なる3種類のStoreが定義できます。

  • writable(値の更新および取得が可能)
  • readable(値の取得のみ可能)
  • derived(他の複数のStoreと依存関係にある)

次からは、これらのStoreの実装と使い方を説明します。

Storeの実装と使い方

これらのStoreは、svelte/storeモジュールを使って実装します(このモジュールを使わずに実装することもできます。詳しくはこちらを参照してください)

始めに、最も基本的なwritableのStoreについて、公式サイトの実装例を見ていきます。

Writable Store

外部のモジュールから設定可能な値を持つStoreです。

実装例

Storeの作成は writable(value: any, (set: (value: any) => void) => () => void) 関数で行ます。第1引数は初期値で、第2引数はsubscriberが0から1に変わった時にのみ実行される関数(省略可能)です。

使用例1

それぞれの処理を個別に説明します。

  1. 必要なモジュールを読み込みます
  2. Storeの値を反映させる変数を定義します
  3. Storeをsubscribeし、unsubscribe関数を受取ります
  4. モジュールの解放時に、Storeをunsubscribeします
  5. Storeの値をincrementします
  6. Storeの値をdecrementします
  7. Storeの値をresetします

使用例2

使用例1では、Storeの値を反映させる変数をわざわざ定義しましたが、実はこれは不要です。以下の例のように、 $count で直接参照することができます。

ただし、注意点として、このようにStoreを参照するには、Store側がトップレベルスコープで宣言されている必要があります。また、$で始まる名前はすべてStoreを参照しているものとみなされるので、変数名として使用することはできません。

また、通常の変数と同じように、bindingすることができます。

Readable Store

外部のモジュールから参照可能な値を持つStoreです。外部のモジュールから値を更新することはできません。

実装例

Storeの作成は readable(value: any, (set: (value: any) => void) => () => void) 関数で行ます。引数の内容はwritableを同じですが、第二引数が必須となっています(Storeを更新する手段がなくなってしまうため)

例では、1秒毎に現在時刻に上書きされます。

使用例

使い方については、Writable Storeの使用例2と変わりません。

Derived Store

他の複数のStoreと依存関係を持つStoreです。これらの依存関係が更新されるたびにコールバックが実行されます。

実装例

Storeの作成は derived(a, callback: (a: any, set: (value: any) => void) => void | () => void, initial_value: any) 関数で行ます。

それぞれの処理を個別に説明します。

  1. 参照のみ可能なStoreを定義する
  2. 計算にしようするため、開始時刻を保存しておく
  3. 1で定義したStoreと依存関係のあるStoreを定義する
  4. Storeの値を1の値(現在時刻)から開始時刻を引いた値に更新する

実装例2

また、引数には配列を渡すこともできますし、readableと同様に、Set関数のコールバックを渡すこともできます。

使用例

こちらも使い方については、Writable Storeの使用例2と変わりません。

Storeの応用

Storeにはsubscribe関数のような必須の関数の他に、独自の関数を定義することもできます。

実装例

例のように、increment、decrement、resetの関数を含むことができ、外部のモジュールからの利用を制限することができます。

使用例

このように、外部のモジュールからは値の参照、increment、decrement、resetのみが可能です。

さいごに

SvelteのStoreの実装と使い方について紹介しました。Svelte自体にStore機能が内包されているため、Vuexのように外部モジュールを導入しなくて良い点もポイントだと思います。

おすすめ書籍

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発 プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発 Svelte 3 Up and Running: A fast-paced introductory guide to building high-performance web applications with SvelteJS

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

Go言語

Go WebAssemblyでPromiseを使って非同期化してみた

1 はじめに2 Go WebAssemblyで非同期化のコード3 Promise化する4 おまけ5 さいごに6 おすすめ書籍 はじめに 先日WebAssemblyに入門して、実際に以下のチュートリアル ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

フォロー

blog-page_side_responsive

2021年2月
 123456
78910111213
14151617181920
21222324252627
28  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。