Zenn
📝

【今からReact #3】useStateで「状態管理ってこういうことか」

に公開
JavaScript
jQuery
Next.js
React
idea

はじめに

「ボタンをクリックするとカウントが1つ増える」

Reactのチュートリアルではおなじみのこの例、実はReactの本質が詰まっています。

なぜ、クリックで数字が変わるのか？
どうしてそれが「Reactらしい書き方」になるのか？

この記事では、ReactでUIの状態（ステート）を管理するための基本的な仕組み、useStateフックについて初心者目線で解説します。

コンポーネントの「見た目」だけでなく、「変化」をどう扱うのか。
Reactを使いこなすための第一歩として、状態管理の考え方をしっかり掴んでいきましょう！

ステートフックについて

教科書的な説明では、以下のような形で使います。

const [変数A, 変数B] = useState(初期値)
  • 変数Aにはステートの現在の値が代入されます
  • 変数Bにはその値を変更するための関数が入ります

この変数AをJSXに埋め込めば、ステートの値を表示させることができます。
また、変数Bを関数として呼び出せば、ステートの値を変更できます。

とはいえ、いきなりこんな説明をされても「はぁ、意味わからん」という感じですよね。
そこで、少し中身をのぞいてみましょう。

たとえば、

console.log(useState(0));

と書いてブラウザのコンソールで確認してみると、以下のような配列が表示されます。

Console
(2) [0, ƒ]
  0: 0
  1: ƒ()
  length: 2

これはuseState(0)が、「2つの値をもつ配列」を返しているということです。

  • 0番目：初期値で指定した0 （ステートの値）
  • 1番目：関数（ステートの値を変更するための関数）

つまり、useState(0)の戻り値を[変数A, 変数B]の形で分割代入して使うことで、それぞれの値をラクに取り出して使えるというわけです。

Reactではこの「状態（ステート）をもつこと」が基本なので、useStateの仕組みをなんとなくでも掴めると、今後の理解がぐっと楽になります！

実際にuseStateの動作を確認してみよう

useStateがどういう値を返すのか、実際のコードを動かしながら見てみましょう。
CodePen に用意したサンプルを使って、ステートの値と更新関数がどのように扱われているか確認してみてください。

以下のCodePenでは、ボタンをクリックするたびに、画面に表示されたカウントの値が1ずつ増えていくという、シンプルな動作を確認できます。

とても単純な例ですが、useStateの基本的な考え方がギュッと詰まっています。

Point1: 状態（ステート）を定義する

const [count, setCount] = useState(0);
  • countは、表示する値（状態そのもの）
  • setCountは、その値を更新するための関数
  • useState(0)は、初期値として0を渡している

Point2: 状態（ステート）を表示する

<p>カウンター: {count}</p>
  • countを直接JSXに埋め込むことで、値が画面に表示される
  • countの値が変わるたびに、自動で画面が再レンダリングされる

Point3: 状態（ステート）を更新する

const reactCounter = () => {
  setCount(count + 1);
};
  • ボタンがクリックされると、setCountを呼び出してcountの値を+1する
  • setCountを呼ぶと、Reactは自動で再レンダリングを行い、画面の表示も更新される

Point4: 状態とUIがしっかり結びついている

  • countの値が変わると画面も変わる
  • 「値を変える」だけで、「DOMを操作する」コードは書かなくていい

これは普通の JavaScript（DOM操作）との大きな違いです。

これって普通のJavaScriptでもできるのでは？という疑問

実際にこのカウンターの例を作ってみて、こう感じた人もいるかもしれません。

「これ、今までのJavaScript（DOM操作）でも同じことできるよね？」
「ReactのuseStateを使う意味ってあるの？」

たしかに、次のCodePenの例はuseStateを使わずに、純粋なJavaScriptのDOM操作だけで、同じ動作を再現することができます。

しかし、ここにReactの価値があります

普通のJavaScriptだけで書いたコードは、状態と画面の表示（DOM）を別々に管理する必要があります。
状態が変わっても、画面は自動で更新されないため、毎回手動で DOM を書き換える必要があります。

script.js
// 状態の管理
let count = 0;

// UI（DOM）の操作
document.getElementById('btn').addEventListener('click', () => {
  count++;
  document.getElementById('count').textContent = count;
});
  • countは「状態の管理」
  • document.getElementById('count').textContent = count;は「画面の更新」

このように、状態が変わっても、自分で画面の表示を更新しないとUIは変わらない。
これが「状態とUIがバラバラ」という状態です。

Reactでは、状態が変わればUIが勝手に変わる！

一方Reactでは、状態が変われば、自動で画面も変わるという仕組みになっています。

  • useStateを使って状態を定義
  • 状態が変わるたびに、Reactが自動でUIを再描画（再レンダリング）

という仕組みになっており、状態とUIが密接に結びついた設計ができます。
これは、簡易なカウンターののような小さなアプリでは違いが分かりにくいかもしれませんが、アプリが大きくなればなるほど、Reactの「状態とUIを一元管理する」設計の強みが効いてきます。

おわりに

今回はReactの基本であるuseState（ステートフック）について、実際の動作や仕組みを確認しながら、初心者の目線で気になったことをまとめてみました。

最初は「何がすごいの？」「今までのJavaScriptと何が違うの？」と感じるかもしれません。でも、Reactでは「状態とUIがしっかり結びついている」という考え方がとても大事なんだと、今回改めて実感しました。

この記事が、かつての自分と同じようにReactでつまずいている誰かの助けになればうれしいです。

次回はuseEffectや、複数のコンポーネント間で状態をやりとりする方法などにも触れていく予定です。よければ、また読んでもらえるとうれしいです！

Discussion