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


関連記事

js

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

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 ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

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

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

フォロー

follow us in feedly

blog-page_side_responsive

2021年2月
 123456
78910111213
14151617181920
21222324252627
28 

アプリ情報

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