アプリケーションの状態管理

Svelte における状態管理は、アプリケーション内でデータの流れを制御し、コンポーネント間でのデータ共有を容易にする方法です。この章では、ストアの概念、リアクティブな値とステートメント、コンテキスト API について学び、具体的な例を通して理解を深めます。

1. ストアの概念と使用方法

Svelte のストアは、アプリケーションの状態を管理するための中央集権的な場所です。ストアを使用すると、複数のコンポーネント間で状態を共有し、リアクティブな更新を自動的に行うことができます。

例: シンプルなカウンターストア

stores.js:

import { writable } from 'svelte/store';

export const count = writable(0);

このコードは、初期値0を持つリアクティブなストアcountを作成します。writable関数は、更新と購読のメソッドを持つストアを返します。

コンポーネントでの使用方法:

<script>
  import { count } from './stores.js';

  function increment() {
    count.update((n) => n + 1);
  }
</script>

<button on:click="{increment}">クリック</button>
<p>カウント: {$count}</p>

$記号を使用してストアの値を購読し、リアクティブな更新を行います。count.updateメソッドを使用してストアの値を更新します。

2. リアクティブな値とステートメント

Svelte はリアクティブな宣言をサポートしており、変数の値が変更されると自動的に関連するコードが再実行されます。

例: リアクティブな計算

<script>
  let count = 0;
  $: doubled = count * 2;
</script>

<button on:click={() => count += 1}>カウントアップ</button>
<p>カウント: {count}</p>
<p>2倍: {doubled}</p>

$:を使用することで、countの値が変わるたびにdoubledが自動的に更新されるようになります。

3. コンテキスト API とグローバルステートの管理

コンテキスト API を使用すると、コンポーネントツリーを介してデータを渡すことができます。これは、親コンポーネントから直接子コンポーネントへのプロパティの受け渡しを避けたい場合に便利です。

例: テーマコンテキストの使用

ThemeContext.svelte:

<script>
  import { createContext, getContext } from 'svelte';
  const ThemeContext = createContext('light');

  export function useTheme() {
    return getContext(ThemeContext);
  }
</script>

親コンポーネントでコンテキストを設定し、子コンポーネントで使用する方法:

親コンポーネント:

<script>
  import { setContext } from 'svelte';
  import ChildComponent from './ChildComponent.svelte';

  setContext('theme', 'dark');
</script>

<ChildComponent />

子コンポーネント:

<script>
  import { useTheme } from './ThemeContext.svelte';
  const theme = useTheme();
</script>

<p>現在のテーマ: {theme}</p>

この方法で、テーマ情報をコンポーネントツリーを通じて渡すことができます。子コンポーネントはuseTheme関数を使用してテーマを購読し、コンテキストから直接テーマ情報を取得します。