こんにちは！フロントエンドの世界へようこそ。
Reactを触り始めて、「あ、このコンポーネント便利だな。じゃあこれをもっと使いやすくカスタマイズしようかな？」と思ったとき、誰もが一度は「あれ、このコンポーネントのProps（受け渡し用データ）って、正確にはどんな形だっけ？」と迷子になる瞬間があるはずです。
今日は、そんなあなたの頼れる相棒、`React.ComponentProps`という魔法のツールについてお話しします。「型付け？ 難しそう…」と身構える必要はありません。一緒に紐解いていきましょう。
—
1. 「Propsの型」をわざわざ書くのは、もう卒業しませんか？
Reactでコンポーネントを作るとき、私たちはよくこんな風に型を定義しますよね。
type ButtonProps = {
label: string;
onClick: () => void;
disabled?: boolean;
};
const MyButton = ({ label, onClick, disabled }: ButtonProps) => {
return ;
};
これ自体はとても素晴らしい習慣です。でも、もし「既存の `button` タグが持っているすべての属性（`type`とか`name`とか）を全部そのまま受け継ぎたい！」と思ったらどうでしょう？
一つずつ手書きで書き写しますか？ それはあまりに面倒だし、ミスも起きそうですよね。そこで登場するのが `React.ComponentProps` です。
2. お買い物の「カタログ」をコピーするような感覚
イメージしてみてください。あなたは新しく「特製ボタン」を作ろうとしています。
一から材料を揃えるのは大変ですよね。でも、お店（React）にはもう「ボタンのカタログ（型）」が存在しています。
`React.ComponentProps
実践：ボタンを拡張してみよう
例えば、HTML標準の `
import React from ‘react’;
// React.ComponentPropsを使って、標準のbuttonが持っている型を丸ごと拝借！
// これで、HTMLのbutton属性（type, form, aria-labelなど）を全部自動で取得できます
type MyCustomButtonProps = React.ComponentProps<'button'> & {
// ここに自分だけの独自のPropsを追加するだけ
variant?: ‘primary’ | ‘secondary’;
};
const MyCustomButton = ({ variant = ‘primary’, …rest }: MyCustomButtonProps) => {
// …rest を使うと、受け取った残りの属性をそのままbuttonに渡せます
return (
);
};
これを使えば、`MyCustomButton` に `type=”submit”` を渡しても、`disabled` を渡しても、TypeScriptは「それは正しい使い方だよ！」とちゃんと理解してくれます。いちいち型を定義し直す必要はありません。
—
3. なぜ「手書き」より「抽出」がいいのか？
現場のリアルな話、コンポーネントの型を手書きしていると、「本家がアップデートされたのに、自分の型定義だけ古くてエラーが出る」という悲劇がよく起きます。
`React.ComponentProps` を使う最大のメリットは、「本家の変更に自動で追従できる」という点です。
Reactのバージョンが上がって、もし `
—
4. 初学者のあなたが「つまずきそう」なポイントをフォロー
ここで一つだけ、注意点を。
`React.ComponentProps` は、自作のコンポーネントにも使えます。
// どこかで作ったコンポーネント
import { FancyCard } from ‘./FancyCard’;
// FancyCardのPropsをそのまま拝借して、さらに拡張する
type EnhancedCardProps = React.ComponentProps
highlight?: boolean;
};
ここで重要なのは、「対象のコンポーネントが、ちゃんとPropsをエクスポートしているか」です。もし型がうまく抽出できないときは、対象のコンポーネント側で `export type` がしっかりできているか、確認してあげてくださいね。
もしエラーが出ても大丈夫。それは「Reactがあなたのコードをより厳格に守ろうとしている証拠」ですから。一つずつ解決すれば、必ず実力になります。
—
最後に：完璧を目指さなくていい
最初は「なんだか難しそう」と感じるかもしれません。でも、まずはこの魔法の呪文をどこか一つでも使ってみてください。
「あれ、手書きしなくていいんだ！」と気づいた瞬間、あなたのコードはよりシンプルに、そしてメンテナンスしやすい「現場で愛されるコード」に生まれ変わります。
もし行き詰まったら、いつでも戻ってきてください。Reactの世界は広大ですが、その分だけ、あなたを助けてくれる便利な道具もたくさん隠れています。焦らず、一歩ずつ進んでいきましょう。応援していますよ！
コメント