ReactのsetStateとは？状態管理の基本と使い方を実例付きで解説

シングルページアプリケーション（SPA）では、アプリケーションの状態（ステート）を追跡することが、変更内容をユーザーに描画するための仕組みの中核となります。MVC（モデル・ビュー・コントローラー）フレームワークとは異なり、SPAはページ遷移を行わないため、クライアント側から発生する変更を適切に管理する手段が必要です。

Reactでは、コンポーネント自身が自分の状態を管理し、それに応じて再レンダリングを行うことができます。これはライフサイクルメソッドによって実現されます。本記事では、その中でもsetStateを使って状態を変更する方法に焦点を当てて解説します。

なお、本ガイドはReactの基礎知識があることを前提としています。基礎をおさらいしたい方は、まずReact入門向けの学習リソースを確認しておくと理解がスムーズになります。

ReactのsetStateとは？

setStateは、コンポーネントの状態を安定した形で変更するためのReactのメソッドです。Reactで状態を扱う際には、いくつかの重要なルールがあります。

1. setStateはクラスコンポーネント内でのみ呼び出せる：クラスコンポーネントはconstructor()メソッドで初期状態を設定し、その後setStateを呼び出して状態を更新します。
   
   Reactには関数コンポーネントとクラスコンポーネントの2種類がありますが、本記事ではクラスコンポーネントを扱います。両者の違いについては、別途解説記事を参考にするとよいでしょう。
2. this.setState()の形式で呼び出すのがベストプラクティス：クラスコンポーネント内ではthisキーワードでコンポーネント自身を直接参照できます。this.setState()と書くことで、コードが意図せず壊れるのを防げます。
3. 状態を直接変更しない：this.stateの値を直接書き換えても、Reactは再レンダリングを検知しません。状態を変更する目的は、コンポーネントの再レンダリングを発生させ、変更をユーザーに反映させることだからです。

それでは、これらのルールを踏まえながら、実際の構文を見ていきましょう。

setStateの基本構文

最初のルールにある通り、setStateはクラスコンポーネント内でのみ使用できます。例として、ショッピングアプリにカート機能を実装する場面を考えてみましょう。「Cart」というクラスコンポーネントを作成し、ユーザーがカートに商品を追加した際に、このコンポーネント自身が状態を管理するようにします。

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }

コードを分解してみましょう。まず「Cart」というクラスコンポーネントを宣言しています。すべてのクラスコンポーネントと同様に、React.Componentをextends（継承）します。これはReactの定型的な構文です。

次に、このコンポーネントに状態を持たせるためにconstructorメソッドを呼び出し、super(props)で基底クラスのコンストラクタを呼び出します。propsを渡さずに基底コンストラクタを呼び出すコードも見かけますが、公式のReactドキュメントでは、必ずpropsを渡して呼び出すことが推奨されています。

クラスコンポーネントの必須構文が整ったところで、初期状態を代入しましょう。this.stateを直接参照して値を代入できるのは、このconstructor内だけです。this.state = { shoppingCart: [] }とすることで、ショッピングカートの初期状態を空の配列として設定できます。

React setStateの実装例

前のセクションでは、初期状態を宣言する構文を確認しました。constructorメソッドで状態を設定したら、通常どおりrenderできます。

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shoppingCart: []
    }
  }
  render() {
    return (
     <div>
     <h1>Your Shopping Cart</h1>
     <div>{this.state.shoppingCart}</div>
     </div>

    );
  }
}
ReactDOM.render(
  <Cart />,
  document.getElementById('root')
);

ここでは、初期状態を設定したCartクラスコンポーネントが、renderメソッドのreturn文でカートを描画しています。次に、setStateを使ってカートを更新する方法を見てみましょう。

既に追加済みの商品を保持しながら、新しい商品をshoppingCartに追加する関数を定義します。JavaScriptのスプレッド演算子（...）を使って現在の状態のコピーを作成し、新しい状態へと更新します。こうすることで、カートには追加されたすべての商品が保持されます。

addItem(newItem) {
    this.setState({
     shoppingCart: [...this.state.shoppingCart, newItem]
    })
  }

このaddItem関数は、ボタンのonClick属性などで利用できます。ユーザーがボタンをクリックしたときに商品をカートに追加できるようになります。本記事の目的としては、関数の中でsetStateを使う流れをつかむだけで十分です。

なお、本記事はsetStateの使い方を理解するための入門編であり、網羅的な解説ではありません。

まとめ

本記事では、setStateとは何か、使用時のルール、基本構文、そして簡単な実装例を学びました。この記事をきっかけに、ぜひご自身でコンポーネントの状態更新に挑戦してみてください。

公式のReactドキュメントにはさらに多くのサンプルが掲載されており、実践的な練習の機会として最適です。シングルページアプリケーションにおいて、コンポーネントの状態を追跡することは、変更をユーザーに正しく描画するために不可欠だという点を忘れないようにしましょう。