PropsとStateとは？Reactのデータ管理の基本を初心者向けに解説

1. Propsとは？Reactのデータを受け渡す仕組み

1. Propsとは？Reactのデータを受け渡す仕組み

Reactでコンポーネントを作るとき、Props（プロップス）は「親コンポーネントから子コンポーネントへデータを渡すための仕組み」です。英語の「Properties（プロパティ）」の略で、性質や属性を表す言葉です。ウェブサイトで例えるなら、親ページから子ページに「色」「文字」「数値」などをプレゼントのように渡すイメージです。

Propsは読み取り専用で、子コンポーネント側から変更することはできません。つまり「もらったプレゼントは開けて使えるけれど、勝手に中身を変えることはできない」というルールになっています。

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

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

export default App;

このようにPropsを使えば、同じコンポーネントでも異なるデータを渡して表示を切り替えることができます。これがReactの再利用性の高さにつながります。

2. Stateとは？コンポーネント内で変化するデータ

2. Stateとは？コンポーネント内で変化するデータ

State（ステート）は「コンポーネントが自分の中で持っているデータ」で、ユーザーの操作や処理によって変化します。日本語で「状態」という意味がある通り、その瞬間の情報を記録しているノートのような役割です。

例えば「ボタンを押したら表示が変わる」仕組みを作るときにStateが使われます。Propsは親からもらう一方通行のデータでしたが、Stateは自分自身で管理して変えられる点が特徴です。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリックしてみよう
      </button>
    </div>
  );
}

export default App;

この例では、useStateというReactのフックを使って、最初は「こんにちは！」という文字を表示しています。ボタンをクリックするとsetMessageが呼ばれ、Stateが新しい値に変わり、表示内容が更新されます。これがStateの基本的な役割です。

3. PropsとStateの違いをわかりやすく例えると？

3. PropsとStateの違いをわかりやすく例えると？

PropsとStateの違いを生活の例で考えると、よりイメージしやすいです。

• Props：親から子へ渡すお弁当（中身は子が勝手に変えられない）
• State：自分のノート（書き直したり更新できる）

このように、Propsは外部から与えられる固定の情報、Stateは自分の行動で変化する内部の情報と覚えると混乱しにくいです。

4. PropsとStateを組み合わせて使う実践例

4. PropsとStateを組み合わせて使う実践例

実際のアプリ開発では、PropsとStateを組み合わせて使うことが多いです。例えば「親コンポーネントから渡されたユーザー名（Props）」と「ログイン状態の切り替え（State）」を組み合わせることで、柔軟な画面表示が可能になります。

import React, { useState } from "react";

function Welcome(props) {
  return <h2>ようこそ、{props.name}さん！</h2>;
}

function App() {
  const [isLogin, setIsLogin] = useState(false);

  return (
    <div>
      {isLogin ? <Welcome name="太郎" /> : <p>ログインしてください</p>}
      <button onClick={() => setIsLogin(!isLogin)}>
        {isLogin ? "ログアウト" : "ログイン"}
      </button>
    </div>
  );
}

export default App;

このようにPropsとStateを組み合わせることで、より実用的でインタラクティブなReactアプリを作ることができます。

5. Stateを使ったカウンター機能の追加例

5. Stateを使ったカウンター機能の追加例

Stateを使うと、ボタンを押すたびに数値を変化させるカウンター機能も簡単に作れます。Propsは使わず、コンポーネント自身が管理するStateだけで動かすことも可能です。

import React, { useState } from "react";

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

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

export default Counter;

6. Propsを使った複数コンポーネントへのデータ伝達例

6. Propsを使った複数コンポーネントへのデータ伝達例

複数の子コンポーネントに同じデータを渡したいとき、Propsが役立ちます。例えば、ユーザー名を複数の表示コンポーネントに渡すことで、一元管理しつつ見た目を統一できます。

function UserNameDisplay({ name }) {
  return <p>ユーザー名: {name}</p>;
}

function App() {
  const userName = "花子";

  return (
    <div>
      <UserNameDisplay name={userName} />
      <UserNameDisplay name={userName} />
    </div>
  );
}

export default App;

7. StateとPropsを組み合わせてフォーム入力を反映する例

7. StateとPropsを組み合わせてフォーム入力を反映する例

フォームの入力値をStateで管理し、その値をPropsとして子コンポーネントに渡すことで、リアルタイムで画面に反映することができます。これにより、ユーザーの入力に応じた動的な表示が可能になります。

import React, { useState } from "react";

function DisplayInput({ value }) {
  return <p>入力内容: {value}</p>;
}

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="文字を入力" 
      />
      <DisplayInput value={text} />
    </div>
  );
}

export default App;

まとめ

まとめ

この記事では、ReactでのPropsとStateの基本から応用までを学びました。Propsは親コンポーネントから子コンポーネントへデータを渡すための仕組みであり、子は受け取ったデータを表示することができますが、直接変更はできません。一方、Stateはコンポーネント自身が持つデータで、ユーザーの操作に応じて自由に変更でき、変更すると画面が自動で更新されます。この二つを適切に使い分けることで、再利用性が高く、動的でインタラクティブなReactアプリケーションを作ることができます。

具体的には、StateをuseStateで管理し、ボタンを押したときや入力内容が変わったときに更新関数を呼び出すことでUIを変化させます。Propsは親から子へ渡す値や関数を指定し、子コンポーネントで表示や操作に活用します。このように、Stateで管理する変化するデータとPropsで渡す固定のデータを組み合わせることで、効率的に画面を更新でき、コードの見通しも良くなります。

初心者にとっては、PropsとStateの役割の違いを明確に理解することが重要です。Propsは「外から与えられる情報」、Stateは「コンポーネント自身の情報」と覚え、Stateは必ず更新関数を使って変更することを意識すると、Reactでのデータ管理がスムーズになります。これを押さえれば、Todoアプリやログイン画面など、さまざまな実用的なReactアプリの作成に役立ちます。

import React, { useState } from "react";

function Welcome(props) {
  return <h2>ようこそ、{props.name}さん！</h2>;
}

function App() {
  const [isLogin, setIsLogin] = useState(false);

  return (
    <div>
      {isLogin ? <Welcome name="太郎" /> : <p>ログインしてください</p>}
      <button onClick={() => setIsLogin(!isLogin)}>
        {isLogin ? "ログアウト" : "ログイン"}
      </button>
    </div>
  );
}

export default App;

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

ReactのPropsとは何ですか？初心者でも理解しやすいイメージを教えてください。

ReactのPropsとは、親コンポーネントから子コンポーネントへ渡すデータのことで、プレゼントのように「渡すだけで子は中身を変えられない」という特徴があります。