Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Reactの基本を学ぼう~コンポーネントで動的な状態管理

基礎からはじめるReact Native入門 第4回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/10/15 11:00

 前回は、Reactコンポーネントの構成要素であるJSXやpropsについて解説しました。今回は、それらを動的な状態管理によって更新する方法について解説していきます。状態の更新は、コンポーネントのライフサイクルや、ユーザー操作のイベントを起点として行われるので、これらを交えた具体例についても解説します。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

動的な状態管理を行う

 前回は、変数をJSXの中で展開する方法や、propsを通じて親から子へと値を渡せることについて解説しました(リスト1)。

[リスト1]propsを通じて値を受け渡しする
function App() {
  return (
    <View>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </View>
  );
}

function Welcome(props) {
  return <Text>Hello, {props.name}</Text>;
}

 しかし、このままでは、決まったデータを表示することしかできません。アプリを作っていくのであれば、表示するデータを動的に更新する方法がほしいところです。

 Reactには、データを動的に更新するための仕組みとして、 state(ステート、状態の意)という機能が用意されています。クラスコンポーネントと関数コンポーネントのどちらでもstateを扱うことができますが、今回は伝統的な方法であるクラスコンポーネントでの使い方を解説します。

クラスコンポーネントのstateを表示に使う

 クラスコンポーネントにおける状態管理には、React.Componentのサブクラスが使用できるstateプロパティとsetStateメソッドを用います。実用的な具体例は後述するので、本項では、まず基本的なルールについて解説します。リスト2は、stateを初期化して、その内容をWelcomeコンポーネントに渡すサンプルです。

[リスト2]stateの初期化と表示
export default class App extends React.Component {
  constructor(props) {
    super(props); // (2)

    this.state = { // (1)
      name: "Sara",
    };
  }

  render() {
    const name = this.state.name; // (3)

    return (
      <View>
        <Welcome name={name} />{/* (4) */}
      </View>
    );
  }
}

function Welcome(props) {
  return <Text>Hello, {props.name}</Text>;
}

 stateを初期化するには、ECMAScriptのクラス機構そのままのconstructorを利用します。(1)のようにstateプロパティに何らかの値を代入すれば、初期化は完了です。this.state = 1;のようにプリミティブ型の値を代入しても構いませんが、慣習としてオブジェクトにすることが多いです。ちなみに、constructorの中では(2)のようにsuper(props);を呼ぶ必要がありますが、これはおまじないだと思っていただいて構いません。

 初期化ができたら、今度はそのデータを表示に使ってみます。stateはクラスのプロパティなので、クラス内のどのメソッドからでも参照することができます。なので、(3)のようにrenderメソッドの中でも参照することができます。

 最後に、(3)で作ったname変数をJSXの中でpropsとして渡すには、(4)のname={name}のように、{}で変数を囲みます。実行すると図1のようになります。

図1:stateの情報が表示できた
図1:stateの情報が表示できた

 これで、stateの値を表示に使うことができました。

クラスコンポーネントのstateを更新する

 このstateを何らかのタイミングで更新したい場合には、setStateメソッドを使います(リスト3)。

[リスト3]setStateの使い方
this.setState({ name: newName });

 setStateもクラスのプロパティなので、クラス内のどのメソッドからでも実行することができます。実行すると、renderメソッドが再度実行され、画面が更新されます。

 また、setStateはオブジェクトの一部分だけを更新することもできます。リスト4のように、複数のデータを扱うオブジェクトがあったとします。

[リスト4]setStateで一部のデータのみを更新する
constructor(props) {
  super(props);

  this.state = {
    name1: "Sara",
    name2: "Cahal",
    name3: "Edite",
  };
}

anyEvent() {
  this.setState({ name1: "Bob" }); // (1)
}

 name1からname3までのデータがありますが、(1)のsetStateには、name1だけが含まれたオブジェクトを渡します。この場合、Reactはname1の値だけを書き換えて、name2やname3はそのままにします。複数の状態を扱うときには便利なので、覚えておきましょう。

よくある間違い

 初心者によくある間違いとして、constructorのときと同じように、代入してしまうことがあります(リスト5)。

[リスト5]誤った更新方法
this.state = { name: newName };

 確かにクラスのプロパティとしてのstateはこれで更新できます。しかし、setStateに組み込まれているrenderメソッドを再実行するための仕組みが実行されないため、画面が書き変わりません。正しくsetStateを実行しましょう。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact Native入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5