こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書き続けていると、たまに「どうしてこんなに複雑なんだろう？」と立ち止まりたくなる夜がありますよね。でも大丈夫、みんな最初はそこから始まります。
今日は、React開発で誰もが一度は「これどうやって書くのが正解？」と悩む、「Propsの合成（インターセクション型）」という魔法についてお話しします。
「おまけ付きのお弁当」で考えてみよう
まずは難しく考えず、身近な「お弁当」で例えてみましょう。
あなたが「特製お弁当コンポーネント」を作るとします。これには、おかずを詰めるという「独自の機能」が必要ですよね。でも同時に、お弁当箱そのものには「色を変える」「フタを閉じる」といった、どこにでもある機能も備わっていてほしい。
Reactでいうと、独自のProps（中身）と、HTML本来の属性（ボタンなら`onClick`や`disabled`など）を合体させる作業です。これをTypeScriptでスマートに行うのが「Intersection Types（交差型）」というテクニックなんです。
＆（アンパサンド）は「合体ロボ」のスイッチ
TypeScriptで型を合体させるには、`&` 記号を使います。「Aという型」と「Bという型」を `&` で繋ぐだけで、両方の特徴を併せ持つ「スーパー型」が爆誕します。
さっそくコードを見てみましょう。
import React from ‘react’;
// 1. 自分たちで決めた「独自のルール」
type CustomButtonProps = {
variant: ‘primary’ | ‘secondary’; // ボタンの色味を切り替える設定
label: string; // 表示するテキスト
};
// 2. HTMLのボタンが本来持っている「標準ルール」
// React.ButtonHTMLAttributes
// HTMLのbuttonタグで使える全プロパティ（onClick, disabled, type等）の詰め合わせパックです！
type ButtonProps = CustomButtonProps & React.ButtonHTMLAttributes
// 3. 合体した型を使ってコンポーネントを作る
export const SuperButton = ({ variant, label, …rest }: ButtonProps) => {
// …rest を使うと、CustomButtonProps以外の「全部の属性」を
// まとめてボタンタグに流し込めます！
return (
);
};
なぜこれが「現場の知恵」なのか
これを知らないと、初心者のうちは「あ、`onClick`が効かない！」と焦って、一つひとつ手動でPropsに書いてしまいがちです。でも、それだとHTMLの属性が増えるたびにコードを書き直さないといけないですよね。
この `&` を使った書き方の何がすごいのか、現場の視点で3つにまとめました。
1. 「安心感」が違う: TypeScriptが、「あ、それHTMLのボタンにはない属性だよ！」とエディタ上で優しく教えてくれます。ミスが減るって、実は一番の時短なんです。
2. 拡張性が高い: もし将来、新しいHTML属性が登場しても、この書き方なら自動的に対応できます。一度書けば、ずっと安心。
3. 魔法の `…rest`: `…rest`（レストプロパティ）を使って、受け取った属性をそのままHTMLタグに渡すテクニックは、まさに職人の常套手段です。これだけでコードが驚くほどスッキリします。
最後に：つまずいたって大丈夫
最初は「`&` って何？」「`React.ButtonHTMLAttributes` って呪文みたい……」と思うかもしれません。でも、それで正解です！
現場のプロも、最初は公式ドキュメントと睨めっこしながら、何度も間違えて、ようやくこの「型を合成する」というエレガントな書き方にたどり着きました。
まずは、自分の作ったボタンや入力フォームで、試しに `&` を使ってHTMLの属性を混ぜてみてください。エディタがあなたのコードを補完してくれた瞬間、「お、できるぞ！」という喜びを感じられるはずです。
もし分からないことがあれば、いつでも何度でも聞いてくださいね。あなたのReactライフが、少しでも楽しく、軽やかになりますように！
コメント