【入門編】デフォルトPropsの設定パターン – React実践ガイド

こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書いていると、つい「どうやって複雑な機能を実装するか」に目が向きがちですが、実は「いかにコードを優しく、そして事故が起きないようにするか」という土台の部分こそが、長く愛されるアプリケーションを作る秘訣だったりします。

今日は、Reactのコンポーネントを設計する上で、誰もが一度は「これ、どう書くのが一番スマートなの？」と立ち止まる「デフォルトProps（初期値）」の設定についてお話ししますね。

—

コンポーネントは「気まぐれなお客さん」を想定しよう

Reactのコンポーネントは、言ってみれば「料理人」のようなものです。注文（Props）を受けて、それに応じた料理（画面）を出します。

でも、たまにこんなことが起きませんか？
「ボタンを表示して！」という注文は来たけれど、「ボタンの文字は何にする？色は？」という細かい情報が何も書かれていない……。

もし、料理人が「注文が足りないから作りません！」とフリーズしてしまったら、お店は大混乱ですよね。そこで必要なのが「何も指定がなかったら、とりあえず『OK』ボタンをグレーで出しておこう」というデフォルトのルールです。

昔のやり方と、今のスマートなやり方

Reactの歴史の中では、以前は `defaultProps` という専用の機能を使っていました。でも、今はもっとシンプル。JavaScriptの「デフォルト引数」という機能をそのまま使っちゃうのが、モダンで一番イケてる書き方なんです。

身近な例えで言うと、新しい炊飯器を買ったとき、「何も設定しなくても、とりあえず『白米・普通炊き』にセットされている」ような状態ですね。

さっそくコードで見てみましょう

例えば、「お知らせバッジ」を作るコンポーネントを考えてみましょう。色は「青」、文字は「未読」をデフォルトにしておきます。

// お知らせバッジのコンポーネント
// 引数のところで直接デフォルト値を指定します
const NotificationBadge = ({ text = “未読”, color = “blue” }) => {

// スタイルオブジェクト（これもReactの基本！）
const style = {
backgroundColor: color,
color: “white”,
padding: “4px 8px”,
borderRadius: “4px”
};

return (

{text}

);
};

// 使う側（親コンポーネント）
export default function App() {
return (

{/ 何も渡さないと、デフォルトの「未読」「blue」が適用されます /}

{/ もちろん、上書きも自由自在！ /}

);
}

この書き方の何がいいの？

1. とにかく読みやすい：関数の引数の場所で「もしなかったらこれね」と宣言しているので、コードを追いかける目が迷子になりません。
2. 型（Typescript）との相性が抜群：将来的にTypeScriptを導入したときも、この書き方なら自然に型定義と馴染んでくれます。
3. 無駄なコードが減る：昔の `defaultProps` を書くための長い記述が必要ないので、画面がスッキリします。

—

初学者がつまずきやすい「落とし穴」

ここで一つだけ、初心者の頃にやりがちな注意点をお伝えしますね。それは「オブジェクトの受け取り方」です。

もしPropsとして「設定の塊（オブジェクト）」を渡す場合、書き方に少しコツがいります。

// 悪い例：これだと設定が空だったときにエラーになる可能性がある
const UserCard = ({ config = { theme: “light” } }) => {
return

テーマは {config.theme} です

;
};

// 良い例：分解して受け取り、それぞれにデフォルト値を持たせる
const UserCard = ({ theme = “light”, isAdmin = false }) => {
return

テーマ: {theme}, 管理者: {isAdmin ? “はい” : “いいえ”}

;
};

このように、「受け取る場所でバラバラに分解（分割代入）して、それぞれに初期値を与える」のが、Reactの現場では最も安全で好まれる書き方です。これなら、「設定が一部だけ渡された」というケースにも柔軟に対応できます。

—

最後に：完璧を目指さなくて大丈夫

プロの現場でも、最初は「これ、どんな値が来るかな？」と迷うことはたくさんあります。でも、こうやって「もしもの時のデフォルト値」を優しく設定しておくだけで、バグは劇的に減りますし、何よりコードがとても温かいものになります。

「あれ、動かない？」と悩む時間も、実は成長の証です。まずはこの「デフォルト引数」の書き方をエディタに書いてみて、ブラウザで表示が切り替わるのを眺めてみてください。

「あ、ちゃんと動いた！」というその小さな感動こそが、エンジニアとしての第一歩です。また何か困ったことがあれば、いつでも相談してくださいね。応援しています！