React ステート

概要: このチュートリアルでは、React ステートを使用して、時間とともに変化するデータを保存し、コンポーネントの動作を制御する方法を学びます。

React ステートの概要

ステートとは、時間とともに変化するデータのことです。

通常、React コンポーネントは、その動作を制御するステートを持っています。コンポーネントのステートを管理するには、React ステートシステムを使用します。

以下は、React コンポーネントでステートを定義する手順を示しています。

まず、reactライブラリからuseState関数をインポートします。

import { useState } from 'react';Code language: JavaScript (javascript)

次に、コンポーネント内でuseState()関数を使用してステートを定義します。

const App = () => {
  const [state, setState] = useState(0);
  // ...
};Code language: JavaScript (javascript)

useState()関数は、2つの変数を含む配列を返します。

• ステート (state)。
• ステートを変更する関数 (setState)。

useState()関数は2つの要素の配列を返すため、配列の分割代入を使用して、戻り値を変数に割り当てることができます。

慣例として、ステートがnameの場合、ステートを設定する関数はsetNameとなります。

0は、コンポーネントが初期化されたときのステートのデフォルト値です。

ステートが配列の場合は、デフォルト値を空の配列[]に設定できます。同様に、ステートがオブジェクトの場合は、ステートのデフォルト値を空のオブジェクト{}に設定できます。

3つ目は、setState()関数を使用してステートを変更します。

setState(newValue);Code language: JavaScript (javascript)

Reactでは、次のように直接ステートを変更してはいけません。

state = newValue;Code language: JavaScript (javascript)

代わりに、setState()関数を使用してステートを変更します。

setState(newValue);Code language: JavaScript (javascript)

setState()関数を使用してステートを変更します。値を直接変更してステートを変更しないでください。

ステートが変更されると、Reactはコンポーネントを作成する関数を実行して、コンポーネントを再レンダリングします。

setState()関数を使用せずにステートを直接変更すると、Reactはコンポーネントを再レンダリングできなくなり、予期しない動作が発生します。

通常、コンポーネントのステートは、ボタンをクリックするなど、コンポーネントを操作するときに変更されます。Reactでイベントを処理するには、Reactイベントシステムを使用します。

カウンターアプリ

次のカウンターReactアプリを作成します。

+ボタンをクリックすると、数値が増加します。-ボタンをクリックすると、数値が減少します。

新しいプロジェクトのセットアップ

まず、ターミナルを開き、npx create-react-appを実行してカウンターアプリを作成します。

npx create-react-app counterCode language: JavaScript (javascript)

次に、counterプロジェクトディレクトリに移動します。

cd counterCode language: JavaScript (javascript)

3つ目は、プロジェクトディレクトリの下のsrcディレクトリ内のすべてのファイルを削除します。

最後に、srcディレクトリにindex.jsファイルとApp.jsファイルを作成します。

• index.jsファイルはAppコンポーネントを表示します。
• Appコンポーネントを格納するApp.jsファイル。

index.js

index.jsファイルは、画面にAppコンポーネントを表示します。

import ReactDOM from 'react-dom/client';
import App from './App.js';

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

root.render(<App />);Code language: JavaScript (javascript)

App.js

import { useState } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <>
      <header>
        <h1>Counter</h1>
      </header>
      <main>
        <p>{counter}</p>
        <div>
          <button type="button" onClick={increment}>
            -
          </button>
          <button type="button" onClick={decrement}>
            +
          </button>
        </div>
      </main>
    </>
  );
};

export default App;Code language: JavaScript (javascript)

仕組み

まず、reactライブラリからuseState関数をインポートします。

import { useState } from 'react';Code language: JavaScript (javascript)

次に、Appコンポーネントを作成します。

const App = () => { 
   // ...
}Code language: JavaScript (javascript)

3つ目は、counterという名前のAppコンポーネントのステートを定義します。

const [counter, setCounter] = useState(0);Code language: JavaScript (javascript)

カウンターのデフォルト値を0に設定します。

4つ目は、クリックイベントを処理する2つの関数を定義します。

const increment = () => setCounter(counter + 1);
const decrement = () => setCounter(counter - 1);Code language: JavaScript (javascript)

増加ボタンをクリックするとincrement()関数が実行され、減少ボタンをクリックするとdecrement()関数が実行されます。

5つ目は、減少ボタン（-）のonClickイベントにdecrement()関数を、増加ボタン（+）のonClickイベントにincrement()関数を接続します。また、<p>タグにカウンターステートを表示します。

return (
  <>
    <header>
      <h1>Counter</h1>
    </header>
    <main>
      <p>{counter}</p>
      <div>
        <button type="button" onClick={decrement}>
          -
        </button>
        <button type="button" onClick={increment}>
          +
        </button>
      </div>
    </main>
  </>
);Code language: JavaScript (javascript)

最後に、Appコンポーネントをエクスポートします。

export default App;Code language: JavaScript (javascript)

コードをより簡潔にするために、2つの追加関数increment()とdecrement()を定義する代わりに、onClickプロップで直接アロー関数を使用できます。

import { useState } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <header>
        <h1>Counter</h1>
      </header>
      <main>
        <p>{counter}</p>
        <div>
          <button type="button" onClick={() => setCounter(counter - 1)}>
            -
          </button>
          <button type="button" onClick={() => setCounter(counter + 1)}>
            +
          </button>
        </div>
      </main>
    </>
  );
};

export default App;Code language: JavaScript (javascript)

Appコンポーネントのスタイリング

まず、srcディレクトリに次のコードを含むApp.cssファイルを作成します。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main > p {
  font-size: 5rem;
  color: gray;
}

main > div {
  display: flex;
  gap: 1rem;
}

h1 {
  color: lightgray;
}

button {
  padding: 1rem;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f9dc5c;
}
Code language: JavaScript (javascript)

次に、App.cssファイルをApp.jsファイルにインポートします。

import { useState } from 'react';
import './App.css';

// ....Code language: JavaScript (javascript)

3つ目は、アプリを実行し、減少ボタンと増加ボタンをクリックして効果を確認します。

npm run

概要

• useState()関数を使用して、ステートとステートを変更する関数を作成します。
• ステートを変更するには、常にsetState()関数を使用してください。
• Reactは、ステートが変更されるとコンポーネントを再レンダリングします。