Reactで柔軟なコンポーネント設計！Compound Componentsパターンをマスターしよう

目次

はじめに
Compound Componentsパターンとは
Compound Componentsを使った例
Compound Componentsを使わない例
対比とメリット
まとめ

はじめに

Reactでは、コンポーネント設計が非常に重要です。今回紹介するCompound Componentsパターンは、コンポーネント間の関係を明確にし、再利用性を高めるための強力な手法です。

Compound Componentsパターンとは

Compound Componentsパターンは、親子コンポーネント間で柔軟に制御を行う設計パターンです。子コンポーネントは親コンポーネントからのプロパティを受け取り、個別に機能します。

Compound Componentsを使った例

Tabs.js

import React, { useState, createContext, useContext } from 'react';

const TabContext = createContext(); // コンテキストを作成

export const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0); // アクティブなタブの状態

  return (
    <TabContext.Provider value={{ activeTab, setActiveTab }}>
      <div>{children}</div> // 子コンポーネントをレンダリング
    </TabContext.Provider>
  );
};

export const Tab = ({ title, children }) => {
  const { activeTab, setActiveTab } = useContext(TabContext); // 親コンポーネントからの状態を取得
  const isActive = activeTab === title; // アクティブなタブか判定

  return (
    <div>
      <button onClick={() => setActiveTab(title)}>{title}</button>
      {isActive && <div>{children}</div>} // アクティブな場合のみコンテンツを表示
    </div>
  );
};

この例では、Tabsコンポーネントが親で、Tabコンポーネントが子です。親は現在のアクティブなタブを状態として保持し、子にコンテキストを通じて渡します。子コンポーネントはアクティブなタブかどうかを判定し、内容を表示します。

Compound Componentsを使わない例

Tabs.js

import React, { useState } from 'react';

export const Tabs = ({ titles, children }) => {
  const [activeTab, setActiveTab] = useState(0); // アクティブなタブの状態

  return (
    <div>
      {titles.map((title, index) => (
        <button onClick={() => setActiveTab(index)} key={index}>
          {title}
        </button>
      ))}
      {children[activeTab]} // アクティブなタブのコンテンツを表示
    </div>
  );
};

この設計では、タブのタイトルと内容が分離されており、Tabsコンポーネントが全てのロジックを制御します。子コンポーネントは単に表示されるだけで、独立した存在ではありません。

対比とメリット

柔軟性: Compound Componentsを使用すると、より柔軟な設計が可能。
再利用性: 各子コンポーネントが独立しているため、再利用しやすい。
可読性: コンポーネントの関係が明確で、コードの可読性が向上。
メンテナンス: メンテナンスが容易。

まとめ

Compound Componentsパターンは、Reactのコンポーネント設計を向上させる素晴らしい手法です。この記事を通じて、この強力なパターンをマスターし、より洗練されたReactアプリケーションの開発を進めてください！

いいねやシェアは、今後の記事作成の励みになります。感想や質問があれば、コメント欄にお気軽にどうぞ！