React State Management: useState Hook でカウンターを作成

はじめに

React における「state」とは、コンポーネント内で時間とともに変化する可能性のあるデータを指します。コンポーネントの state が変更されると、React は自動的にコンポーネントを再レンダリングして新しい state を反映します。Hooks は、関数コンポーネントから React の state やライフサイクル機能に「フック」するための関数です。

このラボでは、最も基本的な Hooks の一つである useState を使用して、React の関数コンポーネントで state を管理する方法を学びます。簡単なカウンターアプリケーションを構築し、ユーザーの操作に応じて state を初期化、表示、更新する方法を実演します。

コンポーネントファイルで useState を react からインポートする

まず、開発環境を準備しましょう。セットアップスクリプトは、Vite を使用して ~/project/my-app に新しい React プロジェクトを既に作成しています。

最初のタスクは、必要な依存関係をインストールし、開発サーバーを起動することです。WebIDE でターミナルを開き、以下のコマンドを一つずつ実行してください。

プロジェクトディレクトリに移動します：

cd my-app

プロジェクトの依存関係をインストールします：

npm install

開発サーバーを起動します：

npm run dev -- --host 0.0.0.0 --port 8080

最後のコマンドを実行すると、サーバーが実行中であることを示す出力が表示されます。これで、LabEx インターフェースの「Web 8080」タブをクリックして、ライブアプリケーションを表示できます。このラボ全体を通して、~/project/my-app/src/App.jsx ファイルを編集していきます。

このステップでは、まず React ライブラリから useState Hook をインポートすることから始めます。Hooks は特別な関数であり、それらを使用するには、まず react パッケージからインポートする必要があります。

WebIDE のファイルエクスプローラーを使用して、~/project/my-app/src/App.jsx ファイルに移動して開きます。

まず、デフォルトのコンテンツをクリーンアップして、最小限の開始点を作成しましょう。App.jsx の内容全体を以下のコードに置き換えてください。

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

次に、useState Hook をコンポーネント内で利用できるように、ファイルの先頭にインポート文を追加します。

import { useState } from "react";

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

この行は、'react' ライブラリから名前付きエクスポートである useState 関数を使用したいことを JavaScript に伝えます。

const [count, setCount] = useState(0) で状態を初期化する

このステップでは、useState Hook を呼び出して、コンポーネントに新しい state を作成します。

useState 関数は 1 つの引数を取ります。それは state の初期値です。この関数は 2 つの要素を含む配列を返します。

state の現在の値。
state を更新するための関数。

これらの 2 つの値を取得して個別の変数に格納するために、「配列の分割代入 (array destructuring)」という構文を使用します。これらの変数を [something, setSomething] のように命名するのが慣例です。

App コンポーネント関数内で、return ステートメントの前に、state を初期化するために次の行を追加します。state 変数には count という名前を付け、初期値を 0 に設定します。

~/project/my-app/src/App.jsx ファイルを以下のコードで更新してください。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

これで、私たちのコンポーネントには count という名前の state ができ、その初期値は 0 に設定されています。また、後でその値を変更するために使用できる setCount という関数も用意されました。

JSX で {count} を使用して状態の値を表示する

このステップでは、ユーザーインターフェースに count state 変数の現在の値を表示します。

JSX では、波括弧 {} で囲むことで、任意の有効な JavaScript 式をマークアップ内に直接埋め込むことができます。これにより、state 変数のような動的なデータをレンダリングできます。

現在の count の値を含むメッセージを表示するために、段落 <p> タグを追加しましょう。

~/project/my-app/src/App.jsx の return ステートメント内の JSX を変更します。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

ファイルを保存した後、「Web 8080」タブに切り替えてください。ページに「The current count is: 0」というテキストが表示され、初期 state の値が正しくレンダリングされていることを確認できるはずです。

setCount(count + 1) で状態を更新する

このステップでは、state を更新するためのロジックを定義します。state を直接変更してはならない（例：count = count + 1）ことを覚えておくことが重要です。代わりに、useState によって提供される state セッター関数（この場合は setCount）を常に使用する必要があります。

セッター関数を呼び出すと、React は state が変更されたことを認識します。React はその後、新しい state 値でコンポーネントの再レンダリングをスケジュールします。

App コンポーネント内に、カウントをインクリメントするロジックを処理する簡単な関数を作成しましょう。この関数を incrementCount と呼びます。

~/project/my-app/src/App.jsx ファイルに incrementCount 関数を追加してください。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

この関数は、呼び出されると現在の count 値を取得し、それに 1 を加算してから、新しい値を setCount に渡します。これにより、App コンポーネントの再レンダリングがトリガーされます。

ボタンクリックイベントで更新をトリガーする

この最終ステップでは、state 更新ロジックをユーザーアクションに接続します。コンポーネントにボタンを追加し、ユーザーがそれをクリックしたときに、前のステップで作成した incrementCount 関数を呼び出します。

React では、onClick のような特別な属性に関数を提供することで、クリックなどのイベントを処理できます。

JSX に <button> 要素を追加し、その onClick ハンドラーを incrementCount 関数に設定しましょう。

~/project/my-app/src/App.jsx を最終コードで更新してください。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
}

export default App;

onClick には、関数を呼び出した結果（incrementCount()）ではなく、関数自体（incrementCount）を渡していることに注意してください。React は、ボタンがクリックされるたびにこの関数を呼び出します。

これで、「Web 8080」タブに移動してください。「Increment」ボタンが表示されるはずです。それをクリックして、画面上のカウントがクリックごとに増加するのを見てください！

React counter app showing increment button