【React】コンポーネント・Props・Stateを理解する

はじめに

この記事で学べること

この記事では、Reactを学習する上で最も重要な3つの基本概念について解説します。

• コンポーネント: UIを部品化する仕組み
• Props: コンポーネント間でデータを受け渡す方法
• State: コンポーネント内で変化するデータを管理する方法

これらの概念を理解することで、Reactアプリケーションの構造が明確になり、効率的な開発ができるようになります。

対象読者

• Reactを学び始めたばかりの方
• JavaScriptの基本文法を理解している方
• コンポーネント、Props、Stateの違いがよく分からない方

Reactの3つの基本概念とは

なぜこれらの概念が重要なのか

Reactは「コンポーネント指向」のライブラリです。アプリケーション全体を小さな部品（コンポーネント）に分割し、それらを組み合わせてUIを構築します。この設計思想を支えるのが、コンポーネント、Props、Stateという3つの概念です。

これらを理解しないままReactを使うことは、文法を知らずに外国語を話そうとするようなものです。基礎をしっかり押さえることで、その後の学習がスムーズになりますね。

全体像の把握

まずは3つの概念の関係性を図で確認しましょう。

コンポーネントという部品の中で、Propsは外部から受け取るデータ、Stateは内部で管理するデータという役割分担があります。

コンポーネント(Component)

コンポーネントとは何か

コンポーネントは、UIの一部を表す再利用可能な部品のことです。ボタン、フォーム、カード、ヘッダーなど、画面上のあらゆる要素をコンポーネントとして定義できます。

例えば、Webページを家に例えると、コンポーネントは窓やドア、屋根といった部品に相当します。これらの部品を組み合わせることで、1つの家（アプリケーション）が完成するイメージですね。

関数コンポーネントとクラスコンポーネント

Reactには2種類のコンポーネント記述方法があります。

関数コンポーネント（現在の主流）

function Welcome() {
  return <h1>Hello, React!</h1>;
}

クラスコンポーネント（従来の方法）

class Welcome extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

現在は関数コンポーネントが主流です。シンプルで読みやすく、Hooksという機能と組み合わせることで強力な機能を実現できます。この記事では関数コンポーネントを使って解説していきます。

コンポーネントの役割と利点

コンポーネントを使うことで、以下のようなメリットが得られます。

再利用性の向上
一度作成したコンポーネントは、アプリケーション内のどこでも再利用できます。ボタンコンポーネントを1つ作れば、それを複数の場所で使い回せるわけです。

保守性の向上
機能ごとにコンポーネントを分割することで、コードの見通しが良くなります。バグ修正や機能追加も、該当するコンポーネントだけを修正すれば済みます。

テストの容易性
小さな単位でコンポーネントを作ることで、個別にテストしやすくなります。

実際のコード例

シンプルなボタンコンポーネントを作ってみましょう。

// Buttonコンポーネントの定義
function Button() {
  return (
    <button className="custom-button">
      クリック
    </button>
  );
}

// Appコンポーネントで使用
function App() {
  return (
    <div>
      <h1>コンポーネントの例</h1>
      <Button />
      <Button />
      <Button />
    </div>
  );
}

このように、<Button />と記述するだけで、同じボタンを何度でも配置できます。

Props(プロパティ)

propsとは何か

Propsは「Properties（プロパティ）」の略で、親コンポーネントから子コンポーネントへデータを渡すための仕組みです。HTMLの属性のようなイメージで、コンポーネントに外部から値を渡すことができます。

propsの使い方

Propsはコンポーネントの引数として受け取ります。

// 子コンポーネント：propsを受け取る
function Greeting(props) {
  return <h1>こんにちは、{props.name}さん!</h1>;
}

// 親コンポーネント：propsを渡す
function App() {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting name="花子" />
      <Greeting name="次郎" />
    </div>
  );
}

name="太郎"のように属性を指定すると、子コンポーネント内でprops.nameとしてその値にアクセスできます。

親コンポーネントから子コンポーネントへのデータ受け渡し

Propsによるデータの流れは常に一方向です。親から子へという明確な方向性があることで、データの流れが追いやすくなります。

propsの特徴（読み取り専用）

Propsには重要な制約があります。それは読み取り専用（Read-only）であることです。子コンポーネント内でpropsの値を直接変更することはできません。

function BadExample(props) {
  // これはエラー！propsは変更できない
  props.name = "新しい名前"; // NG
  
  return <h1>{props.name}</h1>;
}

この制約により、データの流れが予測可能になり、バグの発生を防げます。

実際のコード例

複数のpropsを受け取る例を見てみましょう。

// UserCardコンポーネント
function UserCard(props) {
  return (
    <div className="user-card">
      <h2>{props.name}</h2>
      <p>年齢: {props.age}歳</p>
      <p>職業: {props.job}</p>
    </div>
  );
}

// Appコンポーネント
function App() {
  return (
    <div>
      <UserCard 
        name="山田太郎" 
        age={28} 
        job="エンジニア" 
      />
      <UserCard 
        name="佐藤花子" 
        age={25} 
        job="デザイナー" 
      />
    </div>
  );
}

分割代入を使うとさらにスッキリ書けますね。

function UserCard({ name, age, job }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>年齢: {age}歳</p>
      <p>職業: {job}</p>
    </div>
  );
}

State(状態)

Stateとは何か

Stateは、コンポーネントが内部で管理する変化するデータのことです。ユーザーの操作や時間経過によって変わる値を扱う場合に使用します。

例えば、いいねボタンのクリック回数、フォームの入力内容、モーダルの開閉状態などがStateで管理されます。

useStateフックの使い方

関数コンポーネントでStateを使うには、useStateというHooks（フック）を使用します。

import { useState } from 'react';

function Counter() {
  // [現在の値, 更新関数] = useState(初期値)
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

useStateは配列を返します。1つ目の要素が現在の値、2つ目の要素が値を更新するための関数です。

Stateの更新方法

Stateを更新する際は、必ず更新関数（上の例ではsetCount）を使用します。

// 正しい方法
setCount(count + 1);

// 間違った方法
count = count + 1; // これはNG！

直接変数を書き換えても、Reactは変更を検知できず、画面が更新されません。必ず更新関数を使いましょう。

Stateの特徴（変更可能）

Propsと異なり、Stateは変更可能です。ただし、前述の通り更新関数を通じて変更する必要があります。

Stateが更新されると、Reactは自動的にコンポーネントを再レンダリング（再描画）します。これにより、画面が最新の状態に更新されるわけですね。

Props vs State - 何が違うのか

比較表での整理

PropsとStateの違いを表にまとめました。

項目	Props	State
データの出所	親コンポーネントから受け取る	コンポーネント内で定義
変更可能性	読み取り専用（変更不可）	変更可能
変更方法	-	更新関数を使用
用途	コンポーネント間のデータ受け渡し	コンポーネント内のデータ管理
再レンダリング	propsが変わると再レンダリング	stateが変わると再レンダリング

使い分けのポイント

どちらを使うか迷った時は、以下の基準で判断しましょう。

Propsを使う場合

• 親コンポーネントからデータを受け取りたい
• コンポーネントを再利用可能にしたい
• データを変更する必要がない

Stateを使う場合

• ユーザーの操作で値が変わる
• 時間経過で値が変わる
• コンポーネント内でデータを管理したい

まとめ

重要ポイントの再確認

Reactの3つの基本概念について学びました。

コンポーネント

• UIを部品化する仕組み
• 再利用性と保守性を高める
• 関数コンポーネントが現在の主流

Props

• 親から子へデータを渡す
• 読み取り専用で変更不可
• コンポーネントを柔軟に再利用できる

State

• コンポーネント内で変化するデータを管理
• useStateフックで定義
• 更新すると自動的に再レンダリングされる

これら3つの概念は、Reactアプリケーション開発の土台となります。最初は難しく感じるかもしれませんが、実際に手を動かしてコードを書くことで、自然と理解が深まっていきますよ。