ポリモーフィックコンポーネントなるものを知りました。
なんやそれ？って人は記事を読んでいってください！
ポリモフィックコンポーネントってなに？
一つのコンポーネントが複数の形態を取れるように設計されたコンポーネントのことを指します。
コードの再利用性が向上し、コンポーネントの柔軟性が高まる設計方法のことです！
例えば、Listコンポーネントがポリモーフィックであれば、<ol>要素だけでなく、<ul>要素としても使用できます！
ポリモフィックコンポーネントの作り方
ポリモフィックコンポーネントという名前は知らなくても作成したことがある方もいると思います。
一般的にはasプロパティを利用してタグをpropsとして受け取れるようにすることで作成できます！
asプロパティについては別の記事で紹介しているのでよければご覧ください！
以下に、ポリモーフィックコンポーネントの一例を示します。
iport { FC } from 'react'
type Props = {
as: 'ul' | 'ol';
};
const List:FC<Props> = ({ as: Tag = 'ul' }) => {
return (
<Tag>
<li>ListItem</li>
<li>ListItem</li>
</Tag>
)
};
// <ul>として利用する場合
<List />
// <ol>として利用する場合
<List as="ol" />
デフォルトの値を<ul>としてレンダリングされます。
もちろんulやolだけでなくdivタグなどもレンダリングできます。
ポリモフィックコンポーネントの目的
ポリモーフィックコンポーネントは、以下の点を目的として作成します。
- コードの再利用性
- 柔軟性と拡張性
- 一貫性と予測可能性
- 可読性と保守性
同じようは構造のコンポーネントを作成しないで1つにまとめることで可読性や保守性、コードの一貫性を向上できます。
また、タグを動的に変更できるため、使用方法が柔軟で不必要にコンポーネントが増えずにすみます。
ポリモフィックコンポーネントを作る上での注意点
じゃあ全部ポリモフィックコンポーネントで作ればいいのでは？
についてはNoです。
例えば下記のようなコンポーネントがあったとします。
iport { FC } from 'react'
type Props = {
as: string;
};
const Pragraph:FC<Props> = ({ as: Tag = 'p' }) => {
return (
<Tag>Polymorphic Component</Tag>
)
};
極端な例ですが上記の例だと型の定義を工夫しないといけません。
asの型をstringにするとどんな文字列でも許可してしまうので、HTMLのタグではない文字列でも受け入れることになってしまいます…。
また、コンポーネントの汎用性を高めすぎると記述量が増えて、内部ロジックの複雑性と可読性が悪くなります。
【ポリモフィックコンポーネントってなに？】まとめ
当然ですが、柔軟性を高めすぎるとコードの可読性を損うことになります。
コンポーネント設計のメリットを損なってしまうためコンポーネント1つに対して責務をシンプルに保てるようにしましょう！
柔軟性や拡張性を重んじるあまりコンポーネントが拡張されすぎてメンテナンスが困難になった事例をよく聞きます。
コンポーネントの設計はエンジニアだけでなく、デザイナーも含めてチームで話し合って決められると良いと思います！