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でWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

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

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

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

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

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

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

フォロー

blog-page_side_responsive

2021年2月
 123456
78910111213
14151617181920
21222324252627
28  

アプリ情報

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