追加パッケージなしで利用可能！ ページ全体の状態を統一的に管理できる「Svelte」のストア機能を紹介

Webページ用UIフレームワーク「Svelte」の活用 第5回

ストアの自動サブスクライブ

　リスト2の、ストアをサブスクライブ／アンサブスクライブする実装には、簡略化した記述方法が用意されています。

　図1と同じ挙動となるp002-auto-subscriptionsサンプルで説明します。このサンプルで、カウンター値を表示するコンポーネントの実装はリスト4の通りです。

［リスト4］ストアを自動サブスクライブする実装（p002-auto-subscription/src/routes/CountDisplay.svelte）

<script lang="ts">
  import { count } from '$lib/store';
</script>

<div class="container">
  <div>CountDisplayコンポーネント</div>
  <div class="count">{$count}</div> <!--（1）-->
</div>

　<script>部でインポートしたcountストアを利用して、（1）の通り「$count」と$を付与して記述することで、そのストアの内容を表示するとともに、サブスクライブ／アンサブスクライブを自動的に行ってくれます。

読み取り可能なストアとDerivedストア

　これまで利用してきた書き込み可能なストアのほかに、Svelteで利用できる「読み取り可能なストア」「Derivedストア」について、現在日時を取得して画面に表示する図3のサンプルで説明します。

図3：読み取り可能なストアとDerivedストアのサンプル（p003-readable-derived）

　図3のページ全体に対応するコンポーネント（+page.svelteファイル）の記述はリスト5の通りです。リスト4同様、ストア名に「$」を付与して記述します。

［リスト5］図3のページ全体に対応するコンポーネント（p003-readable-derived/src/route/+page.svelte）

<h3>読み取り可能なストア</h3>
<div>{$dateTime}</div>
<h3>Derivedストア</h3>
<div>{$formattedDateTime}</div>

読み取り可能なストア

　読み取り可能なストアは、読み取りだけが可能で、書き込みができないストアです。図3のサンプルでは、store.tsにリスト6の通り実装されています。

［リスト6］読み取り可能なストアの実装（p003-readable-derived/src/lib/store.ts）

export const dateTime = readable( // ...（1）
  // ストアの初期値 ...（2）
  new Date(),
  // サブスクライブ関連処理 ...（3）
  set => {
    // サブスクライブ時の処理 ...（4）
    const intervalId = setInterval(() => {
      set(new Date());
    }, 1000);
    // アンサブスクライブ時の処理 ...（5）
    return () => {
      clearInterval(intervalId);
    }
  });

　読み取り可能なストアは、（1）のreadable関数で定義します。関数の第1引数（2）にはストアの初期値、第2引数（3）にはサブスクライブ／アンサブスクライブ時の処理を定義した関数を渡します。

　（3）の関数にはストアの値を設定するset関数が渡されるので、それを利用してサブスクライブ時の処理を記述します。ここでは（4）で、setInterval関数を利用して定期的にset関数を実行し、現在日時を設定するようにします。一方、アンサブスクライブ時の処理は（3）の関数の戻り値として記述します。ここでは（5）でclearInterval関数を実行して、サブスクライブ時に開始した定期実行を停止します。

Derivedストア

　Derivedストアは、他のストアをもとにして導出されるストアです。Svelteのコンポーネントにおけるリアクティブ宣言や、Vue.jsのコンポーネントにおける算出プロパティと似た機能といえます。図3のサンプルでは、store.tsにリスト7の通り実装されています。

［リスト7］Derivedストアの実装（p003-readable-derived/src/lib/store.ts）

export const formattedDateTime = derived( // ...（1）
  // もとにするストア ...（2）
  dateTime,
  // ストアの値（ここでは日時をフォーマットして返却） ...（3）
  $dt => formatter.format($dt)
);

　Derivedストアは、（1）のderived関数で定義します。関数の第1引数（2）にはもとにするストア、第2引数（3）にはストアの値を返却する関数を渡します。ここではformatter.formatメソッドで、dateTimeストアに格納された日時をフォーマットして返します。

　なお（3）で利用しているformatterは、リスト8の通り定義しています。Intl.DateTimeFormatメソッドの利用法は、Mozillaが公開しているドキュメントも参考にしてください。

［リスト8］Date型変数をフォーマットするformatterの定義（p003-readable-derived/src/lib/store.ts）

const formatter = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'medium',
  timeStyle: 'medium'
});