コンポーネント共通化：柔軟な再構成方法

お疲れ様です。中塚です。

コンポーネント共通化

フロントエンドにおいて、コンポーネントの共通化は効率的な開発フローを支える重要な要素です。特に、ヘッダーやフッターなどの共通コンポーネントを効果的に再利用し、さらにはその中の部分的な構成を自由に変えられるようにすることが求められます。

背景

似たようなコンポーネントがあるけど部分的に、違うところがありどのように共通化すべきか検討いたしました。

共通化アプローチ

コンポーネントの共通化には、主に以下の二つのアプローチがあります。

① ReactNodeを受け取り、並べる方法

この方法では、共通コンポーネント（例えばHeaderやFooter）が子コンポーネントをpropsとして受け取り、それを適切な位置にレンダリングします。これにより、使用する側は任意のコンポーネントを挿入でき、柔軟な再利用が可能になります。

// Headerコンポーネント
const Header = ({ left, middle, right }) => (
  <header>
    <div>{left}</div>
    <div>{middle}</div>
    <div>{right}</div>
  </header>
);

// 使用例
<Header
  left={<Logo />}
  middle={<Navigation />}
  right={<UserMenu />}
/>

② フラグで管理する方法

別のアプローチとして、コンポーネント内で表示する要素をフラグ（例えばdisplayedLink）で制御する方法があります。この場合、コンポーネントはより静的で、フラグに基づいて特定の要素を表示または非表示にします。

// Footerコンポーネント
const Footer = ({ displayedLink }) => (
  <footer>
    <div>Company © 2024</div>
    {displayedLink && <div><a href="/terms">利用規約</a></div>}
  </footer>
);

// 使用例
<Footer displayedLink={true} />

コンポーネントの共通化は、より効率的なコードの再利用を可能にできます。それぞれのアプローチには利点があるので、使い分けできるといいなと思います。