useStateフックでインタラクティブなUIを構築（第4回）

useStateフックの基本概念

useStateは、Reactの関数コンポーネントで状態を管理するためのフックです。状態とは、コンポーネントが保持するデータで、ユーザー操作や外部入力によって変化します。useStateは、状態変数とその値を更新する関数をペアで提供します。基本的な構文は以下の通りです。

import React, { useState } from 'react';    
    
function Example() {    
  const [count, setCount] = useState(0);    
}    

このコードでは、useState(0)が初期値0の状態countと、状態を更新する関数setCountを返します。状態が更新されると、Reactはコンポーネントを再レンダリングし、UIを最新の状態に反映します。useStateはシンプルでありながら、インタラクティブなUIを構築するための強力なツールです。

ハンズオン：カウンターアプリケーションの作成

useStateの使い方を理解するため、ボタンをクリックすると数値が増減するカウンターアプリケーションを作成します。第1回で作成したプロジェクト（my-react-app）のsrc/App.jsを以下のように編集します。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [count, setCount] = useState(0);    
    
  return (    
    <div className="app-container">    
      <h1>カウンターアプリケーション</h1>    
      <p>現在のカウント: {count}</p>    
      <button onClick={() => setCount(count + 1)}>増加</button>    
      <button onClick={() => setCount(count - 1)}>減少</button>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、useStateを使ってcount状態を管理しています。ボタンのonClickイベントに渡された関数は、setCountを呼び出してcountを更新します。src/App.cssに以下のスタイルを追加して、UIを整えます。

.app-container {    
  text-align: center;    
  padding: 20px;    
  font-family: Arial, sans-serif;    
}    
    
button {    
  margin: 10px;    
  padding: 10px 20px;    
  font-size: 16px;    
  cursor: pointer;    
}    

開発サーバー（npm start）が起動している状態で保存すると、ブラウザにカウンターが表示されます。「増加」ボタンをクリックすると数値が増え、「減少」ボタンで減ります。この動作は、useStateが状態を管理し、ReactがUIを自動的に更新する仕組みによるものです。

複数の状態を管理する

useStateは、1つのコンポーネント内で複数の状態を管理することも可能です。たとえば、カウンターに加えて、ユーザーの入力テキストを管理する例を試します。App.jsを以下のように変更します。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [count, setCount] = useState(0);    
  const [text, setText] = useState('');    
    
  return (    
    <div className="app-container">    
      <h1>インタラクティブなUI</h1>    
      <p>現在のカウント: {count}</p>    
      <button onClick={() => setCount(count + 1)}>増加</button>    
      <button onClick={() => setCount(count - 1)}>減少</button>    
      <div>    
        <input    
          type="text"    
          value={text}    
          onChange={(e) => setText(e.target.value)}    
          placeholder="テキストを入力"    
        />    
        <p>入力されたテキスト: {text}</p>    
      </div>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、text状態を追加し、<input>要素でユーザーの入力を管理しています。onChangeイベントは、入力値が変化するたびにsetTextを呼び出して状態を更新します。ブラウザで確認すると、カウンター操作とテキスト入力が独立して動作することがわかります。複数の状態を管理することで、より複雑なUIを構築できます。

ハンズオン：状態を活用したカスタムUI

useStateの柔軟性をさらに実感するため、読者自身でインタラクティブなUIを拡張します。以下の課題を試してください。App.jsを編集し、カウントが正のときと負のときで異なるメッセージを表示する機能を追加します。以下は一例です。

import React, { useState } from 'react';    
import './App.css';    
    
function App() {    
  const [count, setCount] = useState(0);    
    
  return (    
    <div className="app-container">    
      <h1>カスタムカウンター</h1>    
      <p>現在のカウント: {count}</p>    
      <button onClick={() => setCount(count + 1)}>増加</button>    
      <button onClick={() => setCount(count - 1)}>減少</button>    
      <p>    
        {count > 0    
          ? 'カウントは正の値です！'    
          : count < 0    
          ? 'カウントは負の値です！'    
          : 'カウントはゼロです。'}    
      </p>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、条件演算子を使用してcountの値に応じたメッセージを表示しています。ブラウザで確認すると、カウントの増減に応じてメッセージが動的に変化します。自分で異なる条件やメッセージを追加し、状態管理の可能性を探ってください。たとえば、特定のカウント値（例：5）に達したときに特別なメッセージを表示するなど、自由に試してみてください。

次のステップに向けて

本記事では、useStateフックを使用してコンポーネントの状態を管理し、インタラクティブなUIを構築する方法を学びました。状態管理は、Reactアプリケーションの動的な振る舞いを実現する基盤です。第5回では、イベントハンドリングを詳しく学び、ボタンクリックやフォーム入力などのユーザー操作にさらに柔軟に対応する方法を習得します。これにより、ユーザーとの対話性をさらに高められます。