【React】propsを理解する - コンポーネント間でデータを渡す方法

はじめに

この記事で学べること

この記事では、Reactの基本機能であるpropsの使い方を学びます。具体的には以下の内容を扱います。

• propsの基本概念と役割
• さまざまなデータ型(文字列、数値、配列、オブジェクト)の渡し方
• デフォルト値の設定方法
• よくあるミスと注意点

対象読者

• Reactの基礎を学び始めた方
• JSXの基本的な書き方を理解している方
• コンポーネント間でのデータの受け渡し方法を知りたい方

propsとは

propsの役割と概念

propsは「properties」の略で、Reactコンポーネントにデータを渡すための仕組みです。親コンポーネントから子コンポーネントへ一方向にデータを渡すことができます。

propsを使うことで、コンポーネントを再利用可能にし、異なるデータを表示させることができますね。

コンポーネント間のデータの流れ

propsによるデータの流れは常に親から子への一方向です。この特性を単方向データフローと呼びます。

propsの基本的な使い方

文字列を渡す

最もシンプルな例として、文字列を渡してみましょう。

親コンポーネント(App.jsx)

import ChildComponent from './ChildComponent';

function App() {
  return (
    <div>
      <ChildComponent name="太郎" />
    </div>
  );
}

export default App;

子コンポーネント(ChildComponent.jsx)

function ChildComponent(props) {
  return <p>こんにちは、{props.name}さん</p>;
}

export default ChildComponent;

出力結果: こんにちは、太郎さん

コンポーネントでpropsを受け取る方法

propsを受け取る方法は2つあります。

方法1: propsオブジェクトとして受け取る

function ChildComponent(props) {
  return <p>{props.name}</p>;
}

方法2: 分割代入で受け取る

function ChildComponent({ name }) {
  return <p>{name}</p>;
}

分割代入を使うと、コードがシンプルになり読みやすくなります。

さまざまなデータ型の渡し方

数値を渡す

数値を渡す際は、波括弧 {} で囲む必要があります。これはJavaScriptの式を埋め込むためのJSXの記法です。

正しい例

// App.jsx
<ChildComponent age={25} score={85.5} />

間違った例

// これは文字列の "25" になってしまう
<ChildComponent age="25" />

子コンポーネントでの使用例

function ChildComponent({ age, score }) {
  return (
    <div>
      <p>年齢: {age}歳</p>
      <p>スコア: {score}点</p>
      <p>年齢の型: {typeof age}</p> {/* "number" と表示される */}
    </div>
  );
}

配列を渡す

配列も波括弧で囲んで渡します。

App.jsx

function App() {
  const hobbies = ['読書', 'プログラミング', '旅行'];
  
  return <ChildComponent hobbies={hobbies} />;
}

ChildComponent.jsx

function ChildComponent({ hobbies }) {
  return (
    <div>
      <h3>趣味一覧</h3>
      <ul>
        {hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
    </div>
  );
}

配列を直接渡すこともできます。

<ChildComponent hobbies={['読書', 'プログラミング', '旅行']} />

オブジェクトを渡す

オブジェクトも配列と同様に波括弧で囲んで渡します。

App.jsx

function App() {
  const user = {
    name: '太郎',
    age: 25,
    email: '[e-mail]'
  };
  
  return <ChildComponent user={user} />;
}

ChildComponent.jsx

function ChildComponent({ user }) {
  return (
    <div>
      <p>名前: {user.name}</p>
      <p>年齢: {user.age}</p>
      <p>メール: {user.email}</p>
    </div>
  );
}

ネストしたデータの扱い方

オブジェクトの中にオブジェクトや配列が含まれる場合も、同じようにアクセスできます。

function App() {
  const user = {
    name: '太郎',
    contact: {
      email: '[e-mail]',
      phone: '090-1234-5678'
    },
    skills: ['JavaScript', 'React', 'Node.js']
  };
  
  return <ChildComponent user={user} />;
}

function ChildComponent({ user }) {
  return (
    <div>
      <p>名前: {user.name}</p>
      <p>メール: {user.contact.email}</p>
      <p>電話: {user.contact.phone}</p>
      <h4>スキル</h4>
      <ul>
        {user.skills.map((skill, index) => (
          <li key={index}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}

propsのデフォルト値を設定する

propsが渡されなかった場合に使用されるデフォルト値を設定することができます。これにより、エラーを防ぎ、コンポーネントの安定性が向上します。

デフォルト引数を使った方法

最も簡潔な方法は、関数のデフォルト引数を使う方法です。

function ChildComponent({ name = 'ゲスト', age = 0 }) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}歳</p>
    </div>
  );
}

使用例

// propsを渡さない場合
<ChildComponent />
// 出力: 名前: ゲスト、年齢: 0歳

// 一部だけ渡す場合
<ChildComponent name="太郎" />
// 出力: 名前: 太郎、年齢: 0歳

defaultPropsを使った方法

クラスコンポーネントでよく使われていた方法ですが、関数コンポーネントでも使用できます。

function ChildComponent({ name, age }) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}歳</p>
    </div>
  );
}

ChildComponent.defaultProps = {
  name: 'ゲスト',
  age: 0
};

現在はデフォルト引数を使う方法が推奨されています。

まとめ

propsを使う際のポイント

1. データ型によって記法が異なる

   • 文字列: ダブルクォートで囲む name="太郎"
   • それ以外: 波括弧で囲む age={25}

2. propsは読み取り専用

   • 子コンポーネント内でpropsの値を直接変更してはいけません
   • データを変更したい場合はstateを使用します

3. デフォルト値を設定する

   • 必須ではないpropsにはデフォルト値を設定すると安全です

参考資料

• React公式ドキュメント - Components and Props
• React公式ドキュメント - TypeScriptでのProps