React Props の分割代入

1. Props の分割代入

分割代入（Destructuring）を使用することで、コンポーネントが受け取るプロパティを必要なものだけに絞り込み、コードを簡潔に保つことができます。

1.1 関数定義での分割代入

コンポーネントが color プロパティのみを必要としている場合、関数定義の引数部分でそれを明示的に指定できます。

例：

function Car({color}) {
  return (
    <h2>私の車は {color} です！</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="フォード" model="マスタング" color="赤" year={1969} />
);

       注意： React では、Props を分割代入するために波括弧 {color} を使用します。

1.2 コンポーネント内部での分割代入

また、コンポーネントの内部（関数のボディ）で必要なプロパティを分割代入することも可能です。
この方法では、コンポーネントはすべてのプロパティを一度 props として受け取りますが、分割代入によって使用する変数のみを抽出します。

例：

function Car(props) {
  const {brand, model} = props;
  return (
    <h2>お気に入りの {brand} {model} です！</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="フォード" model="マスタング" color="赤" year={1969} />
);

2. ...rest による分割代入

受け取るプロパティの数が不明な場合や、特定のプロパティ以外をまとめて扱いたい場合は、...rest（残余引数）演算子を使用できます。
これにより、必要なプロパティを個別に指定し、残りのすべてを 1 つのオブジェクトとして保持できます。

例：
このコンポーネントでは color と brand を個別に指定していますが、残りのプロパティは { model: "マスタング", year: 1969 } のような形式で rest オブジェクトに格納されます。

function Car({color, brand, ...rest}) {
  return (
    <h2>私の {brand} {rest.model} は {color} です！</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="フォード" model="マスタング" color="赤" year={1969} />
);

3. デフォルト値 (Default Values)

分割代入を使用すると、Props に対してデフォルト値（Default Values）を設定できます。
親コンポーネントから値が渡されなかった場合、指定したデフォルト値が使用されます。

例：color のデフォルト値を "青（blue）" に設定します。

function Car({color = "青", brand}) {
  return (
    <h2>私の {color} の {brand} です！</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="フォード" />
);