こんにちは。Reactの世界へようこそ。
日々コードを書いていると、「あれ？これ全部まとめて渡しちゃえば楽じゃない？」という誘惑に駆られる瞬間、ありますよね。
そう、それが今回テーマにする「Propsスプレッド（`{…props}`）」です。
魔法のように便利で、一度使うと手放せなくなるこの手法。でも実は、使い方を間違えると「意図しないバグ」を招く落とし穴でもあるんです。今日は、この技術を安全に、そして賢く使いこなすための「現場の知恵」を、一緒にひも解いていきましょう。
—
1. Propsスプレッドって、何をしているの？
まずはイメージから。あなたが友達に「引越し用の段ボール」を渡す場面を想像してみてください。
中身を一つずつ丁寧に説明して渡すのが、普段のPropsの渡し方です。
「これには本が入ってるよ」「こっちは食器ね」「こっちは洋服」……これだと、荷物が増えるたびに説明が大変ですよね。
そこで登場するのが「段ボールごと丸投げ」する手法。これがPropsスプレッドです。
`{…props}` と書くことで、「手元にある荷物を全部、この箱に詰めてそのまま渡すね！」という状態になります。
コードで見てみると……
// 親から受け取ったものを、そのまま子へ横流しするイメージ
const MyButton = (props) => {
// {…props} と書くだけで、全ての属性（onClickやdisabledなど）が渡ります
return ;
};
たった一行で済む。なんてスマートで美しいんでしょう！……でも、この「丸投げ」には一つだけ、大きなリスクが隠れているんです。
—
2. なぜ「丸投げ」は危険なのか？
想像してみてください。あなたは友達に「大切な本」だけを渡すつもりだったのに、段ボールの中に「誰かの使い古した靴下」や「賞味期限切れの牛乳」まで混ざっていたらどうでしょう？
Reactでも同じことが起きます。
例えば、あなたが作った `MyButton` はただのボタンとして使いたいのに、親コンポーネントが「ついでだから」と `userName` や `isLoggedIn` といった、ボタンには全く関係のないデータまで一緒に送ってきてしまったら……。
- DOMへの不要な属性付与: HTMLのボタン要素に、存在しない属性（`userName`など）が付いてしまい、ブラウザが「なんだこれ？」と困惑したり、予期せぬ挙動をしたりします。
- バグの温床: 「なぜかこのボタンを押すと変なログが流れるぞ？」という追跡困難なバグの正体が、実は親から渡された不要なPropsだった、なんてことは現場では日常茶飯事です。
—
3. 安全に使うための「仕分けルール」
じゃあ、どうすればいいの？と不安になる必要はありません。現場のプロは、「必要なもの」と「それ以外」をきっちり仕分けることで、この問題を解決しています。
「分割代入（Restパターン）」という魔法のテクニックを使いましょう。
// 必要なものだけ手元に残して、あとは安全にバトンタッチする例
const MyButton = ({ label, …rest }) => {
// label は手元で使うから取り出す
// それ以外の不要なものは全部 rest という箱にまとめておく
return (
);
};
こうすれば、たとえ親が「余計なもの」を混ぜてきても、`rest` という箱の中に入っているだけなので、`button` 要素には影響を与えません。これが「安全なスプレッド」の極意です。
—
4. 型安全性をプラスして、さらに安心を
ReactでTypeScriptを使っているなら、もう一歩踏み込みましょう。
「ボタンが受け取れる属性は、HTMLのボタンと同じだよ」と宣言してあげるのが、一番の近道です。
import React from ‘react’;
// HTMLのボタンが持てる属性をそのまま継承する型
interface Props extends React.ButtonHTMLAttributes
label: string; // 独自の追加プロパティ
}
const SafeButton = ({ label, …rest }: Props) => {
return (
);
};
こうやって書くと、エディタが「あ、これボタンの属性じゃないからダメだよ！」と、コードを書いている最中に優しく教えてくれるようになります。ミスを減らす最強の相棒ですね。
—
最後に：完璧じゃなくていい
ここまで読んで「うわ、厳しそう……」と感じましたか？大丈夫です。最初から完璧に書ける人なんていません。
まずは、
1. 「丸投げ」は便利だけど、不要なものが混ざるリスクがあると知る。
2. `…rest` を使って、必要なものだけを取り出す癖をつける。
この二つを意識するだけで、あなたの書くコードは驚くほどプロフェッショナルで、誰が見ても安心できるものになります。
Reactのコードは、時に難解なパズルのように見えるかもしれません。でも、一つひとつのPropsは「コンポーネント同士の会話」です。相手に余計なものを渡さない、ちょっとした気遣いができるようになれば、あなたはもう立派なReactエンジニアです。
分からないことがあれば、いつでも何度でも立ち止まって、コードを眺めてみてくださいね。応援しています！
コメント