Reactを学ぶ中で、最初に出会う基本的な概念として props と state があります。これらはどちらもコンポーネントでデータを扱うための重要なツールですが、使い方や役割が異なります。この記事では、これらの違いと役割を初心者にもわかりやすく解説します。

props とは

props（propertiesの略）は、Reactコンポーネントが外部から受け取るデータを指します。これは、コンポーネントが再利用可能になるためのキーとなる概念で、異なるデータをpropsとして渡すことで、同じコンポーネントを様々な場面や状況で再利用することができます。

props の特性

読み取り専用: propsは外部（主に親コンポーネント）からコンポーネントに渡される情報です。
子コンポーネントは、渡されたpropsの値を直接変更することはできません。変更が必要な場合は、親コンポーネントにその変更を伝え、親がpropsの値を変更するべきです。
例: 親から子へと「名前」として"John"が渡されたら、その子コンポーネント内で"John"を"Mike"に変更することはできません。
再利用性: propsを使うことで、同じコンポーネントを異なるデータで複数回使い回すことができます。
例: 一つの「ボタン」コンポーネントに、propsとして異なるテキストや色を渡すことで、様々なボタンを作ることができます。

使い方

親コンポーネントから子コンポーネントにデータを渡す際に、属性としてpropsを設定します。

// ボタンというコンポーネントを定義
function Button(props) {
    return <button style={{ backgroundColor: props.color }}>{props.text}</button>;
}

// このボタンコンポーネントを利用して、異なるテキストや色のボタンを作成
<Button text="クリックしてね" color="blue" />
<Button text="削除" color="red" />

この例では、Buttonという一つのコンポーネントを作成しましたが、異なるpropsを渡すことで、異なるテキストや色のボタンを表示することができます。

子コンポーネントでのアクセス

子コンポーネント内でpropsにアクセスするには、this.props.プロパティ名（クラスコンポーネントの場合）やprops.プロパティ名（関数コンポーネントの場合）を使用します。

state とは

Reactの state は、コンポーネント内で変化するデータを管理するための仕組みです。例えば、ユーザーの操作に応じて表示内容を変更する場合や、外部APIから取得したデータを表示する場合など、変動するデータを扱う際にstateが利用されます。

stateの特性

局所的: stateは、定義されたコンポーネント内でのみ利用可能です。他のコンポーネントから直接アクセスすることはできません。
不変性 : stateは直接変更すべきではありません。変更する場合は、setStateメソッドを使用します。これにより、Reactはコンポーネントの再レンダリングが必要なタイミングを適切に判断できます。

使い方

// Counterという名前のReactクラスコンポーネントを定義
class Counter extends React.Component {
  // コンポーネントが作成される際に実行されるコンストラクタメソッド
  constructor(props) {
    super(props); // 親クラスのコンストラクタを呼び出す
    // stateの初期値を設定。初めてのカウント値は0。
    this.state = { count: 0 };
  }

  // コンポーネントの表示内容を定義するrenderメソッド
  render() {
    return (
      <div>
        {/* 現在のカウント値を表示 */}
        <p>{this.state.count}</p>
        {/* ボタンをクリックすると、カウント値が1増加する */}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          カウントアップ
        </button>
      </div>
    );
  }
}

このCounterコンポーネントは、カウントの値を表示し、ボタンをクリックするたびにその値を1増加させるシンプルなカウンターとして動作します。カウントの値はstateに保持されており、ボタンをクリックするとsetStateメソッドによって更新され、コンポーネントが再レンダリングされます。

まとめ

Reactでは、コンポーネントが情報を受け取る（props）と情報を管理する（state）の2つの主要な方法があります。 props は親から子へと情報を渡すためのもので、 state はコンポーネントが動的に変わるデータを保持・管理するためのものです。これらの概念を理解することは、Reactの動作を理解する上で非常に重要です。

Reactの「props」と「state」: その違いと役割について

props とは

props の特性

使い方

子コンポーネントでのアクセス

state とは

stateの特性

使い方

まとめ