0Pricing
Sveltejs Academy · レッスン

Contextを使った複合コンポーネント

Contextを通じて状態を共有する、複数のパーツから成るコンポーネントを構築します。

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

複合コンポーネント

複合コンポーネントとは、1つの論理的なUIを、連携して動作する複数のサブコンポーネントに分けたものです（Tabs + Tab + TabPanel）。

Contextによる共有状態

親が共有状態をContextに設定し、子がgetContextを通じて読み取ります。

<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });

子によるContextの読み取り

各TabとTabPanelが共有APIを取得します。

<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");

疎結合

子は親を直接参照せず、Contextを通じて通信します。

合成可能なAPI

利用側はサブコンポーネントを自由に並べ替え、カスタマイズできます。

<Tabs>
  <TabList>
    <Tab id="a">A</Tab>
    <Tab id="b">B</Tab>
  </TabList>
  <TabPanel id="a">Content A</TabPanel>
  <TabPanel id="b">Content B</TabPanel>
</Tabs>

例

Tabs、Accordion、Menu、Listbox、Stepsです。

命名規則

分かりやすさのため、共通のプレフィックスまたは名前空間付きのエクスポートを使用します。

import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";

型安全なContext

共有API用に、symbolキーと型を定義します。

誤った使用時のエラー

子がContextを見つけられない場合は、利用側を案内する分かりやすいエラーをスローします。

再利用性

複合コンポーネントは、利用側が構成を制御できるため、高い再利用性を備えています。

ビルダーとの組み合わせ

複合コンポーネントでは、ヘッドレスなアクセシビリティを実現するため、内部でビルダーパターンを使うことがよくあります。

理解度チェック

複合コンポーネントは、どのように状態を共有しますか。

まとめ

複合コンポーネントは、Contextを通じて連携する、合成可能なサブコンポーネントにUIを分割します。

よくある質問

「Contextを使った複合コンポーネント」レッスンは無料ですか？

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

「Contextを使った複合コンポーネント」で何を学びますか？

Contextを通じて状態を共有する、複数のパーツから成るコンポーネントを構築します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Contextを使った複合コンポーネント」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. snippetによるRender Props
  2. 高階コンポーネント
  3. ヘッドレスUIのBuilderパターン
  4. Contextを使った複合コンポーネント
← Sveltejs Academyに戻る