【React】props（プロップス）とは？使い方・データ型・分割代入の方法などを解説！

Reactを学び始めたときに、まず最初に出てくるのがprops（プロップス）という概念。でも、

  • propsってなに？
  • propsは何の略？
  • propsのデータ型は？
  • どうやって使うの？

といった疑問を持つ方も多いと思います。

この記事では『props（プロップス）』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

  • props（プロップス）とは？
  • propsは読み取り専用（immutable）であること
  • propsのデータ型
  • propsの分割代入を使う方法

props（プロップス）とは？

props（プロップス）とは？

propsは親コンポーネントから子コンポーネントへ値を渡すための仕組みです。propsは「properties（プロパティ）」の略で、HTMLタグの属性のように見えることからその名前がついています。

たとえば以下のコードを見てください。

親コンポーネント（Parent）

親コンポーネント（Parentコンポーネント）では、JSXの中でタグの属性のように書くことで、親から子にpropsを渡します。以下の例では、子コンポーネント（Childコンポーネント）に対してname="太郎"というpropsを渡しており、内部的には{ name: "太郎" }というオブジェクトがChildコンポーネントに渡されます。

import Child from './Child';

export default function Parent() {
  return <Child name="太郎" />;
}

子コンポーネント（Child）

子コンポーネント（Childコンポーネント）がpropsを受け取るためには、関数に受け取りのための引数を用意します。名前は自由ですが、Child(props)のようにそのままpropsとするのが一般的です。受け取ったpropsはprops.名前（ここではprops.name）の形式でアクセスすることができます。

export default function Child(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

propsは読み取り専用（immutable）

Reactでは、propsは読み取り専用（immutable）です。子コンポーネント側でpropsの値を勝手に変えてしまうと、Cannot assign to read only property 'name' of object '#<Object>'エラーになります。

子コンポーネント（Child）

export default function Child(props) {
  props.name = '二郎'; // ❌ エラーになる
  return <h1>こんにちは、{props.name}さん！</h1>;
}

propsを変更したいときは、親コンポーネント側でstateを使って管理しましょう。サンプルコードを以下に示します。

親コンポーネント（Parent）

import { useState } from 'react';
import Child from './Child';

export default function Parent() {
  const [name, setName] = useState('太郎');

  return (
    <div>
      <Child name={name} />
      <button onClick={() => setName('二郎')}>名前を変更</button>
    </div>
  );
}

子コンポーネント（Child）

export default function Child(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

ボタンをクリックするとsetNameによって親コンポーネント（Parentコンポーネント）のstateが更新され、それがprops経由で子コンポーネント（Childコンポーネント）に反映されます

propsのデータ型

以下のようにname="太郎"のように、クォートで括った書き方をすると、propsに渡される値はすべて文字列と見なされます。以下の場合9、nameの値は"太郎"という文字列型です。

export default function Parent() {
  return <Child name="太郎" />;
}

もし数値・配列・関数・オブジェクトなどの別の型の値を渡したい場合は、中括弧{}を使ってJavaScriptの式として書く必要があります。

型書き方例
数値<Child name={13} />
配列<Child name={["太郎", "次郎", "三郎"]} />
関数<Child name={() => console.log("Hoge")} />
オブジェクト<Child name={{ name: "太郎", age: 48 }} />

propsの分割代入を使う方法

通常、propsは以下のようにprops.名前の形式でアクセスします。

export default function Child(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

しかし、毎回props.名前を書くのは少し手間です。そこで、分割代入を使うと、以下のように書けてコードがスッキリします。

export default function Child({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

子コンポーネントはpropsを{名前1: 値1, 名前2: 値2, ...}形式のpropsオブジェクトで受け取っているので、分割代入が可能になっているのです。

分割代入のメリット

分割代入を用いることで以下のようなメリットがあります。

  • 呼び出しコードが簡潔になる
    • props.nameではなく、nameだけで済む。
  • 必要なpropsの一覧が明確になる
    • 関数の引数で{ name, age, ... }のように、どんな値を受け取るかが一目でわかる。
  • デフォルト値も簡単に設定できる
    • たとえば、以下のように書けば、nameが渡されなかったときに"太郎"が使われる。
    • export default function Child({ name = "太郎" }) {...}

本記事のまとめ

この記事では『props（プロップス）』について、以下の内容を説明しました。

  • propsは「親→子」へのデータ受け渡しのための仕組み
  • propsは読み取り専用なので、子から変更してはいけない
  • 状態管理が必要な場合は、親でstateを持つ
  • propsの分割代入でコードをスッキリ書ける

お読み頂きありがとうございました。

スポンサーリンク