0Pricing
Sveltejs Academy · レッスン

subscribe/set/updateによるカスタムStoreパターン

subscribeメソッドとカスタムアクションを公開し、ロジックをカプセル化したstoreを構築します。

「subscribe/set/updateによるカスタムStoreパターン」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

ストアの契約

subscribe(fn)メソッドを持ち、購読解除関数を返すオブジェクトは、Svelteストアとして有効です。

writableをラップする

writableをラップして用途を絞ったAPIを公開すると、カスタムストアを作成できます。

function createCounter() {
  const { subscribe, set, update } = writable(0);
  return {
    subscribe,
    increment: () => update(n => n + 1),
    reset: () => set(0)
  };
}

使用する

インスタンスをエクスポートし、他のストアと同じように利用します。

export const counter = createCounter();

コンポーネントで使用する

$counterで値を読み取り、counter.increment()のようなドメインメソッドを呼び出します。

ロジックのカプセル化

内部ロジックは非公開のままにし、選択したメソッドだけを公開します。

グローバル変数より優れている点

カスタムストアは、あちこちに散在するグローバルな変更と異なり、テストや置き換えが可能です。

非同期メソッド

メソッドを非同期にして、準備ができたらsetを呼び出すこともできます。

load: async () => set(await fetch("/api").then(r => r.json()))

型安全

TypeScriptでは戻り値の形状に型を付けることで、利用側で完全なIntelliSenseを利用できます。

ストアと組み合わせる

カスタムストアは、内部で他のストアに依存して派生状態を作成できます。

シングルトンとファクトリ

共有するインスタンスを1つだけ持つのか、複数のインスタンスを作成するファクトリにするのかを決めます。

実際のパターン

アプリ内のカート、認証、テーマなど、さまざまなドメインエンティティに使用できます。

クイックチェック

オブジェクトが有効なSvelteストアになる条件は何ですか。

まとめ

カスタムストアはwritableをラップし、ドメイン固有のメソッドを公開することで、内部ロジックをカプセル化します。

よくある質問

「subscribe/set/updateによるカスタムStoreパターン」レッスンは無料ですか？

はい。「subscribe/set/updateによるカスタムStoreパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「subscribe/set/updateによるカスタムStoreパターン」で何を学びますか？

subscribeメソッドとカスタムアクションを公開し、ロジックをカプセル化したstoreを構築します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「subscribe/set/updateによるカスタムStoreパターン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 計算Storeのderived()
  2. subscribe/set/updateによるカスタムStoreパターン
  3. WritableからReadableへ
  4. Storeの契約と相互運用性
← Sveltejs Academyに戻る