【実務・中級編】 Discriminated UnionsによるPropsの型安全な分岐 – React実践ガイド

中級の壁を突破しようとしている君なら、一度はこんな悩みに直面したことがあるはずだ。オプショナルプロパティ（`?`）をとりあえずペタペタ貼り付けて、「まあ動くからいっか」で済ませていないかい？ その場しのぎの型定義は、半年後の自分やチームメンバーを地獄に突き落とす呪いになる。

今回は、TypeScriptの真骨頂であり、Reactコンポーネントの設計を劇的に美しく・安全にする「Discriminated Unions（タグ付きユニオン）」を使ったPropsの型安全な分岐について、現場のリアルな知見を交えて徹底的に解説しよう。

—

なぜオプショナルプロパティの乱用は「悪」なのか？

君が書きがちなコードは、きっとこんな感じじゃないか？

// 🔴 やってはいけないアンチパターンの例
type BadButtonProps = {
children: React.ReactNode;
variant?: ‘primary’ | ‘secondary’;
href?: string; // リンク先（あるかもしれないし、ないかもしれない）
onClick?: () => void; // クリックハンドラー（あるかもしれないし、ないかもしれない）
target?: string; // おいおい、hrefがないのにtargetがあるのはおかしくないか？
};

一見すると、「柔軟で使いやすいじゃん」と思うかもしれない。だが、TypeScriptのコンパイラから見れば、この型は「何でも許すザル」だ。

結果どうなるか？ 実行時エラー、あるいは「なぜか動かない」という原因不明の不具合に怯えながら、コンポーネント内部で地道な`if`文の山を書く羽目になる。これが現場の生産性を落とす元凶だ。

—

救世主：「Discriminated Unions（タグ付きユニオン）」とは何か？

ここで登場するのが、Discriminated Unions（タグ付きユニオン）だ。

考え方は非常にシンプル。「ある特定のプロパティ（タグ）の値によって、許容される他のプロパティのセットを完全に切り替える」という手法だ。

TypeScriptの型システムは、共通の「タグ（識別子）」を持つ複数の型をユニオン（`|`）で結んだとき、そのタグの値を確認する（Narrowing / 型の絞り込み）ことで、どの型であるかを完璧に特定できるという強力な性質を持っている。

これをReactのPropsに応用すると、「このモードの時は、このPropsしか存在してはならない」という排他的な制約を、コンパイル時に強制できるようになる。

—

現場で使える！完璧なButtonコンポーネントの実装例

百聞は一見にしかず。実際にDiscriminated Unionsを使って、リンクとしてもボタンとしても安全に使える `Button` コンポーネントを書いてみよう。

エディタにそのまま貼り付けて、型補完の気持ちよさを体感してほしい。

import React, { ComponentPropsWithoutRef } from ‘react’;

// 1. ボタンとして振る舞う場合の型定義
type ButtonAsButtonProps = {
intent: ‘button’; // ←これが「タグ」になる識別子！
onClick?: ComponentPropsWithoutRef<'button'>[‘onClick’];
href?: never; // hrefの存在を完全に禁止する
target?: never; // targetも当然禁止
};

// 2. リンクとして振る舞う場合の型定義
type ButtonAsLinkProps = {
intent: ‘link’; // ←これが「タグ」になる識別子！
href: string; // リンクの場合は必須
target?: ‘_blank’ | ‘_self’;
onClick?: ComponentPropsWithoutRef<'a'>[‘onClick’];
};

// 3. 共通のProps
type ButtonCommonProps = {
children: React.ReactNode;
variant?: ‘primary’ | ‘secondary’;
};

// 4. ユニオン型で結合する
export type ButtonProps = ButtonCommonProps & (ButtonAsButtonProps | ButtonAsLinkProps);

export const Button: React.FC = (props) => {
const { children, variant = ‘primary’, …rest } = props;

// 共通のスタイルクラス
const className = `btn btn-${variant}`;