🦁
useStateとは

2025/03/16に公開
最近、触り始めたreactで最初に詰まったuseStateについて初心者なりにまとめてみました。

 useStateとは関数コンポーネント内で変化する情報（＝状態）を管理する仕組み。コード例は以下の通りで、stateが「現在」の状態、setStateがstateを変化させる関数名、initStateが状態の初期値になります。

const [state, setState] = useState(initState);
いまいち概念で説明するとわかりにくいので、問い合わせフォームを例に説明します。

 問い合わせフォームメールアドレスと問い合わせフォームがある簡素なアウトプットです。（テストなのでとても簡素です）
送信を押すとalertでメッセージが表示されます。
このアプリでメールアドレスのinputに入力される値をuseState取得しています。
mailが入力されている文字列（文字を打つごとに変化）、setMailがmailを変化させる関数名で、文字が打たれるたびに呼び出しているので、そのたびにmailが変更されていきます。
今回はメールアドレスに使っていますが、例えば、複数の数値によって見積金額を算出するようなアプリでは、useStateを使うと、リアルタイムに見積金額を表示させることができます。
App.tsx
import { useState } from "react";

function App() {
  const [mail, setMail] = useState("");

  return (
    <main>
      <h1>お問い合わせフォーム</h1>

      <label>メール</label>
      <input 
        type="email" id="mail" name="mail" width="60%"
        onChange={(e) => setMail(e.target.value)}
      />

      <label>お問い合わせ内容</label>
      <textarea name="inquiry" cols={50} rows={10}></textarea>

      <button 
        id="submit_button"
        onClick={ () => alert(mail+" 様"+ "\n" + 'お問い合わせありがとうございます！') }>
        送信
      </button>

    </main>
  );
}

export default App;
useStateとは

問い合わせフォーム

Discussion
