ReactJSにおけるStateとPropsの違いを徹底解説！わかりやすい例で理解する

ReactJSにおけるStateとPropsの違い

Stateとは、コンポーネント内部のデータであり、コンポーネント自身の操作によって変化するものです。具体的には、ユーザー入力、タイマー、アニメーションなど、コンポーネントの動作によって変化するデータがStateに格納されます。Stateの変化は、Reactコンポーネントの再描画をトリガーし、UIを更新します。

一方、Propsとは、親コンポーネントから子コンポーネントに渡されるデータであり、子コンポーネントはPropsを変更できません。Propsは、データの流れを制御し、コンポーネント間の連携を実現するために使用されます。Propsは、コンポーネントの動作に影響を与える静的なデータとして扱われます。

StateとPropsの主な違いは以下の通りです。

StateとPropsの使い分け

一般的に、以下のガイドラインに従ってStateとPropsを使い分けるのがおすすめです。

• Props: 静的なデータ、コンポーネント間のデータ共有
• State: コンポーネント自身の動作によって変化するデータ

具体的な例としては、以下のようなケースがあります。

• リスト: 表示するデータはStateで管理し、Propsでリストのスタイルを設定する。
• ボタン: クリック時の処理はStateで管理し、Propsでボタンのラベルを設定する。
• チェックボックス: チェック状態はStateで管理し、Propsで初期値を設定する。

この例では、ボタンをクリックするたびにカウントアップするシンプルなカウンターアプリを作成します。

Counter.js

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={increment}>カウントアップ</button>
    </div>
  );
}

export default Counter;

説明

• JSX テンプレート内で、count State変数とincrement 関数を表示しています。
• increment 関数は、setCount 関数を使用してStateを更新し、カウント値を1増やします。
• count State変数は、現在のカウント値を保持します。
• このコードは、useStateフックを使用してStateを管理しています。

コメントリスト

この例では、コメントのリストを表示するシンプルなアプリを作成します。

CommentList.js

import React from 'react';

const comments = [
  { id: 1, author: 'John Doe', content: 'Hello!' },
  { id: 2, author: 'Jane Doe', content: 'Nice to meet you!' },
];

function CommentList() {
  return (
    <div>
      <h2>コメントリスト</h2>
      {comments.map((comment) => (
        <Comment key={comment.id} comment={comment} />
      ))}
    </div>
  );
}

function Comment({ comment }) {
  return (
    <div>
      <h3>{comment.author}</h3>
      <p>{comment.content}</p>
    </div>
  );
}

export default CommentList;

• Comment コンポーネントは、コメントの著者と内容を表示します。
• CommentList コンポーネントは、comments 配列をループし、各コメントに対して Comment コンポーネントをレンダリングします。
• このコードは、comments という配列にコメントデータを持っています。

この例では、StateとPropsを以下のように使い分けています。

• Props: Comment コンポーネントは、comment Propsを受け取り、コメントデータを表示します。
• State: CommentList コンポーネントはStateを使用しません。

フォーム入力の処理には、StateとPropsを効果的に組み合わせることができます。

Form.js

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`名前: ${name}、メールアドレス: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>名前:</label>
      <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
      <label>メールアドレス:</label>
      <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
      <button type="submit">送信</button>
    </form>
  );
}

export default Form;

• handleSubmit 関数は、フォーム送信時に呼び出され、入力値をログ出力します。
• onChange イベントハンドラーは、Stateを更新し、入力値を反映します。
• name と email State変数は、入力値を保持します。
• このコードは、名前とメールアドレスを入力するためのフォームを作成します。

条件付きレンダリング

StateとPropsを使用して、条件に応じてコンポーネントをレンダリングすることができます。

ConditionalRendering.js

import React, { useState } from 'react';

function ConditionalRendering() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h2>ログイン済み</h2>
          <p>ユーザー情報</p>
        </div>
      ) : (
        <div>
          <h2>ログイン画面</h2>
          <button onClick={() => setIsLoggedIn(true)}>ログイン</button>
        </div>
      )}
    </div>
  );
}

export default ConditionalRendering;

• 条件付きレンダリング構文を使用して、isLoggedIn の値に基づいてコンテンツを表示します。
• isLoggedIn State変数は、ログイン状態を表します。
• このコードは、ログイン状態に応じてコンテンツをレンダリングするコンポーネントを作成します。

非同期処理

StateとPropsを使用して、非同期処理の結果を処理することができます。

AsyncData.js

import React, { useState, useEffect } from 'react';

function AsyncData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((responseData) => setData(responseData));
  }, []);

  return (
    <div>
      {data.length > 0 ? (
        <ul>
          {data.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <p>データが読み込まれています...</p>
      )}
    </div>
  );
}

export default AsyncData;

• 条件付きレンダリング構文を使用して、データが読み込まれたかどうかを確認し、コンテンツを表示します。
• data State変数は、APIレスポンスデータを保持します。
• useEffect フックを使用して、API呼び出しを非同期的に実行します。
• このコードは、APIからデータを取得し、リストに表示するコンポーネントを作成します。