動的に変化するコンポーネント

動画: https://youtu.be/f3fcgbEn_DQ

今まで書いてきたコンポーネントは、「動的に変化」するものではありませんでした。つまり、一旦コードを書いて実行したら、その内容は「永久に同じまま」でした。

しかし実際のアプリケーションでは、表示する内容やスタイルが「動的に変化するもの」が多いでしょう。例えばニュースや天気情報を表示するアプリケーションでは、刻々と「変化する情報」を受け取って、React がそれに反応して表示する内容を「動的に更新する」わけです。

では今回は動的に変化するコンポーネントを書いていきます。

State = 状態 とは何か

これから State を持ったコンポーネント = Stateful Component を作っていきますが、その前に「State」とは一体なんなのか、水を例にとって考えてみます。

水は化学式で H2O と表記しますが、氷・水・蒸気と温度によって変化しますね。何がこの変化を規定しているのでしょうか？

そうです、温度です。温度が変化することで、H2O という物質の状態がそれに合わせて変化するわけです。

この H2O における「温度」が、まさに state = 状態です。一見、氷、水、蒸気と違うものに変化しているように思われますが、本質的には同じもので、変化しているのは「温度」という state だけなわけです。

React アプリケーションも、この変化する水と同じように考えることができます。本質的には同一のコンポーネントだが、内部の state の違いによって見た目や振る舞いが変化するわけです。

氷、水、蒸気に変化するコンポーネント

次のコードは温度によって氷、水、蒸気と表示が変化する React App です。Water コンポーネントが state に温度のための領域を持ち、これを変化させることで表示する内容とスタイルが変化します。

今までのコンポーネントと異なるのは「class」を用いていること、それから state を内部で持ち setState メソッドによって変更している点です。

では次のレッスンからこのアプリケーションについて説明していきます。

https://codesandbox.io/s/1wzywzzw7l

import React from "react";
import { render } from "react-dom";

import "./App.css";

class Water extends React.Component {
  constructor(props) {
    super(props);
    this.state = { temp: 15 };
  }

  getH2Ostate(temp) {
    if (temp <= 0) {
      return "Ice";
    }

    if (100 <= temp) {
      return "Steam";
    }

    return "Water";
  }

  getH2Oclass(temp) {
    if (temp <= 0) {
      return "ice";
    }

    if (100 <= temp) {
      return "steam";
    }

    return "water";
  }

  render() {
    const H2Ostate = this.getH2Ostate(this.state.temp);

    return (
      <div>
        <div className={this.getH2Oclass(this.state.temp)}>
          {H2Ostate} temp:{this.state.temp} ℃
        </div>
        <button onClick={this.onClickPlus}>+1</button>
        <button onClick={this.onClickPlus10}>+10</button>
        <button onClick={this.onClickMinus}>-1</button>
        <button onClick={this.onClickMinus10}>-10</button>
      </div>
    );
  }

  onClickPlus = () => {
    this.setState({ temp: this.state.temp + 1 });
  };

  onClickPlus10 = () => {
    this.setState({ temp: this.state.temp + 10 });
  };

  onClickMinus = () => {
    this.setState({ temp: this.state.temp - 1 });
  };

  onClickMinus10 = () => {
    this.setState({ temp: this.state.temp - 10 });
  };
}

render([<Water />, <Water />, <Water />], document.getElementById("root"));