Storeアーキテクチャ：機能モジュール
カプセル化したアクションとセレクターを備えた機能モジュールにstoreを整理します。
「Storeアーキテクチャ：機能モジュール」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
機能モジュールを使う理由
大規模なアプリでは、ストアを機能ごとに整理すると効果的です。例としてcart/、auth/、orders/があります。
各モジュールがエクスポートするもの
各モジュールは、その機能の状態、派生値、アクションをエクスポートします。
// $lib/cart/store.js
export const items = writable([]);
export function add(item) { items.update(i => [...i, item]); }カプセル化
ストアの内部の詳細はモジュール内に留め、利用側ではエクスポートされたアクションを使います。
セレクター
よく使うクエリ用に、派生セレクターを提供します。
export const total = derived(items, ($items) => $items.reduce((s, i) => s + i.price, 0));テスト
各機能は、アプリ全体を起動しなくても分離してテストできます。
コンポジション
必要なものをインポートして機能を組み合わせ、暗黙的な相互依存を避けます。
命名規則
利用側がどこを見ればよいか分かるように、一貫した命名を採用します。
TypeScriptモデル
機能モジュール内で型を定義し、ストアと一緒にエクスポートします。
遅延初期化
ルートごとの機能では、そのルートにアクセスしたときにモジュールを遅延インポートします。
機能間の調整
結合せずに調整するには、イベントバスまたは上位レベルのオーケストレーターを使います。
スケーリング
機能モジュールはスケールしやすく、各チームがそれぞれの機能フォルダーを担当できます。
クイックチェック
機能モジュールの主な利点は何ですか。
まとめ
状態、アクション、セレクターを含む機能モジュールにストアを整理します。機能ごとに整理されたAPIをエクスポートします。
よくある質問
「Storeアーキテクチャ：機能モジュール」レッスンは無料ですか？
はい。「Storeアーキテクチャ：機能モジュール」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「Storeアーキテクチャ：機能モジュール」で何を学びますか？
カプセル化したアクションとセレクターを備えた機能モジュールにstoreを整理します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Storeアーキテクチャ：機能モジュール」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Storeアーキテクチャ：機能モジュール
- StoreによるEvent Busパターン
- 楽観的UI更新
- Storeの履歴によるUndo/Redo