ReactのPropsでコンポーネント間でデータをやり取りしよう！【基本】

Reactのコンポーネント間でデータをやり取りするために使われるのがProps（プロパティ）です。

Propsは「コンポーネントに渡す値やデータ」を指し、Reactアプリケーションで動的なデータ表示を実現するために重要な役割を持ちます。

今回は、Propsの基本から実践的な使い方までを詳しく解説します。

Propsとは？

Props（プロパティ）は、Reactコンポーネントにデータを渡すための仕組みです。

関数の引数のようなもので、親コンポーネントから子コンポーネントに値を渡す際に使います。
コンポーネントの表示内容を柔軟に変えられるため、同じコンポーネントを異なるデータで再利用することが可能です。

• Propsは読み取り専用で、子コンポーネントから変更することはできません（不変性）。
• Propsは、親コンポーネントからのみ変更できます。

Propsの使い方

では、Propsを使って、親コンポーネントから子コンポーネントにデータを渡してみましょう。

// 親コンポーネント（App.js）
   import React from 'react';
   import Message from './Message';

   function App() {
     return (
       <div>
         <Message text="Hello from Props!" />
       </div>
     );
   }

   export default App;


// 子コンポーネント（Message.js）
   import React from 'react';

   function Message(props) {
     return <h1>{props.text}</h1>;
   }

   export default Message;

• Appコンポーネントは、Messageという子コンポーネントを表示しています。
• Messageコンポーネントには、textという名前のPropsを渡し、"Hello from Props!"という文字列を設定しています。
• Messageコンポーネントは、props.textを使って渡された文字列を表示します。

Propsの基本構文

Propsを定義する際は、以下のようにして親コンポーネントで子コンポーネントに属性として渡します。

   <子コンポーネント名 属性名="値" />

子コンポーネント側では、propsオブジェクトを受け取り、その中から必要な値を取得します。

例えば、props.nameやprops.ageのように取り出します。

複数のPropsを渡す

Propsは複数渡すことも可能です。次の例では、nameとageの2つのPropsを渡してみましょう。

// 親コンポーネント
   function App() {
     return (
       <div>
         <Profile name="Alice" age={25} />
       </div>
     );
   }


// 子コンポーネント
   function Profile(props) {
     return (
       <div>
         <h1>Name: {props.name}</h1>
         <p>Age: {props.age}</p>
       </div>
     );
   }

• 親コンポーネントAppから、ProfileコンポーネントにnameとageのPropsを渡しています。
• Profileコンポーネントでは、props.nameとprops.ageを使って値を表示しています。

分割代入を使ったPropsの受け取り

Propsが多いと、props.〇〇と何度も書くのは面倒なので、JavaScriptの分割代入を使ってスッキリ記述できます。

   function Profile({ name, age }) {
     return (
       <div>
         <h1>Name: {name}</h1>
         <p>Age: {age}</p>
       </div>
     );
   }

• このようにProfile({ name, age })と書くことで、props.nameやprops.ageといった書き方を省略できます。

デフォルトPropsの設定

Propsを渡さなかった場合に、デフォルトの値を設定することも可能です。

これにより、親コンポーネントが値を渡し忘れても、予期しないエラーを防ぐことができます。

   function Profile({ name = "Guest", age = 20 }) {
     return (
       <div>
         <h1>Name: {name}</h1>
         <p>Age: {age}</p>
       </div>
     );
   }

• nameとageにデフォルト値を設定しています。
  この例では、ProfileコンポーネントがnameとageのPropsを受け取らなかった場合でも、それぞれ”Guest”と20が使われます。

Propsの型指定

大規模なアプリケーションでPropsの型を間違えた場合、エラーが発生する可能性があります。
Reactでは、prop-typesというライブラリを使ってPropsの型指定が可能です。

   import PropTypes from 'prop-types';

   function Profile({ name, age }) {
     return (
       <div>
         <h1>Name: {name}</h1>
         <p>Age: {age}</p>
       </div>
     );
   }

   Profile.propTypes = {
     name: PropTypes.string,
     age: PropTypes.number
   };

• このコードでは、nameが文字列で、ageが数値であることを指定しています。間違った型のPropsが渡されると、コンソールに警告が表示されます。

まとめ

ReactのPropsを使うことで、コンポーネント間でデータを受け渡すことができ、再利用性が向上します。以下のポイントを押さえておきましょう。

• Propsはコンポーネントにデータを渡すための仕組み。
• 親コンポーネントから子コンポーネントに渡され、子コンポーネントはPropsを直接変更できない。
• 分割代入を使うとコードがシンプルに。
• デフォルトPropsを設定すると、Propsが渡されなかった場合の対策になる。
• 型指定をすることで、データの一貫性が保たれる。

これらの基本を押さえれば、Propsを自在に使いこなして、Reactアプリケーションをさらに柔軟に構築できるようになります。次はJSXについて理解を深めましょう！