MENU
  1. ホーム
  2. React
  3. Reactで親から子コンポーネントにpropsを渡す基本ガイド：初心者でもわかる方法

Reactで親から子コンポーネントにpropsを渡す基本ガイド：初心者でもわかる方法

React

Reactは、Webアプリケーション開発において広く使用されているJavaScriptライブラリです。その中で、コンポーネント間でのデータのやり取りは、アプリケーションの構造を理解する上で重要な部分です。親コンポーネントから子コンポーネントにデータを渡す際に使用されるのが「props（プロップス）」です。本記事では、propsの基本的な概念から実際の使い方まで、初心者にもわかりやすく解説します。Reactのプロジェクトを始めたばかりの方や、コンポーネント間のデータ伝達に課題を感じている方にとって、役立つ内容となるでしょう。

目次
  1. propsとは何か
    1. propsの役割
    2. propsの特徴
    3. 例: propsの基本形
  2. propsの基本的な使用方法
    1. 親から子へのデータ渡し
    2. propsを使った動的データの渡し
    3. 複数のpropsを渡す場合
    4. ポイント
  3. propsを使った動的データの表示
    1. 動的データを表示する基本例
    2. リストデータの表示
    3. 条件付きレンダリングを使用した動的表示
    4. ポイント
  4. デフォルトpropsの設定方法
    1. デフォルトpropsの設定方法
    2. デフォルトpropsを設定するメリット
    3. 実用例
    4. まとめ
  5. propsの型チェック
    1. PropTypesの導入
    2. PropTypesの基本的な使い方
    3. サポートされる型の種類
    4. PropTypesを使用するメリット
    5. まとめ
  6. 状態管理とpropsの組み合わせ
    1. 状態（state）とpropsの違い
    2. 状態をpropsとして子コンポーネントに渡す例
    3. 状態とイベントハンドラーを組み合わせた例
    4. 状態管理のベストプラクティス
    5. 状態管理の複雑化を防ぐために
    6. まとめ
  7. イベントをpropsで渡す
    1. 基本的な使い方
    2. イベントに引数を渡す場合
    3. 複数のイベントを渡す場合
    4. イベントと状態管理の組み合わせ
    5. イベントをpropsで渡す際の注意点
    6. まとめ
  8. React開発におけるpropsのベストプラクティス
    1. 1. propsの命名規則を統一する
    2. 2. デフォルトpropsを活用する
    3. 3. 型チェックを行う
    4. 4. 必要最小限のpropsを渡す
    5. 5. コンポーネントの分割
    6. 6. 必要に応じてContext APIを利用する
    7. 7. プレゼンテーショナルコンポーネントとコンテナコンポーネントを分ける
    8. まとめ
  9. まとめ

propsとは何か

Reactにおける「props」とは、「properties（プロパティ）」の略で、コンポーネント間でデータをやり取りするための仕組みです。具体的には、親コンポーネントが子コンポーネントに値を渡すために使用されます。propsは読み取り専用であり、子コンポーネント内で変更することはできません。

propsの役割

propsは、以下のような役割を果たします。

  • データの伝達: 親から子コンポーネントにデータを渡すことで、親の状態や値を子で利用可能にします。
  • コンポーネントのカスタマイズ: 同じコンポーネントでも、渡すpropsを変えることで異なる見た目や動作を実現できます。

propsの特徴

  • 不変性: propsはコンポーネント内で変更できず、受け取るだけです。
  • 柔軟性: 数値、文字列、関数、オブジェクト、配列など、さまざまなデータ型を渡せます。

例: propsの基本形

以下のコードは、親コンポーネントから子コンポーネントにpropsを渡す例です。

// 親コンポーネント
function ParentComponent() {
  return <ChildComponent message="Hello, World!" />;
}

// 子コンポーネント
function ChildComponent(props) {
  return <h1>{props.message}</h1>;
}

この場合、親コンポーネントから渡されたmessageというpropsを子コンポーネントが受け取り、Hello, World!を画面に表示します。

propsを理解することで、Reactアプリケーションを構築する際の柔軟性と再利用性が向上します。

propsの基本的な使用方法

Reactでpropsを使用する基本的な手順は、親コンポーネントから子コンポーネントにデータを渡し、それを子コンポーネントで受け取るという流れです。ここでは、その具体例を挙げながら解説します。

親から子へのデータ渡し

親コンポーネントがpropsを指定して子コンポーネントを呼び出します。以下は簡単な例です。

// 親コンポーネント
function ParentComponent() {
  return <ChildComponent name="John" />;
}

// 子コンポーネント
function ChildComponent(props) {
  return <p>こんにちは、{props.name}さん！</p>;
}

このコードでは、ParentComponentがChildComponentにnameというpropsを渡し、ChildComponentがその値を受け取って表示します。

propsを使った動的データの渡し

propsは文字列だけでなく、数値や配列、オブジェクトなども渡すことができます。また、動的なデータもpropsとして渡すことが可能です。

function ParentComponent() {
  const user = {
    firstName: "John",
    lastName: "Doe",
  };

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

function ChildComponent(props) {
  return (
    <p>
      ユーザー名: {props.user.firstName} {props.user.lastName}
    </p>
  );
}

この例では、親コンポーネントがオブジェクトを子コンポーネントに渡し、子コンポーネントがそのデータを使用しています。

複数のpropsを渡す場合

複数のpropsを渡したい場合も、カンマで区切って渡すことができます。

function ParentComponent() {
  return <ChildComponent name="John" age={25} />;
}

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

この場合、nameとageの両方のpropsがChildComponentで利用可能です。

ポイント

  • propsは親コンポーネントから子コンポーネントへ一方向にデータを流します。
  • 子コンポーネントは受け取ったpropsをそのまま使うだけで、変更はできません。

propsの基本的な使い方をマスターすることで、Reactでより柔軟なコンポーネント設計が可能になります。

propsを使った動的データの表示

Reactでは、propsを利用して動的なデータを子コンポーネントに渡し、それを画面に表示できます。これにより、ユーザー入力やAPIレスポンスなどのリアルタイムデータを柔軟に反映することが可能です。

動的データを表示する基本例

親コンポーネントが状態を持ち、その状態をpropsとして子コンポーネントに渡す例です。

import React, { useState } from "react";

function ParentComponent() {
  const [userName, setUserName] = useState("John");

  return (
    <div>
      <ChildComponent name={userName} />
      <button onClick={() => setUserName("Jane")}>名前を変更する</button>
    </div>
  );
}

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

この例では、ParentComponentの状態userNameがChildComponentに渡され、ボタンをクリックすると状態が更新されて動的にデータが変更されます。

リストデータの表示

propsを使って配列データを子コンポーネントに渡し、それをリスト形式で表示する例を示します。

function ParentComponent() {
  const items = ["リンゴ", "バナナ", "オレンジ"];

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

function ChildComponent(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

このコードでは、親コンポーネントから渡されたitems配列を子コンポーネントが受け取り、各要素をリストとして表示しています。

条件付きレンダリングを使用した動的表示

propsの値に基づいて、条件付きで異なる内容を表示することもできます。

function ParentComponent() {
  const isLoggedIn = true;

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

function ChildComponent(props) {
  return (
    <div>
      {props.isLoggedIn ? <p>ログイン済みです</p> : <p>ログインしてください</p>}
    </div>
  );
}

この例では、isLoggedInというpropsの値に応じて、異なるメッセージが表示されます。

ポイント

  • propsを通じて、親の状態やデータを動的に子コンポーネントで表示可能。
  • リストや条件付きレンダリングと組み合わせることで、柔軟なUIを構築可能。

propsを活用すれば、動的なアプリケーションを効率的に作成でき、Reactの強力なデータ伝達機能を実感できます。

デフォルトpropsの設定方法

Reactでは、propsが渡されなかった場合に備えて、デフォルト値を設定することができます。これにより、コードの堅牢性が向上し、予期しない動作を防ぐことができます。ここでは、デフォルトpropsの設定方法とその利点について解説します。

デフォルトpropsの設定方法

Reactでは、関数コンポーネントでもクラスコンポーネントでも、defaultPropsを使用してデフォルト値を設定できます。

関数コンポーネントの場合

以下は、関数コンポーネントでデフォルトpropsを設定する例です。

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

Greeting.defaultProps = {
  name: "ゲスト",
};

export default Greeting;

この例では、親コンポーネントからnameが渡されなかった場合、デフォルトで"ゲスト"という値が表示されます。

クラスコンポーネントの場合

クラスコンポーネントでも同様にdefaultPropsを使用できます。

import React from "react";

class Greeting extends React.Component {
  static defaultProps = {
    name: "ゲスト",
  };

  render() {
    return <h1>こんにちは、{this.props.name}さん！</h1>;
  }
}

export default Greeting;

ここでも、nameが渡されなければ"ゲスト"が表示されます。

デフォルトpropsを設定するメリット

  1. エラーの回避
    propsが渡されない場合でもアプリケーションがクラッシュしません。
  2. コードの可読性向上
    デフォルト値を明確にすることで、コンポーネントの意図が読み取りやすくなります。
  3. 開発の効率化
    デフォルト値を設定することで、テストやプロトタイピング時にpropsを渡す手間を省けます。

実用例

例えば、ボタンコンポーネントでデフォルトのラベルを設定する場合です。

function Button(props) {
  return <button>{props.label}</button>;
}

Button.defaultProps = {
  label: "クリック",
};

export default Button;

このコードでは、親コンポーネントからlabelが渡されなくても、デフォルトで「クリック」という文字がボタンに表示されます。

まとめ

defaultPropsを活用することで、コンポーネントがpropsの不足に対して堅牢になり、予期しない挙動を防止できます。これにより、Reactアプリケーションの信頼性と保守性が向上します。

propsの型チェック

Reactでは、PropTypesを使用してpropsの型をチェックできます。これにより、開発中に不適切なデータ型が渡された際に警告を出すことができ、予期しないエラーを未然に防ぐことが可能になります。本節では、PropTypesの使用方法と型チェックの利点について解説します。

PropTypesの導入

PropTypesはReactのライブラリの一部として提供されており、インストールして利用できます。以下のコマンドでインストールします。

npm install prop-types

PropTypesの基本的な使い方

以下は、関数コンポーネントでPropTypesを使用する例です。

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

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

Greeting.propTypes = {
  name: PropTypes.string.isRequired, // nameは文字列で必須
};

export default Greeting;

このコードでは、nameプロパティが文字列であることを要求しています。また、isRequiredを追加することで、nameが必須であることを示しています。

サポートされる型の種類

PropTypesはさまざまな型をサポートしています。以下は主な型の例です。

  • PropTypes.string: 文字列
  • PropTypes.number: 数値
  • PropTypes.bool: 真偽値
  • PropTypes.array: 配列
  • PropTypes.object: オブジェクト
  • PropTypes.func: 関数
  • PropTypes.node: 任意のレンダリング可能な要素（文字列、数値、React要素、配列、Fragmentなど）
  • PropTypes.element: React要素
  • PropTypes.instanceOf: 特定のクラスのインスタンス
  • PropTypes.oneOf: 特定の値のいずれか
  • PropTypes.shape: 特定の形状を持つオブジェクト
  • PropTypes.arrayOf: 特定の型の配列
  • PropTypes.objectOf: 特定の型のオブジェクト

複雑な例

以下は、shapeやarrayOfを使用した例です。

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

function UserProfile(props) {
  return (
    <div>
      <h1>名前: {props.user.name}</h1>
      <p>年齢: {props.user.age}</p>
      <h2>趣味</h2>
      <ul>
        {props.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
    </div>
  );
}

UserProfile.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  }).isRequired,
  hobbies: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default UserProfile;

この例では、userオブジェクトが特定の形状を持つこと、hobbiesが文字列の配列であることを要求しています。

PropTypesを使用するメリット

  1. エラーの早期検出: propsの型が期待値と異なる場合に警告が表示され、バグを防止します。
  2. ドキュメント代わり: コンポーネントがどのようなpropsを期待しているかを明確に示せます。
  3. 保守性向上: チーム開発や規模の大きなプロジェクトでの予測可能性が向上します。

まとめ

PropTypesを使用してpropsの型を明示的に定義することで、Reactアプリケーションの堅牢性を向上させることができます。特に、型チェックは開発中のバグの防止に役立つため、積極的に活用することをお勧めします。

状態管理とpropsの組み合わせ

Reactでは、コンポーネントの状態（state）を管理しつつ、その状態をpropsを通じて子コンポーネントに渡すことで、親子間でデータを連動させることができます。これにより、アプリケーションの動的なUIを簡単に構築することが可能です。

状態（state）とpropsの違い

  • state: 各コンポーネントが自分自身で持つデータ。コンポーネント内で変更可能。
  • props: 親コンポーネントから子コンポーネントへ渡されるデータ。読み取り専用。

状態をpropsとして子コンポーネントに渡す例

以下の例では、親コンポーネントで管理している状態をpropsとして子コンポーネントに渡しています。

import React, { useState } from "react";

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent count={count} />
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
}

function ChildComponent(props) {
  return <h1>現在のカウント: {props.count}</h1>;
}

この例では、親コンポーネントのcount状態がChildComponentにpropsとして渡され、ボタンをクリックするとカウントが増加し、子コンポーネントの表示が更新されます。

状態とイベントハンドラーを組み合わせた例

親コンポーネントで状態を管理し、その更新処理を子コンポーネントに委譲する方法です。

function ParentComponent() {
  const [message, setMessage] = useState("初期メッセージ");

  const updateMessage = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <ChildComponent message={message} onUpdate={updateMessage} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <h1>{props.message}</h1>
      <button onClick={() => props.onUpdate("新しいメッセージ")}>
        メッセージを更新
      </button>
    </div>
  );
}

このコードでは、子コンポーネントが親コンポーネントの状態を更新できるよう、イベントハンドラーonUpdateをpropsとして渡しています。

状態管理のベストプラクティス

  1. 状態は親に集約する: 状態を親コンポーネントで一元管理し、必要な子コンポーネントにpropsで渡す設計を推奨します。
  2. 必要最低限の状態を持つ: コンポーネント内の状態を最小限に抑えることで、コードの複雑性を下げられます。
  3. リフトアップ: 複数のコンポーネント間で状態を共有する必要がある場合、状態を最も近い共通の親コンポーネントにリフトアップ（上げる）します。

状態管理の複雑化を防ぐために

  • 小規模アプリではuseStateを使う。
  • 状態が多くなり複雑化する場合は、useReducerやContext APIを検討する。
  • より大規模なアプリでは、ReduxやMobXなどの状態管理ライブラリを導入する。

まとめ

Reactでは、親コンポーネントの状態をpropsを通じて子コンポーネントに渡すことで、シンプルで効率的なデータ伝達が可能になります。状態とpropsを適切に組み合わせることで、リアクティブで保守性の高いアプリケーションを構築できます。

イベントをpropsで渡す

Reactでは、親コンポーネントが定義したイベントハンドラーをpropsとして子コンポーネントに渡すことで、親子間の双方向のやり取りを実現できます。この手法は、親コンポーネントの状態を変更したり、特定のアクションをトリガーしたりする際に役立ちます。

基本的な使い方

以下は、親コンポーネントから子コンポーネントにイベントハンドラーを渡す基本的な例です。

import React, { useState } from "react";

function ParentComponent() {
  const [message, setMessage] = useState("初期メッセージ");

  const updateMessage = () => {
    setMessage("子コンポーネントから変更されました");
  };

  return (
    <div>
      <h1>{message}</h1>
      <ChildComponent onClick={updateMessage} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <button onClick={props.onClick}>メッセージを変更する</button>
  );
}

このコードでは、親コンポーネントの状態messageを管理し、子コンポーネントからボタンをクリックすることで状態が更新されます。

イベントに引数を渡す場合

イベントハンドラーに引数を渡したい場合、以下のように実装できます。

function ParentComponent() {
  const handleClick = (value) => {
    alert(`子コンポーネントからの値: ${value}`);
  };

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent(props) {
  return (
    <button onClick={() => props.onClick("Hello, Parent!")}>
      メッセージを送信
    </button>
  );
}

ここでは、子コンポーネントのボタンをクリックした際に、handleClick関数が引数付きで呼び出され、アラートが表示されます。

複数のイベントを渡す場合

複数のイベントハンドラーを子コンポーネントに渡すことも可能です。

function ParentComponent() {
  const onHover = () => {
    console.log("ホバーされました");
  };

  const onClick = () => {
    console.log("クリックされました");
  };

  return <ChildComponent onHover={onHover} onClick={onClick} />;
}

function ChildComponent(props) {
  return (
    <div>
      <button onMouseOver={props.onHover} onClick={props.onClick}>
        ボタン
      </button>
    </div>
  );
}

この例では、onHoverとonClickの両方が親から渡され、子コンポーネントで使用されています。

イベントと状態管理の組み合わせ

以下は、状態管理とイベントを組み合わせた実用的な例です。

function ParentComponent() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <ChildComponent onIncrement={increment} onDecrement={decrement} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <button onClick={props.onIncrement}>増加</button>
      <button onClick={props.onDecrement}>減少</button>
    </div>
  );
}

ここでは、子コンポーネントのボタン操作によって親コンポーネントの状態が増減します。

イベントをpropsで渡す際の注意点

  1. コールバックの命名規則
    イベントハンドラー名はonClickやonChangeのように動詞を含む形にすると可読性が向上します。
  2. 関数のバインド
    クラスコンポーネントで使用する場合は、thisのバインドに注意が必要です。
  3. 必要最小限のデータを渡す
    propsとして渡す関数は簡潔にし、データ量を最小限に抑えましょう。

まとめ

イベントハンドラーをpropsとして渡すことで、Reactの親子コンポーネント間での双方向通信を簡単に実現できます。この手法を活用すれば、状態管理や動的なUIの構築が効率的に行えます。

React開発におけるpropsのベストプラクティス

Reactでpropsを適切に使うことは、アプリケーションの可読性や保守性を向上させるために重要です。本節では、propsの使用における推奨される設計やパターンを紹介します。

1. propsの命名規則を統一する

propsの名前は、明確で一貫性があり、何を意味するかが即座に理解できるようにします。
例:

// 良い例
function Button({ onClick, label }) {
  return <button onClick={onClick}>{label}</button>;
}

// 悪い例
function Button({ func, txt }) {
  return <button onClick={func}>{txt}</button>;
}

onClickやlabelなど、具体的で役割がわかる名前を使うと、コードの可読性が向上します。

2. デフォルトpropsを活用する

propsが渡されない場合のデフォルト値を設定しておくことで、意図しない動作を防ぎます。

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

Greeting.defaultProps = {
  name: "ゲスト",
};

デフォルトpropsを設定することで、propsの不足によるエラーを回避できます。

3. 型チェックを行う

PropTypesを使ってpropsの型を明確に定義することで、不適切なデータ型の使用を防ぎます。

import PropTypes from "prop-types";

function Profile({ age, name }) {
  return <p>{name}は{age}歳です。</p>;
}

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

型チェックを行うことで、コンポーネントが期待するデータを明示できます。

4. 必要最小限のpropsを渡す

propsで渡すデータは必要なものだけに限定します。冗長なデータを渡すと、パフォーマンスや可読性に悪影響を与えます。
悪い例:

function Profile(props) {
  return <p>{props.data.name}は{props.data.age}歳です。</p>;
}
<Profile data={{ name: "John", age: 30, address: "123 St" }} />;

良い例:

function Profile({ name, age }) {
  return <p>{name}は{age}歳です。</p>;
}
<Profile name="John" age={30} />;

5. コンポーネントの分割

propsの数が増えて複雑になる場合は、コンポーネントを分割して再利用性を高めます。
例:

function UserCard({ user }) {
  return (
    <div>
      <UserName name={user.name} />
      <UserAge age={user.age} />
    </div>
  );
}

function UserName({ name }) {
  return <h1>{name}</h1>;
}

function UserAge({ age }) {
  return <p>{age}歳</p>;
}

6. 必要に応じてContext APIを利用する

深い階層にわたってpropsを渡す場合、props drilling（プロップスドリリング）が発生し、コードが煩雑になることがあります。その場合、Context APIを利用することで、不要なpropsの受け渡しを省略できます。
例:

import React, { createContext, useContext } from "react";

const UserContext = createContext();

function App() {
  const user = { name: "John", age: 30 };

  return (
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const user = useContext(UserContext);
  return <p>{user.name}は{user.age}歳です。</p>;
}

7. プレゼンテーショナルコンポーネントとコンテナコンポーネントを分ける

ロジック（状態管理など）を担当するコンポーネント（コンテナコンポーネント）と、UIを担当するコンポーネント（プレゼンテーショナルコンポーネント）を分離します。
例:

// コンテナコンポーネント
function UserContainer() {
  const user = { name: "John", age: 30 };

  return <UserProfile name={user.name} age={user.age} />;
}

// プレゼンテーショナルコンポーネント
function UserProfile({ name, age }) {
  return <p>{name}は{age}歳です。</p>;
}

まとめ

React開発におけるpropsの利用は、明確で適切な設計を心がけることが重要です。命名規則の統一、型チェック、冗長なpropsの排除、Context APIの活用など、これらのベストプラクティスを実践することで、保守性とスケーラビリティの高いアプリケーションを構築できます。

まとめ

本記事では、Reactにおけるpropsの基本概念から、具体的な使用方法やベストプラクティスまでを解説しました。propsは親コンポーネントから子コンポーネントへデータを渡す仕組みであり、Reactアプリケーションの設計において重要な役割を果たします。

propsを利用することで、動的なデータの表示、イベントの伝達、コンポーネント間の明確なデータフローが実現可能です。また、PropTypesによる型チェックやdefaultPropsの活用は、アプリケーションの堅牢性を高めます。

ベストプラクティスに従い、適切にpropsを活用することで、可読性と保守性の高いReactアプリケーションを構築できます。React開発の基盤として、propsの知識を深め、効率的なコーディングを目指しましょう。

React
Web開発 React JavaScript

コメント

コメントする

目次
  1. propsとは何か
    1. propsの役割
    2. propsの特徴
    3. 例: propsの基本形
  2. propsの基本的な使用方法
    1. 親から子へのデータ渡し
    2. propsを使った動的データの渡し
    3. 複数のpropsを渡す場合
    4. ポイント
  3. propsを使った動的データの表示
    1. 動的データを表示する基本例
    2. リストデータの表示
    3. 条件付きレンダリングを使用した動的表示
    4. ポイント
  4. デフォルトpropsの設定方法
    1. デフォルトpropsの設定方法
    2. デフォルトpropsを設定するメリット
    3. 実用例
    4. まとめ
  5. propsの型チェック
    1. PropTypesの導入
    2. PropTypesの基本的な使い方
    3. サポートされる型の種類
    4. PropTypesを使用するメリット
    5. まとめ
  6. 状態管理とpropsの組み合わせ
    1. 状態（state）とpropsの違い
    2. 状態をpropsとして子コンポーネントに渡す例
    3. 状態とイベントハンドラーを組み合わせた例
    4. 状態管理のベストプラクティス
    5. 状態管理の複雑化を防ぐために
    6. まとめ
  7. イベントをpropsで渡す
    1. 基本的な使い方
    2. イベントに引数を渡す場合
    3. 複数のイベントを渡す場合
    4. イベントと状態管理の組み合わせ
    5. イベントをpropsで渡す際の注意点
    6. まとめ
  8. React開発におけるpropsのベストプラクティス
    1. 1. propsの命名規則を統一する
    2. 2. デフォルトpropsを活用する
    3. 3. 型チェックを行う
    4. 4. 必要最小限のpropsを渡す
    5. 5. コンポーネントの分割
    6. 6. 必要に応じてContext APIを利用する
    7. 7. プレゼンテーショナルコンポーネントとコンテナコンポーネントを分ける
    8. まとめ
  9. まとめ