React Propsの基礎完全ガイド：関数コンポーネントでの簡単な取り扱い方法とデータフローの解説

React Propsの使い方を初心者にわかりやすく解説します。

関数コンポーネントでは、Propsの取り扱いが非常に簡単です。

また、データの流れを理解するために、Reactコンポーネントのツリー構造を具体的な画像例とともに解説します。

この記事を読んで、Propsの基礎を完全にマスターしましょう。

ReactのProps(小道具)とは？
- 関数コンポーネントでPropsを渡す方法

ReactのProps(小道具)とは？

コンポーネントを再利用すると、両方の時間で同じコンテンツが表示され続けます。

ですが、他のテキストや外部ソースからデータをフェッチしている間、事前に情報が分からない場合は非常に厄介です。

HTML要素では、要素の動作を変更したりする情報を渡すために使用される属性があるのはご存知かも知れません。

例えばsrc、<a>、<img>などなどです。

これらは表示された画像やタグの属性を変更すると、リンク先が変更され、レンダリングされます。

これと同様に、情報をReactコンポーネントに渡す事ができるのがあります。

それをProps(小道具)と呼んでいます。

Propsはプロパティです。

つまり、それら情報をプロパティとしてReactのコンポーネントに渡しています。

このPropsを、親コンポーネントから子のコンポーネントに渡します。

JavaScript関数の引数やHTMLの属性に非常に似ています。

Propsは、HTML属性を介してコンポーネントに渡されていきます。

そして、データはコンポーネントツリーを下に流れていきます、バケツリレー式で渡されたコンポーネントとも言ったりします。

これは、一方向のデータフローと呼ばれており基本的には一方通行となっています。

Propsはデータの読み取り専用となっています

つまりコンポーネント内のPropsは不変であるため、他のコンポーネントへ渡された値を変更する事はできません。

値を変更するとエラーが返されます。

変更する際は、渡された子コンポーネントではなく親のコンポーネントで変更するしかありません。

なぜなのかは、Propsでは親コンポーネントで常にデータを保持されているからです。

Propsを使用しデータを表示したり、そのデータを使用してコンポーネントをインタラクティブに設計することが可能であり、さまざまな状況に適応できるコンポーネントを作成するための重要な部分となっております。

抑えておくべきPropsルール

・ Propsは親コンポーネントから子コンポーネントのリレー式で渡される、一方向のデータフロー。

・ Propsは読み取り専用のプロパティ

・ Propsは不変です、一度設定するとPropsの値は変更できません、Propsの値の変更は親コンポーネントで行う。

・ Propsは、関数コンポーネントとクラスコンポーネントの両方で使用可能です。

関数コンポーネントでPropsを渡す方法

親コンポーネントのApp関数コンポーネントにgreeting変数として宣言します。

当記事では、このAppコンポーネントを親コンポーネントとします。

const App = () => {
  
const greeting = 'Welcome to the world of React.js!';

  return (
    <div>
    <Child />
    </div>
  );
}

子のコンポーネントを作成しましょう、Childコンポーネントとします。

const Child = () => {

return (
<div>

</div>);
};

Reactコンポーネントから別のコンポーネントにデータを渡す方法は、コンポーネントをレンダリングするときは、属性のような構文を使用してPropsをコンポーネントに追加します。

任意のProps名を自由に使用可能です。

以下でしたらtextとなります。

const App = () => {
  
const greeting = 'Welcome to the world of React.js!';

  return (
    <div>
    <Child text={greeting} />
    </div>
  );
}

そして、textプロパティとしてgreeting変数を子コンポーネントにPropsとして渡します。

子のコンポーネント関数の最初の引数として常にPropsを受けとります。

const Child = (props) => {

return (
<div>

<h2>{props.text}</h2>

</div>);
};

See the Pen Untitled by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

もし、コンポーネントのレンダリング時にPropsが指定されていない場合は、デフォルトのPropsが使用されます。

// 子コンポーネント
const Child = (props) => {}

つまり、必要なデータが子コンポーネントに渡されますが、子コンポーネントがデータを受信しないことがあります。

その場合では子コンポーネントがデータを受け取らなくても、いくつかの値を表示するようにデフォルトのPropsを設定する必要があるのです。

デフォルトPropsがない場合、Propsを受け取らないがJSXにProps値を表示する子コンポーネントには何も表示されません。

ですが、Propsを渡されているがレンダリング時に何も表示しないのはベストプラクティスではありません。

Reactアプリケーションが誤作動していると考えてしまいます。

コンポーネントからコンポーネントに渡されるすべてのデータを保持するJavaScriptオブジェクトであるため、Propsを分解する事が可能です。

引数に中括弧{}で囲います。

上記と同様の出力となります。

// 子コンポーネント 
const Child = ({ text }) => {

return (
<div>

<h2>{text}</h2>

</div>);
};

上記のコードでは、textというPropsを受け取るために、関数の引数を中括弧{ }で囲む必要があります。

これは、ES6の分割代入である(Destructuring assignment)の構文を利用しています。

const Child = ({ text }) => { ... }と書くことで、Childコンポーネントの引数として渡されるPropsオブジェクトから、textプロパティの値を取り出して、変数textに割り当てることができます。

これにより、textという名前の変数が直接利用できるようになります。

つまり、{text}と書くことで、textの値をJSX内で表示することができます。

この書き方は、コードを短くシンプルにするための一つの方法であり、Propsの中から必要な値を選択的に受け取りたい場合に便利です。

ただし注意点は、この書き方を利用する際には、Propsオブジェクトの中に存在しないプロパティ名を指定した場合、その値はundefinedになります。

そのため、適切なプロパティ名を指定する必要があります。

Propsの分解は、オブジェクトや配列データで複数のPropsを子コンポーネントに渡す際に使用したりします。

const Child = ({ text, bool, num }) => { }

Propsの分解は後程、詳しく解説致します。

ご覧の通り、Propsを使用すると、あるコンポーネントからコンポーネントツリーの別のコンポーネントに値を渡すことができます。

See the Pen React props by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

変数宣言をせずに値を直接、子コンポーネントに渡したい場合は、Propsをインラインで定義すると可能となります。

中括弧内{ }にクォートで定義します。

JavaScript文字列では、一重引用符または二重引用符内にPropsとして渡すことができるという事です。

const App = () => {
  
  return (
    <div>
    <Child greet={"Hello, Taro."} />
    </div>
  );
}

const Child = ({ greet }) => {

return (
<div>

<h2>{greet}</h2>

</div>);
};

Reactでは、Propsが持つことができる値に制限はありません。

ただし、二重引用符で囲まれた文字列リテラルを除くすべての値は、中括弧{ }で囲む必要があります。

See the Pen React props inline by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

子コンポーネントで変数として割り当て使用したい場合は、デフォルトのPropsを引数として受けとってから、変数を宣言し割り当てます。

const Child = (props)=> {

const greet = props.greet;

return (
<div>

<h2>{greet}</h2>

</div>);
};

上記は、子コンポーネントでPropsを受け取り、変数として使用する例となっています。

Childコンポーネントでは、引数としてPropsを受け取ります。その後、Propsオブジェクトから必要な値を変数に割り当てます。上記のコードでは、greetという変数にprops.greetの値を割り当てています。

その後、割り当てられた変数をJSX内で表示しています。

このようにすることで、受け取ったPropsの値を変数として利用が可能です。

複数のProps

Propsは、以下のように好きなだけ扱う事も可能です。

// 親コンポーネントの定義
const App = () => {
  
  return (
    <div>
      {/* Childコンポーネントを呼び出し、propsとして"greet"と"name"を渡す */}
      <Child greet={"Hello"} name={"Taro"} />
    </div>
  );
}

// 子コンポーネントの定義
const Child = ({ greet, name }) => {

  return (
    <div>
      {/* 受け取ったpropsを表示 */}
      <h2>{greet}, {name}</h2>
    </div>
  );
};

上記のコードは、親コンポーネントであるAppが子コンポーネントであるChildを呼び出しています。

Appコンポーネントでは、Childコンポーネントに対して2つのPropsを渡しています。greetには文字列"Hello"が、nameには文字列"Taro"が渡されます。

Childコンポーネントでは、受け取ったPropsを表示しています。greetとnameの値を組み合わせて、「Hello, Taro」というテキストが表示されます。

複数のPropsを渡す際には、いくつかの注意点があります。

まず第一に、渡すPropsのプロパティ名と、子コンポーネントでの受け取り側の引数名を一致させる必要があります。もしプロパティ名が異なると、渡した値が正しく受け取られません。

また、複数のPropsを渡す場合には、親コンポーネントで指定した順序通りに子コンポーネントで受け取ることができます。したがって、Propsの順序には注意が必要です。

間違った順序でPropsを渡してしまうと、意図しない結果になる可能性があります。

さらに、必須のPropsがある場合は、そのPropsが正しく渡されているかを確認する必要があります。

もし必須のPropsが渡されていない場合、子コンポーネントでエラーが発生する可能性があります。したがって、必須のPropsが適切に指定されているかを確認し、必要に応じて値を提供する必要があります。

これらに注意する必要があります、複数のPropsを正しく渡し、子コンポーネントで受け取ることができます。Propsの受け渡しは、Reactコンポーネント間でデータを効果的に共有するための重要な手段です。

ここまででは、Propsの値は文字列のみでした。

ただし、Propsを数値、ブール値、オブジェクト、配列、さらにはテンプレートリテラルなどの値に設定したい場合がよくあります。

Propsは、以下のようなあらゆる種類のデータ型を渡すために使用できます。

・ String

・ Array

・ Integer(整数)

・ Boolean

・ Object

・ Function

それらを見ていきましょう。

変数を含むテンプレートリテラル

ES6の便利な機能である、テンプレートリテラルで変数を含むリテラル表記でPropsを子コンポーネントに渡します。

const App = () => {

  const myName = "Taro";

  return (
    <div>
    <Child name={`My name is ${myName}`} />
    </div>
  );
}

const Child = ({ name }) => {

return (
<div>

<h2>{name}</h2>

</div>);
};

See the Pen 小道具の変数を含むテンプレートリテラル by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

テンプレートリテラルの場合、複数行の文字列ははるかにクリーンとなります。

Reactで再利用可能なコンポーネントを操作するときに特に役立ちます。

数値

ReactのコンポーネントにPropsとして数値を渡すには、数値を中括弧{ }で囲みます。

const App = () => {
  return (
    <div>
    <Child num={40} />
    </div>
  );
}

const Child = ({ num }) => {

return (
<div>

<h2>Number: {num}</h2>

</div>);
};

See the Pen 数値リテラルで小道具を渡す by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

子コンポーネントにnumというPropsを渡しています。

必ず、中括弧で囲む必要があることに注意して下さい。

もちろん、数値でも複数のPropsを分解して使用する事も可能となります。

ブール値

ブール値でも同様に中括弧を使用してあげます。

boolというProps名にはtrueとして渡します。

const App = () => {
  return (
    <div>
    <Child bool={true} />
    </div>
  );
}

const Child = ({ bool }) => {

return (
<div>

<h2> {bool && <h1>Hello!!</h1>}</h2>

</div>);
};

See the Pen ブール値を小道具として渡す by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

子コンポーネントでPropsを受けとり、論理演算子&&を使用しHello!!を表示させます。

注意点は、Propsとして渡す際に"false"などのように文字列としてブール値を囲まないようにして下さい。

それはfalseではなく文字列です。

ブール値をPropsとして渡す際は、明示的に指定してあげる必要があります。

また、数値をPropsとして渡す際には、数値型の妥当性を確認することが重要です。子コンポーネント内で数値に関する検証や制約が必要な場合は、適切なチェックやエラーハンドリングを行うようにしてください。

例えば、以下のように数値をPropsとして渡す際に数値型の妥当性を確認し、子コンポーネント内で検証やエラーハンドリングを行います。

import React from 'react';
import PropTypes from 'prop-types';

const ChildComponent = (props) => {
  // 数値型の妥当性を確認する
  if (typeof props.numberProp !== 'number') {
    // エラーハンドリング: 数値型でない場合はエラーメッセージを表示する
    return <p>Error: Propsには数値を渡してください。</p>;
  }

  // 数値に関する制約を検証する
  if (props.numberProp < 0) {
    // エラーハンドリング: 負の数の場合はエラーメッセージを表示する
    return <p>Error: Propsには正の数を渡してください。</p>;
  }

  // 正しい数値が渡された場合の表示
  return <p>渡された数値: {props.numberProp}</p>;
};

// Propsの型を定義する
ChildComponent.propTypes = {
  numberProp: PropTypes.number.isRequired
};

export default ChildComponent;

上記の例では、prop-typesパッケージを使用してPropsの型を定義しています。

子コンポーネントで受け取るnumberPropは数値型であることを要求しており、isRequiredを指定して必須のプロパティであることも示しています。

子コンポーネント内で、typeof演算子を使用してPropsが数値型かどうかを確認します。

もし数値型でない場合、エラーメッセージを表示します。

また、数値に関する制約を検証するために、props.numberPropが負の数である場合にもエラーメッセージを表示する処理を追加しています。

これにより、数値をPropsとして渡す際に数値型の妥当性を確認し、検証やエラーハンドリングを行うことができます。

配列リテラル

const App = () => {
  const arr = ["Apple, ", "Banana, ", "Lemon"];
  return (
    <div>
    <Child array={arr} />
    </div>
  );
}

const Child = ({ array }) => {

return (
<div>

<h2> {array}</h2>

</div>);
};

基本的には、子コンポーネントは配列に対してmap()構文などを使用して、配列の要素をレンダリングさせます。

const Child = ({ array }) => {

return (
<div>

<h2> 
   {array.map((arr, i) => (
     <ul>
         <li key={i}>{arr}</li>
     </ul>
      ))}
  </h2>

</div>);

See the Pen 配列リテラルとして小道具を渡す by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

下記でも同様に機能します。

onst Child = ({ array }) => {

return (
<div>

<h2> 
   {array.map(index => {
        return <div key={index}>{index}</div>;
      })}
  </h2>

</div>);
};

配列をPropsで渡す際、インラインとして渡す事も可能です。

const App = () => {

  return (
    <div>
<Child array={["Apple, ", "Banana, ", "Lemon"]} />
    </div>
  );
}

配列をループ処理する場合は、keyの各要素に一意のPropsを設定するようにしてください。

それは、Reactが要素を互いに区別し、仮想DOMと実際のDOMを区別する際のパフォーマンスを向上させ、配列要素を更新するだけでアプリケーションを高速化できるためとなります。

配列要素をPropsとして渡す際に、個別で渡したい場合もあるかと思います。

上記の配列で、AppleとBananaだけをそれぞれ個別に子コンポーネントにPropsとして渡します。

const App = () => {
  const arr = ["Apple", "Banana", "Lemon"]
  return (
    <div>
    <Child a={arr[0]} b={arr[1]} />
    </div>
  );
}

const Child = ({ a, b }) => {
return (
<div>
<h2> 
   {a},  {b}
  </h2>
</div>);
};

See the Pen 配列要素を個別で小道具として渡す by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

特定のインデックスにある配列要素にアクセスすることで、個々の配列要素をPropsとしてコンポーネントに渡すことが可能となります。

配列要素のインデックス番号を忘れないようにして下さい。

他の例として、空の配列を親コンポーネントで作成し、子コンポーネントで再定義して更新する例を以下に示します。

Reactで、Propsや状態の更新時に効率的かつ便利にオブジェクトや配列を操作するには、スプレッド構文を使用します。

Reactにおけるスプレッド構文は、オブジェクトや配列の要素を展開して新しいオブジェクトや配列を生成するために使用されます。

これにより、既存のオブジェクトや配列の要素をコピー・結合することができます。

オブジェクトのスプレッド構文では、オブジェクトのプロパティを解凍して新しいオブジェクトを生成します。

配列のスプレッド構文では、配列の要素を解凍して新しい配列を生成します。

// 親コンポーネント（ParentComponent.js）
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState([]);

  const updateData = () => {
    const newData = []; // 空の配列
    setData([...newData]);
  };

  return (
    <div>
      <button onClick={updateData}>データ更新</button>
      <ChildComponent data={data} setData={setData} />
    </div>
  );
};

export default ParentComponent;

// 子コンポーネント（ChildComponent.js）

import React from 'react';

const ChildComponent = ({ data, setData }) => {
  const updateData = () => {
    const newData = ['Item 1', 'Item 2', 'Item 3']; // 新しい配列データ
    setData([...newData]); // 親コンポーネントの状態を更新
  };

  return (
    <div>
      <button onClick={updateData}>データ更新</button>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ChildComponent;

上記のコードでは、親コンポーネントと子コンポーネントの両方で、スプレッド演算子（...）を使用して配列を新しく展開しています。

親コンポーネントのupdateData関数では、新しい空の配列を作成し、スプレッド演算子を使ってその配列をsetDataを介して親の状態として設定しています。

同様に、子コンポーネントのupdateData関数でも、新しい配列を作成し、スプレッド演算子を使用してその配列をsetDataを介して親の状態として設定しています。

これにより、配列の要素が空になり、子コンポーネント内で新しい配列が展開されることで、状態の更新が実現されます。

Reactにおけるスプレッド構文では、このようなオブジェクトや配列の要素の展開を利用して、Propsの受け渡しや状態の更新などを行うことができます。

ただし、スプレッド構文を使用する場合、元のオブジェクトや配列の要素はコピーされるため、参照が維持されませんので注意してください。

オブジェクトをPropsとして渡す

コンポーネントのPropsを動的に作成する場合は、コンポーネントのPropsを純粋なJavaScriptオブジェクト内に保持することができます。

スプレッド構文（...）を使用し、オブジェクトをPropsとしてReactの子コンポーネントに渡します。

オブジェクトでのスプレッド構文でも、オブジェクトのすべてのプロパティを解凍し、それらをPropsとして指定されたコンポーネントに渡します。

反復可能なオブジェクトまたは配列を文字列を含む任意の値をコピー・結合させます。

配列との違いは、オブジェクトのプロパティを結合させて複数のプロパティをコピーし、それをPropsとして子コンポーネントに動的プロパティとして渡します。

const App = () => {
  const obj = {name: "Taro", age: 30, country: " Japan"}
  return (
    <div>
    <Child {...obj} />
    </div>
  );
}

const Child = ({ name, age, country }) => {
return (
<div>

<h2>{name}</h2>
  
<h2>{age}</h2>
  
<h2>{country}</h2>

</div>);
};

See the Pen オブジェクトとして小道具を渡す by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

スプレッド構文（...）を使用して、オブジェクトのプロパティをPropsとして子コンポーネントのChildに渡しています。

子コンポーネントである、Childは引数で渡されたPropsを分解して使用できます。

分解せずに、オブジェクト全体をそのままPropsとして渡したい場合は、オブジェクトのプロパティにアクセスします。

const App = () => {
  const obj = {name: "Taro", age: 30, country: " Japan"}
  return (
    <div>
    <Child data={obj} />
    </div>
  );
}

dataというProps名を用意し、それを子コンポーネントへ渡します。

const Child = ({ data }) => {
return (
<div>

<h2>{data.name}</h2>
  
<h2>{data.age}</h2>
  
<h2>{data.country}</h2>

</div>);
};

これで分解する事なく、オブジェクト全体のデータを受けとりそれぞれ個別に表示します。

オブジェクトをPropsとして渡す際の注意点があります。

オブジェクトが変数に格納されておらず、かつインラインとして渡される場合に限り、オブジェクトをPropsとして渡すときに2つの中括弧{ { } }が必要となります。

//親コンポーネント

 <Child data={ { name: "Taro", age: 30, country: " Japan"} } />

インラインとしてオブジェクトをPropsとして渡す際はこの中括弧{ { } }に気を付けて下さい。

少し混乱するかもしれませんが、外側の中括弧の1つはJSX用で、もう1つの内側はJavaScriptオブジェクトの表記用です。

関数をPropsとして渡す

useStateフックを使用してよくあるカウントアップ関数を、Propsとして子コンポーネントへ渡します。

プロパティ名は分かりやすくhandleClickで同じ名前にします。

const App = () => {
  const [count, setCount] = React.useState(0);
  
  function handleClick() {
    setCount(count + 1);
  }
  
  return (
    <div>
       <h2>Count: {count}</h2>
    <Child  handleClick={handleClick} />
    </div>
  );
}

下記の、子コンポーネントで引数にhandleClick のPropsを受けとります。

ボタンタグに埋め込んで、子コンポーネントの関数を使用し機能させます。

const Child = ({ handleClick }) => {

return (
<div>
<button onClick={handleClick}>Increment</button>


</div>);
};

See the Pen 関数を小道具として渡す by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

関数をPropsとして渡す際に、関数を呼び出さなかったことに注意してください。

前述で解説した通り、Propsは読み取り専用のプロパティです。

関数を呼び出した結果ではなく、関数への参照を渡すことが非常に重要となっております。

子コンポーネントから親にデータを渡す

基本的にはPropsは一方向でのデータ渡しとなっていますが、子コンポーネントから親にデータを渡したい場合があります。

例えば、要素から値を格納する場合は、それらの値を子のコンポーネントから親に取得する必要があります。

親コンポーネントでPropsを使用して、コールバック関数を子に渡すことができます。

つまり、親コンポーネントで関数(通常はイベントハンドラ)を定義し、それをコールバック関数として渡すことが可能です。

親から子に関数を渡してあげます。

その関数は何かを返すことができ、親コンポーネントでそれを取得します。

ではオブジェクトの情報を親コンポーネントに渡しましょう。

useStateフックの初期値としてオブジェクトを格納します、プロパティの値は初期値段階では不明とします。

const App = () => {

const [childData, setChildData] = useState({
    name: '不明',
    age: '不明'
  });

  const sendData = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <Child sendData={sendData} />

      <p>ユーザー情報: 名前: {childData.name}, 年齢: {childData.age}
        
      </p>
    </div>
  );
}

子コンポーネントであるChildに、オブジェクトのデータを用意します。　

引数にPropsであるsendDataを受け入れます。

イベントハンドラで、useStateフックの初期値が更新されると、子コンポーネントで再定義されたオブジェクトを表示させます。

const Child = ({sendData}) => {
const obj = {
        name: 'Taro',
        age: 30
    };
const ClickHandler = () => {
        sendData(obj);
    }
    
return (
<div>
  <button onClick={ClickHandler}>Click me</button>
</div>);
};