Reactの「props（プロップス）」は、
“single source of truth（単一の情報源）“
と
“top-down data flow（上から下へのデータフロー）“
という設計思想に基づいています。
以下のように整理できます：
✅ Single Source of Truth
Reactでは、状態（state）を必要最小限の場所に集中して持つのが理想とされます。
たとえば親コンポーネントがデータを管理していれば、
その情報が真実の情報源（single source of truth）となり、
子コンポーネントはそれをpropsとして受け取って表示に専念します。
✅ Top-Down Data Flow
Reactでは、**データの流れは一方向（親 → 子）**です。
これは、アプリケーションの状態を追いやすくし、
予測可能なUI挙動を保つためです。
例（簡単なカウンター）
jsxfunction Parent() {
const [count, setCount] = useState(0);
return (
<div>
<h1>親コンポーネント</h1>
<Child count={count} onIncrement={() => setCount(count + 1)} />
</div>
);
}
function Child({ count, onIncrement }) {
return (
<div>
<p>カウント: {count}</p>
<button onClick={onIncrement}>+1</button>
</div>
);
}
このように、状態は親にあり、子は表示と操作（イベント）だけを担います。
これが「単一の情報源」と「一方向のデータフロー」です。
必要に応じて「状態のリフトアップ（state lifting）」をして、
どこをsource of truthにすべきかを考えるのもReact設計の一環です。
なので、”Propsは親が管理し、子は表示するだけ”
となるのですが親コンポーネントから子コンポーネントに、
引数などでPropsデータを渡せば、
書き換える事は文法的には可能なのですが・・・
引数でのデータ渡しは、JavaScriptの文法上は「プリミティブ値」は
値渡し（pass by value）なので、
propsを書き換えようとしても、元の値には影響しません。
しかし、それでもReactの設計思想として、
「propsは読み取り専用（immutable）」とすべき
とされています。
🔍 なぜ props の書き換えは禁止なのか？
✅ 理由①：予測可能なUI更新のため
Reactは「状態が変わったら、それに応じてUIを再描画する」フレームワークです。
propsを勝手に変更してしまうと、Reactの描画のトリガーにならないので、
UIが意図どおりに動かない・同期が取れなくなる可能性があります。
✅ 理由②：一方向データフローの破壊
propsを書き換えることは、
データが親から子に流れるという原則
に逆らうことになります。
Reactでは「データがどこから来て、どこに流れているか」を
明確にしておくのが重要です。
✅ 理由③：バグの温床になる
一見うまく動いているように見えても、後々状態が同期しなくなったり、
副作用が起きたり、保守性が下がる原因になります。
🧭 結論：書き換え可能でも「設計上」NG
- JavaScript上はpropsを書き換えても技術的には問題ない場合もあります。
- しかしReactの思想・設計・再描画の仕組みに従い、
「propsは読み取り専用」として扱うべきです。
これはいわば「ルールというより設計の約束事・慣習」という感じです。
