こんにちは。Reactの世界へようこそ。
フロントエンドの現場で「あ、またバグだ……」と頭を抱えたとき、その原因の多くは実は「コンポーネントに渡したデータが、想定外の組み合わせになっていたこと」だったりします。
今日は、Reactの型安全性を極めるための「Discriminated Unions（タグ付きユニオン型）」という、魔法のようなテクニックを一緒に学んでいきましょう。難しい言葉に聞こえるかもしれませんが、考え方はとってもシンプル。お買い物の流れに例えて解説しますね。
—
「矛盾したデータ」は事故の元
例えば、ある「支払いボタン」のコンポーネントを作ると想像してください。
支払い方法には「クレジットカード」と「銀行振込」があって、それぞれ必要な情報が違いますよね。
- クレジットカードの場合: 「カード番号」が必要。
- 銀行振込の場合: 「銀行名」と「支店名」が必要。
ここで、もしプログラマがうっかり「支払い方法はクレジットカードなのに、銀行名を入力させる」ようなコードを書いてしまったらどうなるでしょう？ アプリは混乱し、ユーザーは困惑し、バグの温床になります。
これを防ぐのが「Discriminated Unions（タグ付きユニオン型）」です。
タグ付きユニオン型で「お買い物ルール」を作る
「タグ付き」というのは、「これは何の種類か？」を明示するラベルを貼るイメージです。
TypeScriptで書くと、こんな感じになります。
// クレジットカード決済に必要な情報
type CreditCardPayment = {
type: ‘card’; // これが「ラベル（タグ）」です！
cardNumber: string;
};
// 銀行振込に必要な情報
type BankTransferPayment = {
type: ‘bank’; // これも「ラベル」です！
bankName: string;
branchName: string;
};
// 支払い方法の「型」を合体（ユニオン）させる
type PaymentProps = CreditCardPayment | BankTransferPayment;
// コンポーネント定義
const PaymentButton = (props: PaymentProps) => {
// ここで「タグ（type）」をチェックすれば、残りの情報は自動的に確定する！
if (props.type === ‘card’) {
return ;
} else {
return ;
}
};
なぜこれが最強なのか？
このコードのすごいところは、`props.type` をチェックするだけで、React（TypeScript）が「あ、今はカード決済モードなんだな。じゃあ `cardNumber` があるはずだ！」と賢く理解してくれる点です。
逆に、`type: ‘card’` と指定したのに `bankName` を書こうとすると、エディタが「いやいや、それはカード決済には不要ですよ！」と赤線を引いて怒ってくれます。つまり、実行する前にミスを未然に防げるのです。
—
初学者がつまずきやすいポイントと解決策
「よし、やってみよう！」と思ったときに、少し迷いやすいポイントがあります。
1. 「ラベルの名前はなんでもいいの？」
`type` という名前は慣習的に一番よく使われますが、`kind` や `mode` でも構いません。大切なのは、すべての型に共通する「識別用のプロパティ」があることです。ここさえ押さえれば、どんな複雑なコンポーネントも怖くありません。
2. 「これを使わないとどうなるの？」
使わない場合、すべてのプロパティを「あってもなくてもいい（オプショナル）」にする必要があります。すると、コンポーネントの中で「カード番号は……あるかな？ないかな？」と、常に不確かな状態をチェックし続けなければなりません。コードが「〜かもしれない」だらけになって、読みづらくなってしまうんです。
—
現場のアーキテクトからのアドバイス
実務では、この「タグ付きユニオン」を応用して、こんな使い方もします。
- 画面の表示状態管理: `state: ‘loading’ | ‘success’ | ‘error’`
- `loading` のときはスピナーを出す
- `success` のときはデータを表示する
- `error` のときはエラーメッセージを出す
このように、「今の状態」をタグとして管理することで、Reactのコンポーネントは驚くほど整理され、メンテナンスしやすくなります。
最初から完璧に使いこなそうとせず、まずは「あ、これとこれはセットで使いたいな」と思ったときに、この「ラベル（タグ）」の考え方を思い出してみてください。
Reactの学習は、ときには迷路のように感じることもあるでしょう。でも、大丈夫。こうして一つずつ「型」という武器を身につけていけば、必ず美しいコードが書けるようになります。
今日書いたコードを、ぜひ自分のエディタで試してみてくださいね。何か動かないことがあれば、いつでもまた聞きに来てください。応援しています！
コメント