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

2024-04-15

ReactJSにおけるStateとPropsの違い

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

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

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

項目	State	Props
定義	コンポーネント内部のデータ	親コンポーネントから子コンポーネントに渡されるデータ
変更可能性	コンポーネント自身によって変更可能	子コンポーネントからは変更不可
データフロー	コンポーネント内部	親コンポーネントから子コンポーネント
目的	コンポーネントの動作を制御	データの流れを制御
使用例	ユーザー入力、タイマー、アニメーションなど	コンポーネント間のデータ共有、レイアウト設定など

StateとPropsの使い分け

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

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

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

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

StateとPropsは、ReactJSにおける重要なデータ管理概念です。それぞれの違いを理解し、適切に使い分けることで、効率的で柔軟なアプリケーション開発が可能になります。

ReactJS 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;

説明

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

コメントリスト

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

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;

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

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

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

これらのサンプルコードは、ReactJSにおけるStateとPropsの概念を理解するのに役立ちます。StateとPropsを適切に使い分けることで、効率的で柔軟なアプリケーション開発が可能になります。

ReactJSにおけるStateとPropsのその他の使用方法

フォーム入力の処理には、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;

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

条件付きレンダリング

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 State変数は、ログイン状態を表します。
条件付きレンダリング構文を使用して、isLoggedIn の値に基づいてコンテンツを表示します。

非同期処理

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;