ReactのuseStateを使ってカウンターアプリを作ろう！初心者でもできるReactフック入門

1. useStateとは？

1. useStateとは？

ReactのuseStateは、コンポーネントの中で「状態」を持たせるための仕組みです。
状態とは、「変わることがある値」のことです。例えばカウンターアプリでは「現在の数」が状態になります。

もしuseStateを使わなければ、ページを更新しない限り数字は変わりません。しかし、useStateを使うと、ボタンをクリックするたびに数字が増えて画面に反映されます。

プログラミング初心者の方にイメージしやすいように例えると、useStateは「箱」と「箱を開けるカギ」のようなものです。
- 箱の中に入っているのが「現在の数」
- カギを使うことで箱の中身を取り出したり入れ替えたりできる
そんなイメージを持つと分かりやすいでしょう。

2. useStateを使ったカウンターアプリのコード例

2. useStateを使ったカウンターアプリのコード例

それでは、実際にuseStateを使ってカウンターアプリを作ってみましょう。以下がサンプルコードです。

import React, { useState } from "react";

function CounterApp() {
  // count（現在の数値）と setCount（数値を更新する関数）を宣言
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+1する</button>
      <button onClick={() => setCount(count - 1)}>-1する</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

export default CounterApp;

3. コードの解説

3. コードの解説

それでは、先ほどのコードを少しずつ分解して説明します。

まず、useState(0)と書かれている部分があります。これは初期値を「0」にしているという意味です。つまり最初のカウントは0から始まります。

const [count, setCount] = useState(0); の形は少し特別に見えるかもしれません。
これは「分割代入」と呼ばれるJavaScriptの書き方です。左側のcountが「現在の値」、右側のsetCountが「その値を更新するための関数」になります。

例えば、setCount(count + 1)と書けば、現在の数に1を足した新しい値が保存されます。そしてReactは自動的に画面を更新して、最新の数字を表示してくれるのです。

この仕組みのおかげで、ユーザーがボタンを押すたびに数字が変わるアプリを簡単に作ることができます。

4. 初心者がつまづきやすいポイント

4. 初心者がつまづきやすいポイント

初めてuseStateを学ぶときに多い間違いは「値を直接書き換えようとすること」です。

例えば、次のように書いてしまうと正しく動きません。

// ❌ これはNG！
count = count + 1;

なぜなら、ReactはsetCountを使わないと「値が変わったこと」を認識できないからです。必ずsetCountを通して値を更新してください。

また、数字が一気に増えすぎたり減りすぎたりして不安なときは、リセットボタンをつけると便利です。初心者の方でも安心して試せるようになります。

5. useStateを使うメリット

5. useStateを使うメリット

useStateを使うと、以下のようなメリットがあります。

• ボタンをクリックするなどの操作に応じて画面を自動で更新できる
• 現在の状態を簡単に管理できる
• リロードしなくても画面が動的に変化する

これは従来のWebページでは難しかった「ユーザーの操作に応じてすぐに画面が変わる仕組み」をシンプルに実現できる強力な仕組みです。

まとめ

まとめ

useStateを通して理解できたことの振り返り

ここまで、ReactのuseStateを使ったカウンターアプリの作成を通して、Reactフックの基本的な考え方や、状態管理の重要性について学んできました。 useStateは、Reactで動きのある画面を作るうえで欠かせない仕組みであり、ボタンのクリックやユーザー操作に応じて画面の表示を変化させるための土台となります。 今回のカウンターアプリでは「数値が増える」「数値が減る」「数値をリセットする」というシンプルな動作でしたが、この中にはReact開発の基本要素が数多く詰まっています。

まず重要なのは、「状態」という考え方です。Reactでは、画面に表示されている値は固定されたものではなく、ユーザーの操作によって変化する可能性があります。 その変化する値を安全に管理するためにuseStateが用意されています。 単純に変数を書き換えるのではなく、set関数を通して状態を更新することで、Reactは「何が変わったのか」を正しく把握し、自動的に再描画を行ってくれます。 この仕組みを理解することで、なぜ直接代入がいけないのか、なぜsetCountのような関数を使う必要があるのかが自然と腑に落ちてきます。

また、useStateの分割代入の書き方に慣れることも大切なポイントです。 constの中に配列の形で値と更新関数を書く構文は、最初は少し戸惑うかもしれませんが、 「左側が今の状態」「右側が状態を変更するための専用関数」と覚えることで、コードの意味が一気に読みやすくなります。 この書き方に慣れると、Reactの他のフックやコンポーネント設計にもスムーズに進めるようになります。

カウンターアプリから広がるReactの考え方

今回作成したカウンターアプリはとても小さな例ですが、実際のReactアプリケーションでも考え方は同じです。 例えば、入力フォームの文字管理、ログイン状態の管理、モーダルウィンドウの開閉、タブの切り替えなど、 さまざまな場面でuseStateは活躍します。 数字だけでなく、文字列や配列、オブジェクトなども状態として扱えるため、できることの幅は非常に広いです。

「画面に表示したい値は状態として管理する」「状態が変わったらset関数で更新する」 この二つのルールを意識するだけで、Reactでの開発はぐっと分かりやすくなります。 初心者のうちは、どこまでを状態にするべきか迷うこともありますが、 カウンターアプリのような小さなサンプルを繰り返し作ることで、自然と判断できるようになります。

まとめとしてのサンプルプログラム

最後に、今回学んだ内容をシンプルに振り返るためのサンプルプログラムをもう一度確認してみましょう。 useStateを使って状態を管理し、ボタン操作によって画面が更新される基本構造を思い出してください。

import React, { useState } from "react";

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

  return (
    <div>
      <h2>現在の数値: {count}</h2>
      <button onClick={() => setCount(count + 1)}>増やす</button>
      <button onClick={() => setCount(count - 1)}>減らす</button>
      <button onClick={() => setCount(0)}>初期化</button>
    </div>
  );
}

export default SimpleCounter;

このように、useStateを使えば、React初心者でも直感的に動きのあるユーザーインターフェースを作ることができます。 大切なのは、難しく考えすぎず、「状態が変わると画面が変わる」という流れを何度も体験することです。