React Hooks - 上級

CompoundComponents

柔軟で再利用可能なUIコンポーネント設計パターン

Compound Components とは

親子関係を持つコンポーネントが暗黙的に状態を共有するパターン

従来のアプローチ ❌

<Accordion
  items={[
    { title: "...", content: "..." },
    { title: "...", content: "..." },
  ]}
/>

props で全てのデータを渡す必要がある

Compound Components ✅

<Accordion>
  <AccordionItem title="...">
    コンテンツ
  </AccordionItem>
  <AccordionItem title="...">
    コンテンツ
  </AccordionItem>
</Accordion>

子コンポーネントで柔軟に構成

実践例：アコーディオン

Context API を使用した状態共有

柔軟な構成：子コンポーネントの順序や内容を自由に変更可能
関心の分離：親は状態管理、子は表示に集中
暗黙的な状態共有：props drilling を回避

React.createContext で状態を共有
useContext で子コンポーネントから状態にアクセス
カスタムフックでコンテキストの使用を簡略化

代表的なライブラリでの採用例：

• Radix UI（shadcn/ui の基盤）
• Headless UI
• React Aria
• Chakra UI

Context の作成

親コンポーネントで状態を管理

// Context の作成
const AccordionContext = createContext<{
  activeIndex: number | null;
  setActiveIndex: (i: number) => void;
} | null>(null);

// 親コンポーネント
function Accordion({ children }) {
  const [activeIndex, setActiveIndex]
    = useState<number | null>(null);

  return (
    <AccordionContext.Provider
      value={{ activeIndex, setActiveIndex }}
    >
      {children}
    </AccordionContext.Provider>
  );
}

子コンポーネント

useContext で状態にアクセス

// カスタムフック
function useAccordion() {
  const context = useContext(AccordionContext);
  if (!context) {
    throw new Error(
      "AccordionItem must be used within Accordion"
    );
  }
  return context;
}

// 子コンポーネント
function AccordionItem({ title, children, index }) {
  const { activeIndex, setActiveIndex }
    = useAccordion();
  const isOpen = activeIndex === index;

  return (
    <div onClick={() => setActiveIndex(index)}>
      {title}
      {isOpen && children}
    </div>
  );
}

Next Steps

次のステップ

他の中級・上級サンプルもぜひご覧ください。

カタログを見る