こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書き続けていると、たまに「あ、ここはもっと優しく伝えられたはずだな」と初心に帰ることがあります。
今回は、Reactを学び始めたばかりの人が必ずと言っていいほど直面する「Props（プロップス）のデフォルト値」というトピックについてお話ししますね。これ、名前だけ聞くと難しそうですが、実は「おまかせ定食」みたいなものなんです。
—
「指定がないなら、これにしておくね」という優しさ
Reactにおける「Props」は、親コンポーネントから子コンポーネントへ渡される「贈り物」のようなものです。でも、時には親が何も渡してくれないこともありますよね。
そんな時、子コンポーネントが「えっ、何もないの？ 困ったな……」とフリーズしてしまったら大変です。そこで登場するのが「デフォルトProps（初期値）」です。
これは、「もし何も渡されなかったら、とりあえずこれを使っておいてね」という子コンポーネント側の事前の準備のこと。これがあると、どんな状況でもアプリケーションが崩れず、安心して動いてくれるようになります。
—
書き方は「関数の引数」にお任せしよう
昔のReactでは `defaultProps` という少し特殊な書き方をしていましたが、今のモダンなReact開発では、JavaScriptの標準的な「関数のデフォルト引数」の書き方を使うのが一番スマートで一般的です。
まずは、一番身近な例として「ユーザーの挨拶を表示するコンポーネント」を作ってみましょう。
// Greetingコンポーネント
// 引数のところで「= “ゲストさん”」と書くのがポイント！
function Greeting({ name = “ゲストさん” }) {
return (
);
}
// 使う側（親コンポーネント）
export default function App() {
return (
{/ nameを渡さなかった場合 → 自動的に「ゲストさん」が表示されます！ /}
);
}
ここがポイント！
`{ name = “ゲストさん” }` という書き方。これは、「もし `name` という贈り物が届かなかったら、自動的に `ゲストさん` という名前を代入しておくね」という宣言です。
コードがスッキリしていて、ひと目で「デフォルト値があるんだな」と分かりますよね。
—
複数あるときはどうするの？
Propsが増えてくると、少し迷うかもしれませんね。でも大丈夫、同じ要領でどんどん並べていけばOKです。お買い物カゴをイメージしてみてください。
function ProductCard({
title = “商品名未定”,
price = 0,
currency = “円”
}) {
return (
{title}
価格: {price}{currency}
);
}
このように、必要な分だけ「もしなかったらこれね」を並べておけば、どんなデータが来ても（あるいは来なくても）コンポーネントはパニックを起こさず、健気に表示を続けてくれます。
—
注意点：こんな時は「空っぽ」かも？
少しだけ注意してほしいのが、「意図的に `undefined`（未定義）を渡したとき」です。
Reactでは、`name={undefined}` と明示的に渡すと、「値がない」とみなされてデフォルト値が適用されます。でも、もし `null` を渡してしまうと、「`null` という値がある」と判断されてしまい、デフォルト値が使われないことがあります。
初心者のうちは「基本的には何も書かない（Propsを渡さない）」ことで、デフォルト値の恩恵を最大限に受ける、と覚えておけば間違いありません！
—
最後に：完璧主義にならなくていい
Reactを始めたばかりの頃は、「すべてのPropsにデフォルト値を設定しなきゃ！」と気負ってしまうかもしれません。でも、無理は禁物です。
「ここが表示されないと困るな」とか「ここは空だと寂しいな」という場所から、少しずつデフォルト値を設定してみてください。あなたの書くコンポーネントが、少しずつ「どんな状況でもへこたれない、タフな部品」に育っていくはずです。
もしコードが動かなくなっても大丈夫。それは成長の証です。ゆっくり、一つずつ積み上げていきましょうね。応援しています！
コメント