React.jsでContext APIを使ってコンポーネント階層を跨いでステートを共有する

2024-05-17

JavaScript と React.js におけるインスタンスとステート変数

React.js でコンポーネントを作成する際、インスタンスとステート変数の概念を理解することが重要です。これらの概念は密接に関係しており、コンポーネントの動作とデータ管理に影響を与えます。

インスタンス

React.js コンポーネントは、クラスまたは関数を使用して定義されます。コンポーネントがレンダリングされると、そのコンポーネントのインスタンスが作成されます。インスタンスは、コンポーネントのデータとメソッドを保持するオブジェクトです。

ステート変数は、コンポーネントの内部状態を表すプロパティです。ステート変数は、コンポーネントのインスタンスに格納されます。ステート変数の値は、コンポーネントのメソッドによって変更できます。

インスタンスとステート変数の主な違いは以下の通りです。

インスタンス は、コンポーネントのデータとメソッドを保持するオブジェクトです。インスタンスは、コンポーネントがレンダリングされるたびに作成されます。

ステート変数の値を変更するには、setState() メソッドを使用します。setState() メソッドは、コンポーネントのインスタンスに対して呼び出されます。setState() メソッドに渡されるオブジェクトは、更新するステート変とその新しい値を指定します。

ステート変数が更新されると、React.js はコンポーネントを再レンダリングします。再レンダリングにより、コンポーネントの新しい状態を反映した新しい UI が生成されます。

例

以下の例は、Counter コンポーネントを示しています。このコンポーネントは、ボタンをクリックするたびにカウントを 1 ずつ増やすボタンを表示します。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <p>カウント: {this.state.count}</p>
        <button onClick={this.handleClick}>カウントアップ</button>
      </div>
    );
  }
}

この例では、Counter コンポーネントには count というステート変数が定義されています。handleClick() メソッドは、setState() メソッドを使用して count の値を 1 ずつ増やします。ステート変数が更新されると、コンポーネントは再レンダリングされ、新しいカウント値が表示されます。

インスタンスとステート変数は、React.js コンポーネントの重要な概念です。インスタンスはコンポーネントのデータとメソッドを保持し、ステート変数はコンポーネントの内部状態を表します。ステート変数の値は、setState() メソッドを使用して変更できます。

これらの概念を理解することは、React.js コンポーネントを効果的に作成および管理するために重要です。

React.jsにおけるインスタンスとステート変数のサンプルコード

カウントアップボタン

この例では、ボタンをクリックするたびにカウントを1ずつ増やすボタンコンポーネントを作成します。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>カウント: {this.state.count}</p>
        <button onClick={this.handleClick}>カウントアップ</button>
      </div>
    );
  }
}

説明:

Counter コンポーネントは React.Component を継承しています。
コンストラクタは this.state を初期化します。この場合、count プロパティは 0 に設定されます。
handleClick メソッドは、setState 関数を使用して count の値を 1 増やします。
render メソッドは、コンポーネントのレンダリング方法を定義します。この例では、p 要素と button 要素を使用して、現在のカウント値と "カウントアップ" ボタンを表示します。

名前変更フォーム

この例では、ユーザーが入力した名前を表示するフォームコンポーネントを作成します。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }

  handleChange = (event) => {
    this.setState({ name: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`あなたの名前は ${this.state.name} です。`);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名前:
          <input type="text" value={this.state.name} onChange={this.handleChange} />
        </label>
        <input type="submit" value="送信" />
      </form>
    );
  }
}

handleChange メソッドは、入力フィールドの値が変更されたときに呼び出されます。このメソッドは setState 関数を使用して name の値を更新します。
render メソッドは、コンポーネントのレンダリング方法を定義します。この例では、form 要素、label 要素、input 要素、および submit ボタンを使用して、名前入力フォームを作成します。

これらの例は、React.jsにおけるインスタンスとステート変数の基本的な使用方法を示しています。これらの概念を理解することで、より複雑なReact.jsコンポーネントを作成することができます。

React.jsにおけるインスタンスとステート変数のその他の方法

React.js では、関数コンポーネントを使用してコンポーネントを作成することもできます。関数コンポーネントは、ステート変数を直接使用することはできませんが、useState フックを使用してステート管理を行うことができます。

import React, { useState } from 'react';

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

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

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

Redux は、React.js アプリケーションにおけるステート管理のためのライブラリです。Redux を使用すると、単一のストアにアプリケーション全体のステートを格納し、コンポーネント間でステートを共有することができます。

import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, incrementCount }) => (
  <div>
    <p>カウント: {count}</p>
    <button onClick={incrementCount}>カウントアップ</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch({ type: 'INCREMENT_COUNT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

MobX は、React.js アプリケーションにおけるステート管理のための別のライブラリです。MobX は、オブザーバブルなステート管理システムを提供し、ステートの変化に応じてコンポーネントを自動的に再レンダリングします。

import React from 'react';
import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action incrementCount = () => {
    this.count++;
  };
}

const Counter = () => {
  const store = new CounterStore();

  return (
    <div>
      <p>カウント: {store.count}</p>
      <button onClick={store.incrementCount}>カウントアップ</button>
    </div>
  );
};

Context API は、React.js 17 で導入された新しいステート管理機能です。Context API を使用すると、コンポーネント階層を跨いでステートを共有することができます。

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

const CountContext = createContext({ count: 0, incrementCount: () => {} });

const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

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

  return (
    <CountContext.Provider value={{ count, incrementCount }}>
      {children}
    </CountContext.Provider>
  );
};

const Counter = () => {
  const { count, incrementCount } = React.useContext(CountContext);

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