PropsとStateの違いを徹底解説！使い分けのポイントまとめ

1. Propsとは？

1. Propsとは？

まず最初にProps（プロップス）について見ていきましょう。Propsは「プロパティ（property）」の略で、親コンポーネントから子コンポーネントへ受け渡される情報のことを指します。たとえるなら、親から子へ手渡すメモやプレゼントのようなもので、子コンポーネントはその内容を受け取って表示したり処理に使ったりします。ただし、そのメモの内容を子が勝手に書き換えることはできません。

つまり、Propsは読み取り専用であり、「外から与えられたデータをそのまま利用する仕組み」だと覚えておくと理解しやすくなります。たとえば、親が渡すユーザー名やボタンのラベルなどは、子コンポーネントでは変更せず、そのまま使うのが基本です。

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

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

このサンプルでは、AppコンポーネントからChildコンポーネントへ「name」というPropsを渡しています。Childはその値を受け取り、文の一部として表示しています。このように、Propsはコンポーネント間でデータを受け渡したいときに欠かせない仕組みであり、ReactでUIを組み立てるうえで非常に重要な役割を果たしています。

2. Stateとは？

2. Stateとは？

次にState（ステート）について解説します。Stateとは、コンポーネントが自分自身で管理する「今の状態」を表す仕組みです。たとえば、ボタンを押した回数や、入力フォームに文字が入力されているかどうか、チェックボックスがオンかオフかといった「その時々で変わる値」がStateにあたります。

Stateの一番の特徴は、値が変わると自動で画面が更新されることです。開発者が「画面を更新してください」と指示しなくても、Stateが更新されればReactが勝手に再描画してくれるため、初心者でも動きのあるアプリを作りやすくなっています。

Stateの仕組みがわかるシンプルな例

以下は、ボタンをクリックするたびに数字が増える、初心者にとても分かりやすいStateの例です。

import React, { useState } from "react";

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

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

export default App;

ここで使っているuseStateは、ReactでStateを使うための基本的なフック（機能）です。countは現在の値、setCountはその値を更新するための関数で、この2つは常にセットで使います。更新関数を呼び出せばReactが自動で画面を最新の状態に描き直してくれるため、「値が変わったのに画面が変わらない」という心配もありません。

このようにStateは「時間とともに変わる情報を扱うためのデータ箱」と考えると理解しやすく、ボタン操作、テキスト入力、チェック状態の切り替えなど、インタラクティブな動きを作る際に欠かせない役割を持っています。

3. PropsとStateの違いを整理しよう

3. PropsとStateの違いを整理しよう

ここでは、Reactを扱ううえで必ず押さえておきたい「Props」と「State」の違いを、もう少し踏み込んで整理してみましょう。この2つはどちらもコンポーネントにデータを持たせる仕組みですが、性質や役割がまったく異なります。理解しておくことで、Reactの挙動が一気にわかりやすくなります。

• Props：親から子へ渡すデータ。読み取り専用で、子コンポーネント側から変更できない。
• State：コンポーネント自身が管理するデータ。ユーザー操作や内部処理で自由に変わる。

イメージしやすい例を挙げると、Propsは「外部から渡される設定情報」、Stateは「今この瞬間の状態」を表します。たとえば、Propsは「ユーザー名」「ボタンに表示する文字」など変える必要のない値、Stateは「クリック回数」「入力中の文字」といったその時々で変わる値です。

簡単な比較ができるミニサンプル

次の例では、PropsとStateがどのように役割を分けて使われるのかをシンプルに確認できます。

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

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

  return (
    <div>
      <Message user="太郎" />
      <p>ボタンを押した回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>押す</button>
    </div>
  );
}

このサンプルでは、名前（太郎）は外部から渡されたPropsで変わりません。一方、クリック回数はStateによって更新され、押すたびに値が変化します。この違いを理解すると、Reactで何をPropsにし、何をStateで管理するべきか迷わなくなります。

4. PropsとStateの使い分けのポイント

4. PropsとStateの使い分けのポイント

では、実際の開発ではどのように「これはProps」「これはState」と判断すればよいのでしょうか。迷ったときは、まずその値がどこで決まるのか、そして時間とともに変わるのかという2つの視点で考えると整理しやすくなります。

✔ 外部から決められる値はPropsを使う

画面のタイトル、ボタンのラベル、ユーザー名、画像のパスなど、「親コンポーネント側で決めて子コンポーネントに渡したい情報」はPropsにします。子コンポーネントは「渡されたものをそのまま使うだけ」の立場なので、勝手に書き換えない、というルールで考えるとスッキリします。

✔ コンポーネントの中で変化する値はStateを使う

一方で、ボタンのクリック数、フォームに入力中の文字、チェックボックスのオン・オフ、モーダルの開閉など、「その場その場で変わる情報」はStateで管理します。ユーザーが操作した結果や、処理の進み具合によって動的に変わっていくものはState、と覚えておくと判断しやすくなります。

使い分けのイメージがつく簡単なサンプル

次の例では、ユーザー名は外から渡すProps、オンラインかどうかの状態はコンポーネント内部のStateで管理しています。

import React, { useState } from "react";

function StatusButton(props) {
  const [isOnline, setIsOnline] = useState(false);

  return (
    <div>
      <p>
        {props.user}さんのステータス:
        {isOnline ? "オンライン" : "オフライン"}
      </p>
      <button onClick={() => setIsOnline(!isOnline)}>
        状態を切り替え
      </button>
    </div>
  );
}

function App() {
  return <StatusButton user="太郎" />;
}

export default App;

このサンプルでは、ユーザー名は親コンポーネントから渡されるPropsなので固定の情報として扱われ、一方でオンラインかどうかのフラグはボタン操作に応じて変化するためStateで管理されています。このように「外から設定される値＝Props」「その場で変化していく値＝State」と意識しておくと、実際のReactコンポーネントでも自然に使い分けができるようになります。

5. PropsとStateを組み合わせて使う例

5. PropsとStateを組み合わせて使う例

実際のアプリ開発では、PropsとStateを組み合わせて使うことがよくあります。たとえば親から渡されたユーザー名（Props）を使いながら、そのユーザーの行動（State）を管理するケースです。

import React, { useState } from "react";

function UserProfile(props) {
  const [likes, setLikes] = useState(0);

  return (
    <div>
      <h2>{props.name}さんのプロフィール</h2>
      <p>いいね数: {likes}</p>
      <button onClick={() => setLikes(likes + 1)}>いいね</button>
    </div>
  );
}

function App() {
  return <UserProfile name="花子" />;
}

export default App;

この例では、名前はPropsから受け取り、いいね数はStateで管理しています。PropsとStateを適切に使い分けることで、柔軟でわかりやすいコンポーネント設計ができます。

6. 初心者がつまずきやすいポイント

6. 初心者がつまずきやすいポイント

最後に、初心者がPropsとStateで混乱しやすいポイントを整理しておきます。

• Propsを直接書き換えてはいけない（読み取り専用だから）。
• Stateを更新するときは必ずsetStateやuseStateの更新関数を使う。
• Propsは外部から与えられる設定値、Stateは内部で変わるデータと意識する。

このルールを意識すれば、PropsとStateを正しく使い分けられるようになります。

まとめ

まとめ

Reactでコンポーネントを組み立てていくとき、PropsとStateの違いを理解しているかどうかで設計の方向性が大きく変わります。今回の記事では、親から子へ渡される読み取り専用のPropsと、コンポーネント内部で変化するStateの役割を見比べながら、実際のコード例を交えて理解を深めました。画面を表示するだけの単純なアプリでは違いが見えにくいこともありますが、複数のコンポーネントが関わり合いながら動作する場面では、それぞれを意識して設計することが大切です。Propsは外部から与えられる設定値のような存在で、子コンポーネントはそれを受け取って表示に使います。一方、Stateはユーザーの入力や操作によって変化し、画面にも反映される動的なデータです。二つを混同してしまうと、どこで値が変わっているのか分かりづらくなり、トラブルの原因になります。 とくにReactを使い始めたばかりの段階では、PropsをそのままStateにコピーしてしまう書き方がよく見られますが、これは一見便利に見えても、データの一貫性を失いやすいという問題があります。元のデータが更新されてもState側に反映されず、意図しない状態が続いてしまうことがあるためです。Propsはあくまで表示用にそのまま扱い、必要なら計算した値を別途作る、あるいは状態管理は親コンポーネントに任せるなど、責務を整理することでより見通しの良いコードになります。 また、PropsとStateを理解することは、React全体の思想を理解する上でも重要です。コンポーネントは部品のように分割して組み合わせられますが、どの部品がどの情報を管理し、どの部分が表示に責任を持つのかという点を意識することで、再利用性が高まり、保守性の高いアプリケーションを作ることができます。とくに画面全体にまたがるデータを扱う場合には、親にStateを持たせる「状態リフトアップ」というテクニックが役立ちます。複数の子コンポーネントが同じデータを参照する場面でも、親が単一の真実の源泉となることで整合性が保たれます。 Reactは単なる画面表示の手段ではなく、状態管理とデータの流れを意識した構造化が特徴であり、PropsとStateを正しく使い分けることによってその本来の力を発揮できます。以下に、記事内容の理解を深めるもう一つのサンプルコードを記載し、実際の動作イメージを掴みやすくしています。

サンプルプログラム：PropsとStateを組み合わせた応用例

import React, { useState } from "react";

function CounterDisplay({ label, value }) {
  return (
    <div class="counter-box">
      <h3>{label}</h3>
      <p>現在の値: {value}</p>
    </div>
  );
}

function ControlButton({ text, onClick }) {
  return (
    <button class="btn-control" onClick={onClick}>
      {text}
    </button>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div class="container mt-3">
      <CounterDisplay label="カウントの状態" value={count} />
      <ControlButton text="増やす" onClick={() => setCount(count + 1)} />
      <ControlButton text="リセット" onClick={() => setCount(0)} />
    </div>
  );
}

このコード例では、値の管理は親コンポーネントにまとめ、表示は子コンポーネントに任せています。PropsとStateを分離することで、どこがデータを管理しているのか明確になり、コード全体の整合性が保ちやすくなります。こうした分離は小さなアプリでも役立ちますが、とくに画面数が増えたり、機能が複雑になったりすると効果が大きく表れます。将来的にReduxやRecoil、Context APIなどの状態管理ライブラリを導入する際にも、この考え方が基礎として役立ちます。 また、コンポーネントを部品として考えるとき、Propsによって外部から設定を受け取り、Stateによって動的に変わる値を扱うという視点を持つことで、同じ画面を違う用途にも応用できる柔軟な設計が可能になります。たとえば、別のページで同じCounterDisplayを使いたい場合、表示する値だけ変更して共通部品として再利用できますし、ControlButtonも他の場面で動作だけ変えて使い回すことができます。このような設計はチーム開発でも役立ち、保守しやすいコードへとつながります。 PropsとStateは対立する概念ではなく、互いを補い合う役割を持っています。Propsが外部からの入力として値を受け取り、Stateが内部で動的な変化を管理することで、ひとつのコンポーネントが過剰に責任を抱えることなくシンプルな構造を保つことができます。Reactを学び進める中で意識しておきたいのは、コンポーネントごとの責務を明確にし、どの情報をどこで管理するのかを常に考えることです。こうした設計の積み重ねが、見やすく拡張しやすいアプリケーションを生み出す鍵になります。

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

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

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

ReactのPropsとはどんな役割をもつ仕組みですか？

ReactのPropsは親コンポーネントから子コンポーネントへ渡すデータで、読み取り専用の設定値として扱われ、外部から与えられた内容を子コンポーネントがそのまま表示に利用するための仕組みです。