0Pricing
Sveltejs Academy · レッスン

WritableからReadableへ

writable storeの読み取り側だけを利用者に公開します。

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

読み取り専用を公開する理由

内部では書き込みを行いつつ、利用側には読み取り専用でアクセスさせ、意図しない変更を防ぎたい場合があります。

パターン

writableを非公開にし、subscribeメソッドだけを持つオブジェクトをエクスポートします。

const _user = writable(null);
export const user = { subscribe: _user.subscribe };
export function setUser(u) { _user.set(u); }

外部から変更する経路

書き込み用の明示的な関数を提供します。これにより、変更の入口を1つに集約できます。

メソッドと組み合わせる

カスタムストアのパターンと組み合わせて、subscribeと名前付きのアクションメソッドを提供することがよくあります。

実装を隠す

利用側は、ソースがwritable、derived、外部システムのいずれであるかを知る必要がありません。

テスト

内部のwritableはテスト用に置き換えられます。利用側がそれを意識する必要はありません。

リアクティブな利用側

コンポーネントでは通常どおり$userを使用します。

<p>{$user?.name}</p>

TypeScriptのヒント

わかりやすさのため、エクスポートするオブジェクトにSvelteのReadable<T>型を付けます。

複数の利用側

多くのコンポーネントが購読できます。Svelteが必要な管理をすべて行います。

バリデーションと組み合わせる

内部のwritableに渡す前に、セッター関数で入力値を検証します。

パターンのまとめと使いどころ

特定の方法でのみ変更すべき共有状態がある場合は、いつでもこのパターンを使用してください。

クイックチェック

writableからreadableを作成するにはどうしますか。

復習

非公開の書き込み可能なストアから subscribe だけを公開して、読み取り専用の公開ストアを作成します。

よくある質問

「WritableからReadableへ」レッスンは無料ですか？

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

「WritableからReadableへ」で何を学びますか？

writable storeの読み取り側だけを利用者に公開します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「WritableからReadableへ」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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