最近React/Next.jsの学習をしております。
Reactでコンポーネント間でデータを受け渡す際には
propsを利用します。
しかし、はじめてReactに触れる方は
「propsはどのように使えばいいの？」
「なぜ変更してはいけないの？」などの疑問を持つことが多いです。
私がそうでした。
そこで本記事では、私のような初学者向けに
Reactにおけるpropsの基本的な使い方と原則について簡潔にまとめます。
1. Propsとは？
親コンポーネントから子コンポーネントに渡すデータ(仕組み)
コンポーネントは、渡されたpropsを受け取って描画します。
例：親→子へ文字列を渡す場合
// 親コンポーネント
function App() {
return <Hello name="React" />;
}
// 子コンポーネント
function Hello(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default App;
このように、App コンポーネントが Hello コンポーネントへ "React" という値を渡されて"Hello React"という結果となります。
イメージこんな感じ
┌─────────────────┐
│ 親コンポーネント │ App
│ (propsを渡す) │
└─────────────────┘
|
| name="React"
▼
┌─────────────────┐
│ 子コンポーネント │ Hello
│ (propsを受け取る)│
└─────────────────┘
|
| return <h1>Hello, {props.name}!</h1>
▼
ブラウザ上に「Hello, React!」と表示
2. Propsは「読み取り専用」
Reactでは、propsは読み取り専用 (read-only) という原則があります。
これは 「子コンポーネントは受け取ったpropsを変更してはいけない」 というルールです。
function Hello(props) {
// 受け取ったpropsを直接変更
props.name = "Vue"; // ❌ こういった操作は行わない
return <h1>Hello, {props.name}!</h1>;
}
このようにpropsを直接変更すると、Reactの設計方針に反するため
予期しない挙動を引き起こす可能性があります。
また、厳密モード（Strict Mode）やTypeScriptの監視を入れている場合は警告・エラーに繋がります。
3. なぜ読み取り専用なのか？
Reactは 「一方向データフロー(One-way data flow)」 を基本としておりデータは上位（親）から下位（子）へと流れます。
もし子コンポーネントがpropsを自由に変更できると、データの流れが複雑になってしまい、状態管理が難しくなります。
シンプルに管理するためのルールとして、Reactは
親 → 子 へデータを渡す
子はpropsを参照のみ行う
更新が必要な場合は、親が状態を持ち、setStateなどで更新して再描画する
という設計を採用しています。
4. 状態を変更したいなら「State」を使う
propsはあくまでも受け取るだけなので、「値を更新したい場合はどうすれば？」 という疑問が出てきます。
Reactでは、状態を変更したい場合はuseStateなどを利用し
「State（状態）」 として管理します。
Stateとはコンポーネント内部で保持する変更可能なデータのことです。
例：count という状態を管理するコンポーネント
import React, { useState } from "react";
function Counter({ init }) {
// 親から渡された init を元に、コンポーネント内の state を初期化
const [count, setCount] = useState(init);
const increment = () => setCount(count + 1);
return (
<>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</>
);
}
export default Counter;
このとき、init は単に「初期値」として読み取り
実際に値を更新したい場合はcountというstateを操作します。
init自体は読み取り専用のpropsのため変更しません。
5. まとめ
- propsは読み取り専用
- 一方向データフローを守るため、変更したい場合は親コンポーネントがstateを管理し、子コンポーネントに再度渡す
- 値を更新したい場合は「state」を使用する
Reactの基本的なデータフローを理解しておくと
コンポーネント同士のデータの受け渡しがシンプルかつ明確になります。
初心者の方は特に 「propsは読み取り専用」 というルールを守るところから始めると、Reactの開発がスムーズになります。
個人的に見返すために記載しているため
何か違っている点や追加事項などございましたら
コメント欄でご教授いただけますと幸いです。