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


関連記事

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

フォロー

blog-page_side_responsive

2021年2月
 123456
78910111213
14151617181920
21222324252627
28  

アプリ情報

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