propsとstateの違いを徹底解説！これであなたもReact開発の第一歩を踏み出せる

1. はじめに：Reactを始めると必ずつまずく“あの壁”

Reactを触り始めたばかりのころ、こんな悩みにぶつかったことはありませんか？

「propsとstateって何が違うの？」「どう使い分ければいいの？」「propsを変更できないって本当？」

実際、私自身も最初のReact案件で状態管理に悩み、再レンダリングの無限ループや意図しない画面表示に何度も悩まされました。
しかし、propsとstateの本質的な違いをしっかり理解すると、Reactの設計が一気にクリアになり、保守性の高いコードが書けるようになります。

本記事では、Reactの核ともいえる「propsとstate」について、基礎から実践的なノウハウまで、分かりやすく解説していきます。

2. propsとstateの概要：まずは定義から理解しよう

区分	props（プロップス）	state（ステート）
読み取り／書き込み	読み取り専用（読み取り専用）	書き換え可能（setState使用）
管理者	親コンポーネント	自コンポーネント自身
用途	データの受け渡し（上から下）	内部状態の管理
再レンダリング	値が変われば再レンダリングされる	setStateで更新されると再レンダリング

用語の補足

props（properties）：親から子へ渡される「外部のデータ」
state：ユーザーの操作や内部ロジックにより変更される「内部の状態」

3. 実例で学ぶ：propsとstateの使い方

次のような簡単な「カウント表示＋ボタン付き」アプリを例に、propsとstateの使い方を比較してみましょう。

例1：propsを使ったコンポーネント

// CountDisplay.jsx
const CountDisplay = (props) => {
  return <p>現在のカウント: {props.count}</p>;
};

export default CountDisplay;

// App.jsx
import CountDisplay from './CountDisplay';

const App = () => {
  return <CountDisplay count={5} />;
};

👉 Appが親コンポーネント、CountDisplayが子。countはpropsとして渡されます。子コンポーネントからはこの値を変更できません。

例2：stateを使ってカウントアップする

import { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

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

export default App;

👉 useStateを使うことで、内部の状態（state）を保持し、ボタンをクリックするたびにカウントが増加します。

4. 実務の知見：propsとstate、現場ではこう使う

✅ よくあるパターンと実務Tips

シチュエーション	使用すべきもの	理由
親から子に値を渡すだけ	props	単純な受け渡し。子で状態を持つ必要がないため。
子コンポーネントでボタン操作などに応じて状態を変える	state	ユーザーインタラクションにより変化するため。
グローバルに値を共有したい	Context API or Redux	props/stateでは伝播が複雑になる場合。

🧩 よくある間違い

propsを直接書き換えようとする

props.count = 10; // ❌ propsは読み取り専用

stateを直接変更してしまう

state.count++; // ❌ setStateを使わないと再レンダリングされない

親から渡されたpropsをそのままstateにコピーする

// ⛔ 不要なstateの二重管理につながる
const [value, setValue] = useState(props.value);

5. 応用編：propsとstateを組み合わせた設計

状態リフトアップ（Lifting State Up）

兄弟コンポーネント間で状態を共有するには、「状態を親に持たせ、必要な子にpropsで渡す」方法が効果的です。

// Parent.jsx
const Parent = () => {
  const [text, setText] = useState('');

  return (
    <div>
      <Input text={text} setText={setText} />
      <Display text={text} />
    </div>
  );
};

このように、状態はできるだけ上位に置き、propsで渡すことで、予測可能なUI設計ができます。

6. まとめ：propsとstateを正しく使い分けよう

🔍 メリット・デメリットの整理

項目	props	state
メリット	単純なデータ受け渡しで明確	状態の変化による動的UIが可能
デメリット	一方向でしか流れないため、柔軟性が低い	状態が複雑になると管理が難しい

🚀 今後の展望

Reactの登場から数年経ちましたが、propsとstateの使い方は今なお重要です。加えて、Context APIやuseReducer, Zustand, Redux Toolkitなど、状態管理ライブラリとの使い分けも重要になってきています。

📌 最後に：この記事を読んだらまずやってみよう！

実際にpropsとstateの使い分けを意識したコンポーネントを自作してみる
状態のリフトアップパターンで兄弟コンポーネント間の連携を試す
props/stateの扱いをVSCodeのデバッガやReact DevToolsで確認する

🧑‍💻次回予告：useStateフックの使い方