useState

useState を分かりやすく

ReactのuseStateは、結構頼もしいやつです。なんでかっていうと、Reactのコンポーネントで状態を管理できるようになるからなんですね。

基本から説明しましょう。useStateは、Reactのフックの一つで、コンポーネント内で状態を持つことができるようにします。これは何を意味するのかというと、コンポーネントが自身のデータ（状態）を持ち、それを使って何かをすることができるということです。

例えば、ボタンのクリック数をカウントしたい場合、そのカウントを保存する状態が必要になるんですよね。ここでuseStateが登場します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>クリック回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>クリック！</button>
    </div>
  );
}

export default Counter;

見ての通り、useStateを使うと、countという状態と、その状態を更新するためのsetCount関数を取得します。そして、ボタンをクリックするたびにsetCount関数を呼び出して、countの状態を更新します。

「そもそもこれ使う意味あるん？」って方いるかと思いますが、あります。だいぶヤバいやつです。なぜなら、これを使うと、コンポーネントが動的に反応してユーザーの操作に応じて変化するようになるからです。

例え話を使って説明すると、useStateはまるで魔法の箱のようなものです。この魔法の箱には何かを入れておくことができます（初期状態）。そして、その箱を開けて中身を見ることができます（状態を読む）。さらに、必要に応じて箱の中身を変えることもできます（状態を更新）。そして、箱の中身が変わるたびに、魔法が発動して何かが起こります（コンポーネントが再レンダリングされる）。

つまり、useStateはReactで動的なインターフェースを作るための重要な道具なんです。「そもそもこれいつ使うん？」って方いるかと思いますが、コンポーネントが何かの状態を持つ必要があるとき、例えばユーザーの入力を追跡するときや、タイマーのようなものを実装するときなど、様々な場面で使いますよね。

しかし、これが全てではありません。useStateはその名の通り、状態を持つだけではなく、その状態を「使う」ためのものでもあります。これはどういうことかというと、状態を変更すると、Reactはその変更を検知し、関連するコンポーネントを再レンダリングします。つまり、データが変わると画面も自動的に更新されるんですよ。これ、凄くないですか？

さて、ここまで大丈夫ですか？useStateを使ったReactのコンポーネントは、まるで生きているかのように感じられるかもしれませんね。それは、ユーザーのアクションに反応したり、時間の経過に反応したり、あるいはその他の状態変化に反応したりするからです。これこそが、useStateがもたらす「反応性」なんですね。

というわけで、useStateはReactで動的なアプリを作るための、とてもパワフルで使いやすいツールなんです。使いこなせば、ものすごく便利なんですよ！

結論

用語「useState」（ユースステート）とは、React という JavaScript ライブラリを使用して作成された Web アプリケーションにおいて、状態を管理するための機能です。useState を使うことで、コンポーネントの中で状態を保持し、それを React が自動的に更新することができます。

useState の使い方

useState を使った例を紹介します。

以下は、useState を使って、簡単なカウントアプリを作成した例です。

import React, { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  const handleIncrement = () => {
    setCount(count + 1)
  }

  const handleDecrement = () => {
    setCount(count - 1)
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleIncrement}>＋</button>
      <button onClick={handleDecrement}>－</button>
    </div>
  )
}

この例では、useStateフックを使って、countという状態を定義している。countは現在のカウントの値を表しており、初期値は0に設定されています。

値を更新する

handleIncrement関数とhandleDecrement関数は、それぞれカウントを増やす、減らすための関数である。この 2 つの関数は、setCount関数を呼び出して、countの値を更新している。setCountは、新しい状態を引数にして呼び出すことで、状態を更新することができます。

状態を表示する

最後に、return 文の中に、現在のカウントの値と、増減ボタンを表示する要素を記述しています。増減ボタンは、それぞれhandleIncrement関数、handleDecrement関数を呼び出して、カウントを増やしたり減らしたりしています。

このように、useState を使うことで、状態を簡単に管理することができます。また、状態を変更するたびに React が自動的に再レンダリングを行ってくれるため、Web アプリケーションの開発をスムーズに進めることができます。