【React入門】PropsとStateの違いとは？

本記事はReactのstateについて、分かりやすく紹介しています。Reactの導入部分は紹介している記事が少なく、始めたての方にとって大変です。そんな方へ向けてReactのstateを誰でも理解できるようにまとめたので、学習にお役立て下さい。

本記事の内容

ReactのState
- Stateとは？
- Stateの具体例
StateをReactで実現１
StateをReactで実現２

ReactのState

Stateとは？

ReactのStateは「状態」という意味です。
Reactのコンポーネントは内部で「状態」を持つことができます。
言い換えれば、Reactのコンポーネントは「何かを保管しておく箱」が常に用意されています。
（厳密には違うことはお許しください…）

「React」のコンポーネントは「State」と「Props」という２種類のデータがあるのですが、「State」は値の代入後に変更可能、「Props」は代入後に変更不可能。という違いがあります。
「Props」については別の記事でまとめますね。

Stateについてまだピンときていない方、下の具体例を見てください。

Stateの具体例

下のように、クリックされる文字に合わせて画面出力が変更されるUIを作ることを考えましょう。

クリックされる文字に合わせて、ステーキの味の状態が「おいしい」→「まずい」に変更されたり、「まずい」→「普通」に書き換えられたりするわけです。
Stateとは、この状態を管理します。今回で言う「おいしい」「普通」「まずい」という３つの状態がstateによって管理されているわけです。
Reactでいう「state」とはこの「状態」を表しています。

StateをReactで実現１

Stateの簡単な例を紹介します。
この例ではあまりStateを利用する恩恵を利用できてはいませんが、Stateを理解する上では非常に重要で簡単なソースコードです。

Stateの値を宣言

constructorの内部で、下の３行目のようにStateを宣言しました。
tasteという変数の中に「おいしい」という文字列が入っています。

constructor(props) {
    super(props);
    this.state = {taste: 'おいしい'};
}

宣言したStateを出力

同じファイル内のrender内部に下のソースコードを記述しました。
重要なのは、４行目の｛｝の「this.state.taste」です。
先ほど上で記述したtasteの宣言を呼び出しています。

render() {
    return (
        <div>
            <h1>今日食べたステーキは{this.state.taste}。</h1>
        </div>
    )
}

実行

これを実行すると下の画像のように出力されます。
JSXの部分で、「おいしい」と記述していないのにも関わらず、constructorの中で記述したtasteの状態を呼び出すことで、出力が実現できています。

StateをReactで実現２

stateを上手く利用すれば、動的なUIを作ることができます。
下の例はクリックするボタンに合わせて出力されている文字を書き換えるものです。

Stateを宣言

constructor内部では、先程と同様にstateとしてtasteを宣言します。

constructor(props) {
    super(props);
    this.state = {taste: 'おいしい'};
}

SetstateでStateを書き換える

下は関数です。
この関数が実行されたとき、tasteの状態を、引数として入力された文字列に書き換える処理を行います。

今回、この関数はボタンがクリックされたとき（button内でonClickされたとき）に呼び出します。

clickRankChange(taste) {
    this.setState({taste: taste});
}

レイアウトを作成

renderの内部でJSXコードよりレイアウトを作りましょう。
<button>タグの内部で、ボタンがクリックされた際に先程の関数を呼び出しています。

render() {
    return (
        <div>
            <h1>味の感想</h1>
            <p>ステーキは{this.state.taste}。</p>
            <button onClick={() => {this.clickRankChange('おいしい')}}>おいしい</button>
            <button onClick={() => {this.clickRankChange('普通')}}>普通</button>
            <button onClick={() => {this.clickRankChange('まずい')}}>まずい</button>
    </div>
    )
}

全体のソースコード

念の為、Reactのソースコード全体を載せておきます。

import React from 'react';

class Food extends React.Component{
    constructor(props) {
        super(props);
        this.state = {taste: 'おいしい'};
    }

    clickRankChange(taste) {
        this.setState({taste: taste});
    }

    render() {
        return (
            <div>
                <h1>味の感想</h1>
                <p>ステーキは{this.state.taste}。</p>
                <button onClick={() => {this.clickRankChange('おいしい')}}>おいしい</button>
                <button onClick={() => {this.clickRankChange('普通')}}>普通</button>
                <button onClick={() => {this.clickRankChange('まずい')}}>まずい</button>
        </div>
        )
    }
}

export default Food;

実行

ターミナルで「npm start」コマンドを実行すると上手く表示されることがわかります。
このように、ReactのStateを上手く利用することによって、動的なアプリケーションを作成することができるわけです。
そのため、Reactを理解するためにはStateは非常に重要な訳です。

ということで本記事は、
ReactのStateを紹介しました！
最後まで読んでいただき、ありがとうございました＼(^o^)／

超オススメのPC用品

PCを操作する上で、トラックボールマウスが非常におすすめです！
僕も感動したこのマウスを、騙されたと思って使ってみてください！(^^)

リンク

外部モニターで２倍以上の効率化が見込めます！
安いものだと、たったの１万円前後なのでおすすめですよー！＼(^o^)／

リンク