こんにちは。Reactの世界へようこそ。
現場でコードを書いていると、「あれ？これもっとスマートに書けるはずだよね？」と立ち止まる瞬間が必ずやってきます。特に、親から子へたくさんのデータをバケツリレーのように渡すとき、コードがゴチャゴチャして嫌気が差したことはありませんか？
今日は、そんなあなたの心をスッと軽くしてくれる、React界の「魔法の杖」ことスプレッド演算子（`{…props}`）についてお話しします。
—
荷物をひとつずつ渡すのは、もう終わりにしましょう
想像してみてください。あなたは今、友達に引越しのお手伝いをお願いしています。段ボール箱の中には、本や食器、衣類がたくさん詰まっています。
もし、箱を開けて「これは本、次は食器、次はTシャツ……」と一つずつ手渡ししていたら、日が暮れてしまいますよね。もっと賢い方法はありませんか？ そう、「箱ごとドン！」と渡せばいいのです。
ReactのPropsもこれと同じです。
従来の「丁寧すぎる」渡し方
これまでの書き方だと、こんな風に一つずつ名前を呼んであげていました。
// 親コンポーネント：丁寧に荷物を一つずつ仕分けて渡す
function App() {
const user = {
name: “ハナコ”,
age: 25,
job: “エンジニア”
};
return (
// 一つずつバラバラに渡している状態
);
}
これ、データが増えるたびに「あ、`hobby`も足さなきゃ」「`address`も必要だ」と、修正作業が面倒になりませんか？
—
`{…props}` という「魔法の箱」
そこで登場するのが、`{…props}` です。これは、「このオブジェクトの中身、全部まとめてあの子に渡しちゃって！」という指示を出す、いわば「荷物を丸ごと転送する魔法」です。
スプレッド演算子を使ったスッキリした書き方
// 親コンポーネント：魔法の箱ごと渡す
function App() {
const user = {
name: “ハナコ”,
age: 25,
job: “エンジニア”
};
// {…user} と書くだけ！
// userの中身（name, age, job）が自動的に展開されます
return
}
// 子コンポーネント：受け取る側はいつも通りでOK
function UserProfile({ name, age, job }) {
return (
名前: {name}
年齢: {age}
職業: {job}
);
}
どうでしょう？ 親コンポーネントの記述が、驚くほどスッキリしましたよね。これなら、`user`オブジェクトの中身が増えても、親側のコードを書き換える必要はありません。これが、現場で「保守性が高い」と言われるコードの第一歩です。
—
注意点：便利だからこそ「やりすぎ」にはご用心
「じゃあ、全部これで行けばいいじゃん！」と思うかもしれませんが、ここで一つだけ、熟練者からの「愛のある忠告」をさせてください。
「中身が見えなくなる」というリスクがあることを忘れないでください。
`{…props}` で何でもかんでも渡してしまうと、コードを読んだ人が「結局、このコンポーネントには何が必要なの？」と迷子になってしまいます。
- 良い例： 明確に「ユーザー情報」という塊があるとき。
- 注意が必要な例： どこから来たのか分からない、正体不明のデータを全部詰め込んで渡すとき。
何でも箱に入れて運ぶと、あとで中身を探すのが大変になるのと同じです。「渡すべきデータの意味」がはっきりしている時に使うのが、一番のプロの作法ですよ。
—
最後に：つまずいても大丈夫
プログラミングを始めたばかりの頃は、「なぜこんな書き方をするのか」「動くけど、これでいいのかな？」と不安になるものです。でも安心してください。
今日紹介したスプレッド演算子は、React界の共通言語のようなものです。使っていくうちに、まるで自分の手足のように馴染んでくるはずです。
もしコードを書いていて「ここ、もっと綺麗にできそうだな」と思ったら、ぜひこの「魔法の箱」を思い出してみてください。あなたの書くReactコードが、昨日よりも少しだけ軽やかになるはずです。
さて、次はどんな「魔法」を試してみますか？ またいつでも相談してくださいね。応援しています！
コメント