ReactのPropsとStateのベストプラクティスを整理しよう！初心者でもわかる使い方ガイド

1. Propsは親から子へデータを渡すために使おう

1. Propsは親から子へデータを渡すために使おう

ReactのProps（プロップス）は、親コンポーネントが持っているデータを子コンポーネントに受け渡すための仕組みです。まず覚えておきたいのは、Propsは読み取り専用の値であり、子コンポーネント側で勝手に書き換えてはいけないということです。あくまで「親からもらったものをそのまま使う」ための仕組みだと考えると理解しやすくなります。

たとえば親が子に「タイトル」や「メッセージ」を渡した場合、子はそれをそのまま表示するのが基本です。「受け取った値は触らない」というルールを守ることで、Reactアプリの動作が予測しやすくなり、バグを防ぎやすくなります。もし子で内容を変更したい場面があるなら、Stateを使って自分で管理するか、親に変更依頼を返す形にします。

Propsの流れがイメージしづらい初心者向けに、簡単なサンプルを用意しました。ここでは、親が子に「挨拶文」を渡し、子はそれを表示するだけのシンプルな構成になっています。

import React from "react";

// 子コンポーネント：親から受け取った挨拶文を表示するだけ
function Greeting({ text }) {
  return <h2>{text}</h2>;
}

// 親コンポーネント：子に挨拶文を渡す
function App() {
  const message = "こんにちは！ReactのPropsを学びましょう";

  return (
    <div>
      <Greeting text={message} />
    </div>
  );
}

export default App;

この例では、親コンポーネントがtextというPropsとして挨拶文を子に渡し、子は受け取った内容をそのまま表示しています。子は内容を変更しておらず、「親→子」の一方向の流れが非常にわかりやすい形になっています。Propsの使い方を理解する第一歩として、まずはこうしたシンプルな例から慣れていくのが効果的です。

2. Stateはコンポーネント内の変化するデータを管理しよう

2. Stateはコンポーネント内の変化するデータを管理しよう

State（ステート）は、コンポーネントの内部で「変化するデータ」を管理するための仕組みです。たとえば、ボタンを押した回数、入力フォームに打ち込まれた文字、開閉状態のフラグなど、ユーザーの操作に応じて値が変わるものはStateで扱います。イメージとしては、コンポーネントの中にある“小さなメモ帳”のような存在だと考えるとわかりやすいでしょう。

Stateを扱うときに特に大切なのは、「必要なデータだけをStateに入れる」という点です。なんでもかんでもStateに入れてしまうと、変更のたびに再描画が発生し、処理が重くなることがあります。また、「計算すればすぐ求められる値」までStateに保存してしまうと、データの整合性が崩れやすくなる原因にもなります。Stateはあくまで“変化が必要な情報だけ”に絞るのがベストです。

ここでは、初心者でもイメージしやすい「ボタンを押すと数字が増えるアプリ」を例として紹介します。とてもシンプルですが、Stateの基本的な仕組みを理解するのに最適です。

import React, { useState } from "react";

function App() {
  // countが「現在の数字」、setCountが「数字を更新する関数」
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>現在の値：{count}</h2>
      <button onClick={() => setCount(count + 1)}>1増やす</button>
    </div>
  );
}

export default App;

この例では、useState(0)で「初期値0の数値」をStateとして用意し、ボタンが押されるたびにsetCountが呼ばれて値が1ずつ増えていきます。画面には常に最新の数値が表示され、Stateの変化に応じてReactが自動的に表示を更新してくれます。これがStateの最大の魅力であり、動的な画面を作るための基礎になります。

3. PropsとStateを混同しない

3. PropsとStateを混同しない

Reactを学び始めたばかりの方がつまずきやすいポイントのひとつが、「Propsで受け取った値をそのままStateにコピーしてしまう」という書き方です。一見すると便利そうに見えますが、これはReactではアンチパターン（避けるべき書き方）とされています。理由は、PropsとStateが役割の異なる仕組みだからです。

Propsは“親から渡された値”であり、子コンポーネントが勝手に変更してはいけないデータ。一方でStateは“そのコンポーネント自身が管理する変化する値”です。同じデータをPropsとStateで二重管理してしまうと、片方だけ更新されてもう片方が古いまま…という状況が起こりやすく、意図しない表示ズレやバグの原因になります。

イメージしやすいように、初心者向けに簡単な例を用意しました。これは「Propsをそのまま表示するべきなのに、間違ってStateにコピーしてしまったパターン」と「正しいパターン」を比較したものです。

// ❌ よくある間違い：PropsをそのままStateにコピーする
function ChildWrong({ value }) {
  const [text, setText] = useState(value); // 不要なコピー

  return <p>{text}</p>;
}

// ⭕ 正しい使い方：Propsはそのまま使う
function ChildCorrect({ value }) {
  return <p>{value}</p>; // シンプルでズレが起こらない
}

正しいコードはとてもシンプルで、PropsはPropsとしてそのまま使うだけ。どうしても加工が必要な場合は、Stateではなく、コンポーネント内で関数を用いて「計算で求めた値」を使えば十分です。PropsとStateを適切に使い分けることで、コードは読みやすく保守しやすくなり、予期せぬバグも大幅に減らせます。

4. Stateリフトアップでデータを共有しよう

4. Stateリフトアップでデータを共有しよう

Reactでアプリを作っていると、「このデータ、複数のコンポーネントで共有したい」という場面が必ず出てきます。そんなときに役立つ考え方がStateリフトアップ（Lifting State Up）です。これは、子コンポーネントにStateを置くのではなく、より上の“親コンポーネント”にStateを移動させて管理する方法です。親で一括してデータを管理し、必要な子へPropsとして渡します。

特に、兄弟コンポーネント同士で同じ値を表示したり、どちらかの操作で共通のデータを更新したい場合に効果を発揮します。それぞれの子が独自にStateを持ってしまうと、表示内容が食い違ったり、更新漏れが起きやすくなるため、親にまとめて管理してもらう方が安全で効率的です。

以下は、親が数値を管理し、2つの子コンポーネントが同じ値を表示する初心者向けのシンプルな例です。Stateリフトアップの流れを直感的に理解できます。

import React, { useState } from "react";

// 子コンポーネント：親から渡された数値を表示するだけ
function Display({ count }) {
  return <h3>現在の値：{count}</h3>;
}

function App() {
  const [count, setCount] = useState(0); // 親がStateを管理

  return (
    <div>
      <Display count={count} />
      <Display count={count} />
      <button onClick={() => setCount(count + 1)}>1増やす</button>
    </div>
  );
}

export default App;

このサンプルでは、countという1つのStateを親が持ち、その値を2つのDisplayコンポーネントへPropsとして渡しています。どちらの子も同じ値を参照しているため、ボタンを押すと2つの表示が同時に更新されます。まさに、Stateリフトアップによる“データの一元管理”が機能している瞬間です。

この仕組みを理解しておくと、Reactでのデータ共有がとても扱いやすくなり、アプリ全体の整合性も保ちやすくなります。複数の部分で同じデータを扱う場合は、まず「親にStateを置けないか？」と考えてみると良いでしょう。

5. 実際のコード例で理解しよう

5. 実際のコード例で理解しよう

ここで、親コンポーネントから子コンポーネントへPropsを渡しつつ、Stateを正しく使う例を見てみましょう。

import React, { useState } from "react";

function Child({ message }) {
  return <h2>{message}</h2>;
}

function App() {
  const [text, setText] = useState("こんにちは！");

  return (
    <div>
      <Child message={text} />
      <button onClick={() => setText("ボタンが押されました！")}>
        更新する
      </button>
    </div>
  );
}

export default App;

6. PropsとStateを使うときのベストプラクティス

6. PropsとStateを使うときのベストプラクティス

• Propsは「親から子へのデータの受け渡し専用」で変更しない
• Stateは「そのコンポーネント内で変わるデータ」のみ管理する
• 必要以上にStateを使わず、計算できるものはStateに入れない
• 複数のコンポーネントで同じデータを使うならStateをリフトアップする
• PropsをそのままStateにコピーしない（アンチパターンを避ける）

これらを守ることで、Reactのコードは見やすく保守しやすくなり、初心者でも安心してアプリ開発を進められます。

まとめ

まとめ

ReactのPropsとStateは、Webアプリケーション開発において欠かせない概念であり、特にコンポーネント指向の設計が中心となる現代のフロントエンド開発ではより重要性が増しています。今回の記事では、親子コンポーネント構造におけるデータの受け渡し、State管理の効率化、アンチパターンの回避、そしてStateリフトアップによるコンポーネント間の整合性保持など、実践的なコード構造を含めて整理しました。特に初心者がつまずきやすい「Propsは読み取り専用であること」「Stateは必要最低限にすること」「不用意にPropsをStateへコピーしないこと」といった基本的な考え方を押さえることで、動作が安定し再利用性の高いUI構築が可能になります。 また、PropsとStateを正しく使い分けることは、単にコードを動かすだけでなく、将来的な拡張や機能追加にも大きな影響を与えます。たとえば小さなボタンひとつでも、値が更新される仕組みをコンポーネント内部に置くのか、外部で管理するのかによって可読性や責務が変わり、規模が大きくなるほどその差が顕著になります。とくに複数コンポーネントで同じデータを扱う場合、「どこがデータの単一の真実の源泉であるか」を意識することが重要です。この考え方は大型アプリケーションでも中心となる概念であり、ReduxやContextなどの状態管理ライブラリを学ぶ際にも役立つ視点です。 実際にコードを書く際には、下記のようなパターンを意識しながらコンポーネントの責務を明確にし、小さな単位で整理していくことで保守性が向上します。

サンプルプログラム：PropsとStateを組み合わせた応用例

import React, { useState } from "react";

function Display({ count, label }) {
  return (
    <div class="box">
      <h3>{label}</h3>
      <p>{count} 回クリックされました</p>
    </div>
  );
}

function App() {
  const [clickCount, setClickCount] = useState(0);

  return (
    <div>
      <Display count={clickCount} label="カウンターの状態" />
      <button onClick={() => setClickCount(clickCount + 1)}>
        カウントを増やす
      </button>
    </div>
  );
}

export default App;

このコードでは、クリック回数をStateとして親コンポーネントで管理し、子コンポーネントにはPropsとして表示専用データを渡しています。こうした設計により、データの更新処理は親に集約され、表示側のコンポーネントは受け取った内容を画面に反映する役割に集中できます。責務が明確になることで管理が容易になり、機能追加も行いやすくなります。たとえば今後新しい表示コンポーネントを追加したい場合でも、同じStateを別の子に渡すだけで拡張できます。 またReactでは、値そのものをStateに保存せず、導き出せる値は計算するだけに留める方が動作パフォーマンスが向上します。不要なレンダリングを避け、アプリケーション全体の描画負荷を軽減することにつながるため、大規模開発では特に重要です。PropsとStateを適切に切り分けることで、複雑なUI構造でも整然としたデータフローを維持でき、長期的に見て時間の節約にもなります。 Reactを学び始めた段階では、コンポーネント間で値を渡すだけでも難しく感じることがあります。しかし、今回整理した考え方を意識して小さなプロジェクトに適用していくことで、自然と設計力が身に付きます。特に、シングルページアプリケーションを開発する場合、複数ページにまたがってデータが変化するケースが増えるため、PropsとStateの仕組みは学習初期の段階で確実に理解しておきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

ReactでPropsとは何ですか？どのような場面で使いますか？

ReactにおけるProps（プロップス）は、親コンポーネントから子コンポーネントにデータを渡すための仕組みです。主にUI表示に必要な情報を子に渡すときに使い、読み取り専用であることが特徴です。