- HOME >
- Jamstack用語集 >
- useState
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 アプリケーションの開発をスムーズに進めることができます。