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フックの使い方