Sveltejs Academy · レッスン

ContextとStore:それぞれを使う場面

さまざまな状況で状態を共有する際のContextとstoreを比較します。

レッスン 2/413 ステップ

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

2つのパターン

ストアはアプリ全体で共有し、コンテキストは特定のサブツリー内で共有します。

グローバルな使用例

ストアは、現在のユーザー、テーマ、通知など、横断的な関心事に適しています。

スコープ付きの使用例

コンテキストは、フォームコンポーネントが子孫とレジストリを共有する場合のような、インスタンス単位の状態に適しています。

インスタンスの分離

Formのインスタンスを2つマウントすると、それぞれが独自のコンテキストを持ちます。ストアでは両方の間で状態が共有されます。

SSRに関する考慮事項

SSRでは、注意しないとストアによってリクエスト間で状態が漏れることがあります。コンテキストはインスタンス単位に限定されるため、リクエスト間で安全です。

リアクティブなコンテキスト

サブツリー内に限定されたリアクティブな状態には、コンテキスト経由でストアを渡してください。

混在を避ける

コードの動作を予測しやすくするため、関心事ごとに1つの仕組みを選んでください。

コンポーネントライブラリ

TabsやAccordionのような複合コンポーネントでは、兄弟コンポーネント間の連携にコンテキストを多用します。

依存性注入

ラッパーからすべての子へサービスや設定を注入する用途では、コンテキストが最適です。

テスト

ラッパーコンポーネントを入れ替えるだけで、テスト時のコンテキストを簡単に差し替えられます。

判断の目安

アプリ全体で使うシングルトンならストア、インスタンス単位または機能単位のサブツリーならコンテキストです。

クイックチェック

ストアよりもコンテキストを選ぶのはどのような場合ですか?

まとめ

グローバルな状態にはストア、スコープが限定された状態にはコンテキストを使用します。複合コンポーネントや依存性注入にはコンテキストが適しています。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
41
レッスン
163

よくある質問

「ContextとStore:それぞれを使う場面」レッスンは無料ですか?

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

「ContextとStore:それぞれを使う場面」で何を学びますか?

さまざまな状況で状態を共有する際のContextとstoreを比較します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ContextとStore:それぞれを使う場面」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. setContext()とgetContext()
  2. ContextとStore:それぞれを使う場面
  3. TypeScriptによる型付きContext
  4. 依存性注入のためのContext
← Sveltejs Academyに戻る