【入門編】 Polymorphic Componentsの型定義 – React実践ガイド

({/ リンクとして使いたいとき /}
もっと詳しく

「なんだ、 `as` 属性をつければいいだけじゃん！」と思いますよね。
はい、JavaScript（またはプレーンなReact）の動的なレンダリングだけなら、実はそれほど難しくありません。問題は、「TypeScriptの型チェックを完璧に効かせること」なのです。

—

つまずきポイント：`as=”a”` なのに `href` が補完されない絶望

ここに、次のような「普通のボタンコンポーネント」の型定義があるとします。

type ButtonProps = {
as?: ‘button’ | ‘a’;
children: React.ReactNode;
};

これだと、何が困るでしょうか？
もしユーザーが `` と書いた場合、HTMLのルールとして `href` 属性（どこに飛ぶか）が絶対に必要になりますよね。逆に、`` のときは `href` は必要ありません（むしろ変です）。

しかし、さっきの単純な型定義のままだと、TypeScriptは「`as` が何であれ、同じ型ルールを適用する」ため、`href` を書き忘れてもエラーを出してくれないし、逆に `button` なのに `href` を書いても怒ってくれません。エディタの親切なコード補完も「うーん、どっちのタグのつもりか分からないよ〜」とフリーズしてしまいます。

これを解決するのが、今回のお題である「高度なポリモーフィックの型定義」です。

—

魔法のレシピ：ジェネリクスとポリモーフィックの型設計

「うっ、ジェネリクス（Generics）とか出てきたよ……難しそう……」と思った方、ちょっと待ってください！深呼吸してくださいね。

ここでは難しい理論は置いといて、実務でそのままコピーして使える「お守りのような型定義のテンプレート」をお見せします。まずはこの形を眺めてみましょう。

import React from ‘react’;

// 1. コンポーネントが受け取る独自のプロパティを定義するよ
type ButtonOwnProps = {
as?: E;
children: React.ReactNode;
};

// 2. 「独自のプロパティ」と「選ばれたHTMLタグ本来の属性（onClickやhrefなど）」を合体させる型を作るよ
type ButtonProps = ButtonOwnProps &
Omit, keyof ButtonOwnProps>;

// 3. コンポーネント本体（ここが少し呪文っぽく見えるけど大丈夫！）
export const Button = (
{ as, children, …rest }: ButtonProps
) => {
// 指定されたタグ（なければデフォルトで ‘button’）を代入するよ
const Component = as || ‘button’;

return (

{children}

);
};

お疲れ様です！なんだか見慣れない記号が並びましたが、やっていることはすごくシンプルです。お買い物の流れに例えてみましょう。

1. `ButtonOwnProps`（お店の基本ルール）:
「ウチのお店では、`as`（どのタグにする？）と `children`（中身のテキスト）は絶対用意してね」という共通のルールブックです。
2. `ButtonProps`（オーダーメイドの組み合わせ）:
お客さんが「今回は `a` タグにするよ！」と言ったら、`a` タグ本来が持っている属性（`href` や `target` など）を引っ張り出してきて、さっきの基本ルールとガチャコンと合体させます。
3. `Component`:
実際に画面に描き出すときに、「今回はどの姿に変身するんだっけ？」と思い出して、そのタグに変身します。

—

実際に使ってみましょう！

この `Button` コンポーネントを、実際の画面でどう使うか見てみましょう。エディタの動きを想像しながら読んでみてくださいね。

function App() {
return (

{/ パターン1: 普通のボタンとして使う /}

alert(‘ボタンが押されたよ！’)}
>
保存する

{/ パターン2: リンクとして使う /}

Reactの公式サイトへ行く