はじめに

今回は、State を使った React コンポーネントについて書きたいと思います。

シリーズ

本記事はReact基礎講座のための連載になっています。気になる方のために、前の章は以下です。

これまでの復習、コンポーネントを別ファイルにしてコールする（React基礎講座5） - Qiita

最初の記事は、以下です。

Reactを使ってJSXの内容をレンダリングする（create-react-app）（React基礎講座1） - Qiita

State とは

同じのコンポーネントだけど、コンポーネントが持つ内部の state の違いによって見た目や振る舞いが変わって行きます。

人間で例える、年齢を state としてもいいでしょう。また、車で例えると、社名やナンバープレートを state としてもいいでしょう（それが最適かはわかりませんが）。

React コンポーネントが State を持つと何がいいのか？

コンポーネント中にあるテキストや、cssのクラスなどを動的に変化させることができます。

ES2015(ES6) におけるクラス構文

React の state を持った Component は基本、クラス構文と同じような書き方なので、まずは、ES2015(ES6) におけるクラス構文を学んで理解して行きましょう。

まずは、JSにおける最小限のクラスを書いて行きましょう。

様々な車のオブジェクトを生成する Car クラスを生成し、インスタンス（オブジェクト）を作ってコンソールで表示させてみましょう。

// jsのクラスの基本的な定義
class Car {
  constructor() {}
}

// インスタンス（オブジェクト）の生成
const Prius = new Car();

// コンソールの確認
console.log(Prius);

コンソールは、以下のように表示されます。

引数を受け取れるようにしましょう

Car クラスに引数として、名前とプレート番号を受け取れるようにします。クラス内では、constructorに定義します。
イオンスタンスを生成する際に、二つの引数を定義します。

実際に書いてみます。

class Car {
  constructor(name, number) {
    this.name = name;
    this.number = number;
  }
}

const Prius = new Car("prius", "品川あ00-00");
console.log(Prius);

すると、コンソールではオブジェクトの中に定義された2つの引数に渡した値が表示されています。

クラスなので別のインスタンス（オブジェクト）というか、車（カローラ）も定義してみましょう。

class Car {
  constructor(name, number) {
    this.name = name;
    this.number = number;
  }
}

const Prius = new Car("prius", "品川あ00-00");
console.log(Prius);

const Corolla = new Car("corolla", "品川あ00-00");
console.log(Corolla);

すると、２つ、インスタンス（オブジェクト）ができました。

1つのクラス（テンプレート）から、複数のインスタンス（オブジェクト）ができるところが、クラスの素敵なポイントですね。

では、クラスに関数を持たせてみましょう。（JSでは、クラスが持つ関数をファンクションやメソッドと言います。）

関数の内容は、定義されたデータ（今回なら、名前とプレート番号）を表示する内容にします。では、関数（名前 callMySpec）を作成し、実際にコールしてみましょう。

class Car {
  constructor(name, number) {
    this.name = name;
    this.number = number;
  }

  // 関数（名前 `callMySpec`）を作成
  callMySpec() {
    console.log(this.name, this.number);
  }
}

const Prius = new Car("prius", "品川あ00-00");
console.log(Prius);
// 実際にコールしてみました
Prius.callMySpec();

const Corolla = new Car("corolla", "品川あ00-00");
console.log(Corolla);
// 実際にコールしてみました
Corolla.callMySpec();

すると、関数も動いていることがコンソールからわかります。
オブジェクトにドットとつけて、メソッド名()をつけてクラスメソッドをコールするシンタックスが分かりました。

React におけるクラスコンポーネントの書き方

ES2015(ES6)におけるクラスシンタックスが分かったので、今度は、ReactのStateを持ったクラスで書くコンポーネントを実装して行きます。

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

class Car extends React.Component {
  constructor(props) {
    super(props);

  }

  render() {
    return <h1>test</h1>
  }
}

render(<Car />, document.getElementById("root"));

重要なのは extends React.Component の部分ですね。

React.Componentの機能を継承（extend）したCarクラスである、ということが言えます。

これは、ただのJSのクラスではなく、この後に説明するstateやprops（React.Componentの機能）を利用できるCarクラスと言えます。

そして、constructor内でpropsを受け取ってsuper(props)で実行する。という記述は定型文として覚えてください。

superは、extendした内容を引き継いでいます。書き方（↓）

...
constructor(props) {
    super()
  }
...

は定型文として覚えてください。

そして、Reactにおけるクラスコンポーネントでは、render()というメソッドが必要になります。これは、どんなコンポーネントを実際に返すかというコンテンツ部分になります。

これらを、まとめて、クラスコンポーネントではなく、 React.Componentで書くと

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

class Car extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <h1>{this.props.name}</h1>
  }
}

render(<Car name='corolla' />,document.getElementById("root"));

これは、nameの内容をpropsとして渡しています。

すると、viewにはcorollaと表示されます。

nameをstateとして定義するには、以下のように

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

class Car extends React.Component {
  constructor(props) {
    super(props);
    // stateの定義はオブジェクト記法で定義する
    this.state = { name: "corolla" };
  }

  render() {
    return <h1>{this.state.name}</h1>;
  }
}

render(<Car />, document.getElementById("root"));

これも同じく、viewにはcorollaと表示されます。

クリックした時に state（状態）を変更する処理

今度は、クリックした時に <h1>にある車の車種名のstate（状態）をメーカー名に変更する処理を書いていきます。

具体的の処理の記述は

新たにstate（maker）とその値（toyota）を加える
h1タグの下にbuttonタグを設置して、クリックした際に発火するメソッドを指定する
メソッドを作成する
- メソッドの内容は「クリックしたら makerのstateの値に変更する」
- その時にstateを更新するメソッドはsetStateを利用してください
- メソッド名は showMakerName （this.の影響範囲もあるので、アロー関数で実装する）
上に書いたReactの記述から機能を足していきます

記述内容（正解）

index.js

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

class Car extends React.Component {
  constructor(props) {
    super(props);
    // stateの定義はオブジェクト記法で定義する
    // 新たに state （ maker ）とその値（ toyota ）を加える
    this.state = { name: "corolla", maker: "toyota" };
  }

  // h1タグの下に button タグを設置して、クリックした際に発火するメソッドを指定する
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <button onClick={this.showMakerName}>add</button>
      </div>
    );
  }

  // メソッドを作成する
  showMakerName = () => {
    this.setState({ name: this.state.maker });
  };
}

render(<Car />, document.getElementById("root"));

すると、ボタンタグをクリックしたら、state（maker）の値（toyota）に変更されている事がわかります。

以上です。参考にしてみてください。

参考

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田祥寛

State を使った React コンポーネント（React基礎講座6）

はじめに

シリーズ

State とは

React コンポーネント が State を持つと何がいいのか？

ES2015(ES6) における クラス構文