Apps

014-React Hooks｜Step1-2_useStateの使い方：テキスト入力値を管理する

はじめに

React でユーザーの入力値を動的に管理したい場合、useState フックを活用すると便利です。

本記事では、useState を使って入力フォームの値を管理し、ボタンをクリックした際に入力された値を取得する方法を解説します。

基本的なフォーム操作を理解することで、よりインタラクティブなUIを構築できるようになります。

概要

本記事では、以下の内容を学びます。

  • useState を使った状態管理の基本
  • 入力フォームの値を動的に更新する方法
  • ボタンクリック時に入力された値を取得する方法

実装を通じて、React における状態管理の基礎を理解しましょう。

実装準備：ページ作成

本記事では、React の useState を使って入力フォームの値を管理する方法を学びます。まずは、基本となるページを作成し、必要なコンポーネントを準備しましょう。

1. 新しいコンポーネントの作成

Page1_2.tsx というファイルを作成し、以下の基本構造を記述します。

"use client";
import * as React from 'react';
import Typography from '@mui/material/Typography';
import { Button, TextField } from '@mui/material';

export default function Page1_2() {
  return (
    <div>
      <Typography>useStateの使い方をマスターする</Typography>
      <br />
      <div>
        <h2>Input</h2>
        <TextField id="outlined-basic" label="Input" variant="outlined" />
        <br />
        <br />
        <Button variant="contained">Check Console log</Button>
      </div>
      <br />
      <br />
    </div>
  );
}

2. 必要なライブラリのインストール

MUI（Material-UI）を使用して UI コンポーネントを作成するため、必要なライブラリがインストールされていない場合は以下のコマンドで追加してください。

※すでにインストールしてあれば不要です。

npm install @mui/material @emotion/react @emotion/styled

実装：手順とコードの解説

本記事では、useState を用いて入力値をリアルタイムで管理し、ボタンをクリックするとコンソールに表示するアプリを作成します。以下の手順に沿って実装を進めます。

1. useState を使った状態の管理

まず、useState を使って name という状態を定義します。

const [name, setName] = useState("Code");
  • name は現在の状態（入力値）を保持する変数です。
  • setName は name を更新する関数です。
  • 初期値として "Code" を設定しています。

2. TextField コンポーネントの実装

TextField（テキスト入力欄）を作成し、onChange イベントを設定します。

<TextField
  id="outlined-basic" 
  label="Input" 
  variant="outlined" 
  onChange={(e) => setName(e.target.value)} 
/>
  • ユーザーが入力を行うと onChange イベントが発火し、setName に e.target.value（入力値）が渡されます。
  • これにより、リアルタイムで name の状態が更新されます。

3. ボタンをクリックしてコンソールに出力

ボタンをクリックすると handleClickName 関数が実行され、現在の name をコンソールに表示します。

<Button variant="contained" onClick={handleClickName}>
  Check Console log
</Button>

ボタンのクリック時に実行する関数

const handleClickName = () => {
  setName(name);
  console.log(name);
};
  • setName(name); は不要ですが、一応記述されています（name を変更していないため影響なし）。
  • console.log(name); で、現在の入力値をコンソールに表示します。

4. 画面に入力値を表示

<h3> 内で name の状態を表示し、入力に応じてリアルタイムで変化するようにします。

<h3>My name is {name}</h3>

これにより、入力した内容がリアルタイムで画面に反映されます。

最終的な動作

  1. ページを開くと、初期値 "Code" が表示される。
  2. TextField に文字を入力すると、name の状態が更新され、即座に画面に反映される。
  3. 「Check Console log」ボタンをクリックすると、コンソールに現在の name が出力される。

このように、useState を使うことで、ユーザーの入力に応じた動的な UI を実装できます。

最終コード

"use client";
import * as React from 'react';
import Typography from '@mui/material/Typography';
import { Button, TextField } from '@mui/material';
import { useState } from 'react';



export default function Page1_2() {
  // stateをuseStateで管理：セット関数を定義
  const [name, setName] = useState("Code");

  const handleClickName = () => {
    setName(name);
    console.log(name);
  };


  return (
    <div>
      <Typography>useStateの使い方をマスターする</Typography><br/>
      <div >
        <h2>Input</h2>
        <TextField
         id="outlined-basic" 
         label="Input" 
         variant="outlined" 
         onChange={(e) => setName(e.target.value)} 
         /><br/><br/>
         <Button variant="contained" onClick={handleClickName}>Check Console log</Button>
        <h3>My name is {name}</h3>
      </div><br/><br/>
    </div>
  );
}

状態変数・更新用関数（Set関数）について

React では、コンポーネントの状態（state）を管理するために useState フックを使用します。

useState を利用すると、状態変数（state variable）と、その値を更新するための関数（set関数）をセットで定義できます。

1. useState の基本的な構文

const [state, setState] = useState(initialValue);
  • state（状態変数）：現在の状態の値を保持する変数
  • setState（更新用関数）：状態を更新するための関数
  • initialValue（初期値）：状態の初期値

この setState 関数を使うことで、React コンポーネントの状態を変更できます。

2. 状態変数と更新関数の具体例

今回のコードでは、入力値を管理するために useState を使用しています。

const [name, setName] = useState("Code");
  • name（状態変数）：現在の入力値を保持する
  • setName（更新関数）：入力値を変更する
  • 初期値として "Code" を設定

3. 状態を更新する setState の使用

以下の onChange イベントで setName を使用し、入力された値で name を更新しています。

<TextField
  id="outlined-basic" 
  label="Input" 
  variant="outlined" 
  onChange={(e) => setName(e.target.value)} 
/>
  • ユーザーがテキストを入力すると onChange イベントが発火
  • setName(e.target.value) により、name の値が更新
  • 結果として、name の値が変更され、それが画面に即時反映

4. setState を使ったコンソールログ出力

ボタンをクリックした際に handleClickName 関数を実行し、現在の name をコンソールに出力しています。

const handleClickName = () => {
  console.log(name);
};

setName を使用して状態を変更することで、コンポーネントの再レンダリングが発生し、最新の状態が画面に反映されます。

5. 状態変数・更新関数まとめ

  • useState を使うことで、状態変数とその更新関数を定義できる
  • setState を使用すると、状態を変更しコンポーネントを再レンダリングできる
  • ユーザーの入力やボタンのクリックをトリガーにして、状態を変更し、UI に即座に反映させることができる

このように、useState を適切に活用することで、動的な UI を簡単に実装できます。

まとめ

この記事では、useState フックを使って テキスト入力値を管理する方法 について解説しました。

  • useState を使うことで、入力値を状態として管理できる
  • setState（更新用関数）を用いて、ユーザーの入力に応じてリアルタイムに状態を変更できる
  • onChange イベントを利用して、テキストフィールドの値を状態に反映させる
  • ボタンをクリックすることで、現在の入力値をコンソールに表示する

useState を活用すれば、ユーザーの操作に応じて動的に UI を変化させることが可能です。今後、フォームの状態管理やリアルタイム入力フィードバックなど、より高度な機能にも応用できます。

次のステップでは、useState を使った 複数の状態管理 や オブジェクトの状態管理 について学んでいきましょう！

-Apps