はじめに

この記事は「🎄はじめてのアドベントカレンダー Advent Calendar 2023🎅」の18日目に参加しています。

今回はReactを学ぶ過程で出会ったPropsについてまとめてみました！

プログラミング初学者のため、内容に誤りがある可能性があります。間違いを見つけたら、ぜひ教えてください！

Propsとは何か？

Reactでは、親コンポーネントと子コンポーネントの間でデータをやり取りする必要がよくあります。Reactでのコンポーネント間のデータの受け渡しには「Props」を用います。
Propsとは、「プロパティ(性質・特徴)」を意味する名前です。

Reactでコンポーネントを使う際、そのコンポーネントに初期設定値のようなものを渡したい場合があります。

例えば、ボタンの文字を変更したり、色を変えたかったり、最初に表示するメッセージを設定したり。
この時に使うのがPropsです。親コンポーネントが子コンポーネントに値を渡す入れ物として機能します。

「親から渡す手紙」のようなものです。

子コンポーネントは渡されたPropsを見て、その通りの表示や動作をするという関係です。

このようにPropsを使うことで、コンポーネントに独自の性質や特徴を付加できます。

Propsの渡し方

Propsは以下の2つの方法で渡すことができます。

<コンポーネント名 props={propsオブジェクト}>の形式で直接渡す。
<コンポーネント名 {...propsオブジェクト}>の形式でスプレッド構文を使用して渡す。

方法 1: 直接Propsを渡す
この方法では、propsを個別にコンポーネントに渡します。各propはコンポーネントの属性として明示的に指定されます。

const ParentComponent = () => {
  const user = {
    name: 'John Doe',
    age: 30,
  };

  // 直接propsを渡す
  return <ChildComponent user={user} />;
};

const ChildComponent = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.age}</p>
    </div>
  );
};

この例では、ParentComponent から ChildComponent へ user という名前のpropを直接渡しています。

方法 2: スプレッド構文を使用してPropsを渡す
スプレッド構文を使用すると、オブジェクト内のすべてのプロパティをコンポーネントのpropsとして展開できます。これは特に、多くのpropsを渡す必要がある場合に便利です。

const ParentComponent = () => {
  const user = {
    name: 'John Doe',
    age: 30,
  };

  // スプレッド構文を使用してpropsを渡す
  return <ChildComponent {...user} />;
};

const ChildComponent = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
};

この例では、ParentComponent は user オブジェクトのすべてのプロパティを ChildComponent に渡しています。スプレッド構文 ({...user}) により、user オブジェクト内の各プロパティが個別のpropとして ChildComponent に渡されます。

Propsの受け取り方

子コンポーネントではpropsオブジェクトとしてPropsを受け取ります。このオブジェクトには、親コンポーネントから渡された全てのPropsが含まれています。

Propsの例

// 親コンポーネント
const ParentComponent = () => {
  const user = {
    name: 'John Doe',
    age: 30,
  };

  return <ChildComponent user={user} />;
};

// 子コンポーネント
const ChildComponent = (props) => {
  return (
    <div>
      <h1>{props.user.name}</h1>
      <p>{props.user.age}</p>
    </div>
  );
};

// 分割代入でuserオブジェクトからnameとageのみ取り出すことも
const ChildComponent = ({user}) => {
  
  const {name, age} = user; 

  return (
    <div>
      <h1>{name}</h1>  
      <p>{age}</p>
    </div>
  );
};

この例では、ParentComponentがChildComponentにuserというPropsを渡しています。ChildComponentはこのPropsを使ってユーザーの名前と年齢を表示しています。

分割代入を使用しuserオブジェクトからnameとageのみ取り出すこともできます。

//
const ChildComponent = ({user}) => {
  
  const {name, age} = user; 

  return (
    <div>
      <h1>{name}</h1>  
      <p>{age}</p>
    </div>
  );
};

Propsの特性

Propsは読み取り専用です。親コンポーネントから子コンポーネントへ一方通行でしかデータを渡すことはできません。

子コンポーネントはPropsを通じてデータを受取ることができますが、逆に親コンポーネントにデータを渡すことはできません。

つまり、データの流れは親 → 子の一方向に限られています。この一方向のデータフローがPropsの大きな特徴です。

これは何故かというと、データの変更を明確なルールで制限することで、思わぬエラーや混乱が起きないようにする為です。

これによりコンポーネント間でのデータの受け渡しが明確になり、予期しない副作用を防ぐことができます

では、データの変更はどうするのかというと、Reactにはstateという機能があり、こちらを使ってデータの変更を実装します。stateを使えば、データ変更のタイミングと方法をコントロールできます。

つまり、Propsとstateにはそれぞれ違う役割があり、Propsはデータの固定/読み取り、stateはデータの変更/更新を担当するという感じです。

まとめ

Reactを学ぶ上でPropsを理解することはとても大切だと学べました。これからもReactの学習を続けていきたいです！

参考文献