最近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の開発がスムーズになります。

個人的に見返すために記載しているため
何か違っている点や追加事項などございましたら
コメント欄でご教授いただけますと幸いです。

参考資料

これからはじめるReact実践入門コンポーネントの基本からNext.jsによるアプリ開発まで