【入門編】 useStateの基本構文と初期化 – React実践ガイド

こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。

Reactの世界へようこそ！
最初は「コンポーネント？」「フック？なんだそりゃ…」と、呪文のような用語の連続で頭がクラクラしますよね。めちゃくちゃよく分かります。私も昔は、画面が思い通りに動いてくれないたびにディスプレイに向かって深呼吸していました。

でも、安心してください。今日お話しする`useState`（ユースステート）さえ仲良くなれば、あなたの書く画面はただの「静止画」から「生き物」のように動き出します。

今回は、Reactの状態管理の第一歩である「`useState`の基本と初期化」について、身近な例えを交えながら、とことん優しく解きほぐしていきますよ。コーヒーでも飲みながら、リラックスして読んでいってくださいね。

—

そもそも `useState` ってなんだろう？

Reactの画面は、基本的には「その時点でのデータの写し絵（スナップショット）」です。
例えば、ボタンを押したら数字が増えるカウンターを作りたいとします。普通のJavaScriptだと「ボタンが押されたらHTMLの文字を書き換える」という泥臭い操作が必要でした。

しかし、Reactの考え方は違います。
「データが変わったら、画面は勝手にいい感じに描き直されるべきだ」という思想なんですね。

この「画面と一緒に変化していくデータ（状態）」をReactに覚えさせておくための魔法の道具が、`useState` です。

身近な例え：お部屋の「ホワイトボード」

`useState` をイメージするために、あなたの机の上にある「小さなホワイトボード」を想像してください。

1. あなたはそこに「現在の数字：0」と書いておきます。
2. 誰かが「数字を増やすボタン」を押したら、あなたはホワイトボードの「0」を消して「1」と書き換えます。
3. ホワイトボードの文字が変わったので、それを見た周りの人も「あ、今は1なんだな」とパッと気づきます。

Reactの `useState` は、まさにこの「ホワイトボードと、それを書き換えるペン」をセットで用意してくれる機能なんです。

—

`useState` の基本構文：おまじないの正体

さっそく、実際の書き方を見てみましょう。
コードで見ると少し身構えてしまうかもしれませんが、バラバラに分解すれば怖くありません。

import { useState } from “react”;

function Counter() {
// ここが魔法の宣言部分です！
const [count, setCount] = useState(0);

// （中略：ここにJSXを書きます）
}

なんだこの `const [count, setCount] = useState(0);` という暗号は……と思いましたよね？
これを一つずつ、優しく紐解いていきましょう。

1. `useState(0)` —— 初期値のセット

カッコの中に入っている `0` は、「ホワイトボードに最初に書いておく数字（初期値）」です。
今回はカウンターなので `0` からスタートですが、文字にしたいなら `””`（空っぽの文字列）や、リストにしたいなら `[]`（空っぽの配列）を入れることもできます。

2. 配列の分割代入 —— ペアを受け取る仕組み

`useState` は、実行すると必ず「2つの要素が入った配列」を返してくれます。それを `const [ 〇〇, 〇〇 ] = …` というJavaScriptの機能（分割代入）で、一気に受け取っているんです。

• 1番目の要素（例：`count`）: 現在のホワイトボードの値（読み取り専用）
• 2番目の要素（例：`setCount`）: ホワイトボードの値を書き換えるためのペン（更新関数）

名前は `count` と `setCount` じゃなくても、`dog` と `setDog` でも動きます。ただ、React界隈では「現在の値」と「それを更新する `set`」という名前をつけるのがお約束になっています。

—

実物を見 てみよう！シンプルなカウンターを作ってみる

百聞は一見に如かず。実際に動くコードを見てみましょう。
コピペしてそのまま動かせるように書いておきました。

import { useState } from “react”;

export default function Counter() {
// 1. 状態変数「count」と、それを更新する「setCount」を宣言する
// 初期値は「0」からスタート！
const [count, setCount] = useState(0);

// プラスボタンが押されたときの処理
const handleIncrement = () => {
// 現在の count に 1 を足した新しい値でホワイトボードを書き換える！
setCount(count + 1);
};

return (

);
}

動きの流れを追ってみよう

1. 画面が最初に表示されたとき、`count` は初期値の `0` です。
2. ユーザーが「カウントを増やす」ボタンを押します。
3. `setCount(count + 1)` が実行され、「次は `1` にしてね！」とReactにお願いが伝わります。
4. お願いを聞いたReactは、自動的に `Counter` 関数をもう一度実行（再レンダリング）します。
5. 今度は `count` が `1` に更新され、画面の表示も「現在の数字: 1」にパッと切り替わります！

ね？仕組みが分かってしまえば、とってもシンプルでしょう？

—

初学者がよくつまずくポイントと、優しいアドバイス

ここで、現場でよくある「あれ？」というポイントを先回りして解消しておきますね。

つまずき①：直接書き換えようとして怒られる

初心者の頃、やりがちなのがこれです。

// ❌ ダメな書き方
count = 1;

「変数なんだから `=` で代入すればいいじゃん！」って思いますよね。私も最初にやりました。
でも、これだとReactは「データが書き換わったこと」に気づけません。ホワイトボードの文字をこっそり消しゴムで書き換えても、周りの人は気づかないのと同じです。

必ず `setCount` という「専用のペン」を使いましょう。

つまずき②：初期値って、数字や文字以外も入れていいの？

もちろんOKです！
例えば、ボタンの開閉状態を管理するなら `useState(false)`（最初は閉じている＝偽）、ユーザーの名前なら `useState(“”)`（最初は空っぽ）といった具合に、表現したいものに合わせて自由に変えられます。

—

まとめ

お疲れ様でした！今回は `useState` の基本構文と初期化についてお話ししました。

• `useState` は、画面と一緒に変化するデータを覚えておく「ホワイトボード」のようなもの。
• `const [値, 更新関数] = useState(初期値);` というお決まりのセットで使う。
• データを変えるときは、直接いじらずに「更新関数（`set〜`）」を使う。

最初は頭がこんがらがって当たり前です。私も最初は「なんでわざわざこんな書き方するんだよ！」とブツブツ文句を言いながらコード書いてましたから（笑）。

でも、手を動かしていくうちに、必ず「あ、そういうことね！」とパズルがハマる瞬間がやってきます。その日まで、焦らず自分のペースで楽しんでいきましょうね。

それでは、次の記事でお会いしましょう！あなたのReactライフを応援しています！